Snap.svg：動畫使用mina（）繪製螺旋線

我有一個動畫對象，AnimateJS，在下面的示例中。它的功能是沿着螺旋線畫線。Snap.svg：動畫使用mina（）繪製螺旋線

我想將其轉換爲Snap's mina（）。我在應用各種米納特性以實現這一點方面遇到了一些困難。

任何幫助，將不勝感激。

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
<script type="text/javascript" src="http://svgDiscovery.com/_SNP/snap.svg-min.js"></script> 
 
</head> 
 
<body onload="setTimeout(runAnimLinear,1000)" > 
 
<h4>Draw Spiraled Lines</h4> 
 
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'> 
 
Use Snap to animate lines drawn along a spiral </div> 
 
<table><tr> 
 
<td> 
 
<table> 
 
<tr><td colspan=2><b>This Example's AnimateJS Settings:</b></td></tr> 
 
<tr><td>1. Smoothness</td><td>80 frames per second</td></tr> 
 
<tr><td>2. Duration</td><td>3000 - runtime in ms</td></tr> 
 
<tr><td>3. Range</td><td> 720 degrees : ending/maximum value</td></tr> 
 
<tr><td>4. Output Equation</td><td><span style=color:blue>function</span> linear(p){return p} </td></tr> 
 
<tr><td>5. Application Output </td><td><span style=color:blue>function</span> addToSpiral(angle)</td></tr> 
 
</table><p></p> 
 
The above values to be used in <b>mina(a, A, b, B, get, set, [easing])</b> <br> 
 
<textarea style=border-width:0px;width:400px;height:180px;> 
 
Parameters: 
 
a - start slave number 
 
A - end slave number 
 
b - start master number (start time in general case) 
 
B - end master number (end time in general case) 
 
get - getter of master number (see mina.time) 
 
set - setter of slave number 
 
easing - oneasing function, default is mina.linear 
 
</textarea> 
 
</td> 
 
<td> 
 
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'> 
 
<svg id="mySVG" width="400" height="400"> 
 
</svg> 
 
</div> 
 
<center><button disabled id=runAgainButton onClick=clearLines();runAnimLinear();this.disabled=true>run again</button></center> 
 
</td> 
 
</tr> </table> 
 

 
</center> 
 
<script> 
 
var SNPsvg = Snap("#mySVG"); 
 
var SpiralG = SNPsvg.g().attr({id:'SpiralG',strokeWidth:1,stroke:'black' }); 
 

 
/*---generalized animate core function 
 
Allows progress/output to follow a specific/customized equation(delta) 
 
by: Ilya Kantor - http://javascript.info/tutorial/animation 
 
*/ 
 
var AnimateJS=function(options){ 
 
    this.options=options 
 
\t var start = new Date 
 
\t var iT = setInterval(
 
\t function(){ 
 
\t \t var timePassed = new Date - start 
 
\t \t var progress = timePassed/options.duration 
 
\t \t if (progress > 1) progress = 1 
 
\t \t this.progress=progress 
 
\t \t var delta = options.delta(progress) 
 
\t \t options.output(delta) 
 
\t \t if (progress == 1)clearInterval(iT); 
 
\t },options.delay) 
 
} 
 
//--onload, and 'run again' button--- 
 
function runAnimLinear() 
 
{ 
 
\t var range=720 //--degrees: 2 revs--- 
 
\t var FPS=80 //---Frames Per Second = smoothness-- 
 
\t var delay=1000/FPS //---delay--- 
 
\t var duration=3000 //---duration ms, 3 seconds--- 
 
\t var delta=function linear(p){return p}//---linear--- 
 
\t //---this animation--- 
 
\t new AnimateJS({delay:delay,duration:duration,delta:delta,output: 
 
\t function(delta)//---output: delta=0.0 thru 1.0--- 
 
\t { 
 
\t \t addToSpiral(range * delta) 
 
\t \t if(progress==1) //---finished--- 
 
\t \t { 
 
\t \t \t runAgainButton.disabled=false 
 
\t \t } 
 
\t }}) 
 
} 
 

 
//---fired at each output request--- 
 
function addToSpiral(angle) 
 
{ 
 
\t radius = Constant*angle; 
 
\t offsetX = radius*Math.cos(angle*Math.PI/180); 
 
\t offsetY = radius*Math.sin(angle*Math.PI/180); 
 
\t currentX = basePointX+offsetX; 
 
\t currentY = basePointY-offsetY; 
 
\t // add perpendicular line segments... 
 
\t lineX = lineHHLength*Math.cos(
 
\t \t branches*angle*Math.PI/180); 
 
\t lineY = lineHHLength*Math.sin(
 
\t \t branches*angle*Math.PI/180); 
 

 
\t fromX = currentX-lineX; 
 
\t fromY = currentY+lineY; 
 
\t destX = currentX+lineX; 
 
\t destY = currentY-lineY; 
 

 
\t lineNode = SNPsvg.line(fromX,fromY,destX,destY) 
 
\t SpiralG.append(lineNode); 
 

 
\t lineX = lineHHLength*Math.cos(
 
\t branches*(angle+90)*Math.PI/180); 
 
\t lineY = lineHHLength*Math.sin(
 
\t branches*(angle+90)*Math.PI/180); 
 

 
\t fromX = currentX-lineX; 
 
\t fromY = currentY+lineY; 
 
\t destX = currentX+lineX; 
 
\t destY = currentY-lineY; 
 

 
\t lineNode = SNPsvg.line(fromX,fromY,destX,destY) 
 

 
\t SpiralG.append(lineNode); 
 
} 
 
//--fired on 'run again' --- 
 
function clearLines() 
 
{ 
 
    SpiralG.clear() 
 

 
} 
 

 
//----spiral variables--- 
 
var basePointX = 180.; 
 
var basePointY = 170.; 
 
var currentX  = 0.; 
 
var currentY  = 0.; 
 
var offsetX  = 0.; 
 
var offsetY  = 0.; 
 
var radius  = 0.; 
 
var minorAxis  = 12; 
 
var majorAxis  = 20.; 
 
var Constant  = 0.25; 
 
var fromX   = 0.; 
 
var fromY   = 0.; 
 
var destX   = 0.; 
 
var destY   = 0.; 
 
var lineX   = 0.; 
 
var lineY   = 0.; 
 
var branches  = 3.; 
 
var lineHVLength = 2*minorAxis; 
 
var lineHHLength = 2*majorAxis; 
 
var lineNode  = null; 
 
</script> 
 

 
</body> 
 
</html>

來源

2017-04-12 Francis Hemsher

你真的需要一錠銀子？ Snap有一個名爲Snap.animate（）的通用動畫方法（docs here）。這不作用於特定的元素（不像element.animate（））;所以你很少需要特意與米娜談話（不要以爲我曾經需要），但是要感謝這並不是特意回答你的問題。

前兩個參數是開始值和結束值（注意，它也可以接受一個值的數組，我認爲它們之間插值）。這些將會被插入（就像我認爲在原始代碼中的增量）。

第三個參數是每次調用的函數。 val/delta被傳入這個函數。

第四個參數是寬鬆（所以mina.linear想在這裏）。

5日的說法是回調（所以我們重置按鈕，重新運行動畫，如果想）

主要的核心是這個轉換功能..

function runAnimLinear() { 
    var range=720 //--degrees: 2 revs--- 
    var duration=3000 //---duration ms, 3 seconds--- 

    Snap.animate(0, 1, function(delta) { 
    addToSpiral(range * delta) 

    }, duration, mina.linear, function() { runAgainButton.disabled=false } ); 
}

我已經離開作爲休息是。

但是，這裏現在有一些問題，這取決於是否真的需要光滑度這樣的東西，所以它不完全相同。如果是這樣，我認爲它需要另一種解決方案，這會更復雜一點，我不確定是否會有足夠的理由不使用原來的解決方案。如果這是您需要使用mina的具體原因，那麼可以將其添加到問題中。

jsfiddle

這是一種使用米娜給的是如何工作的想法是一樣的。

var anim = mina(0, 1, mina.time(), mina.time() + duration, mina.time, 
    function(delta) { addToSpiral(range * delta)}) 

//callback using eve, referencing the id of the animation from above 
eve.once("mina.finish." + anim.id, function() { 
    runAgainButton.disabled=false 
    });

jsfiddle

來源

2017-04-13 08:33:29 Ian

謝謝，伊恩。我有大約20個使用AnimateJS對象的漂亮動畫示例。我想將它們轉換爲Snap，同時創建SVG和動畫。我認爲mina（）應該是最簡單的方法。相反，我將使用Snap.animation（），正如你所示。 –

我剛剛在底部添加了一個類似的例子，現在，您可以如何使用mina，因爲它有點未知，並可能幫助某人。我通常不會使用它（因爲它在幕後），但它已經出現了幾次。 – Ian

Snap.svg：動畫使用mina（）繪製螺旋線

回答

相關問題