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（）绘制螺旋线

回答

相关问题