Javascript Snap.svg：使用mina（）沿螺旋线绘制线的动画

在下面的示例中，我有一个动画对象，AnimateJS。它的功能是沿螺旋线绘制线

我想将其转换为Snap的mina（）。我在应用各种mina属性来实现这一点时遇到了一些困难

任何帮助都将不胜感激

画螺旋线
使用“捕捉”可以设置沿缓和曲线绘制的线的动画
此示例的AnimateJS设置：
1.平滑度每秒80帧
2.Duration3000-以毫秒为单位的运行时
3.范围720度：结束/最大值
4.输出方程函数线性（p）{返回p}
5.应用程序输出函数addToSpiral（角度）

将在mina中使用的上述值（a、a、b、b、get、set、[easing]）

参数：
a-启动从机编号
A端从机编号
b-启动主机编号（一般情况下的启动时间）
B-结束主机编号（一般情况下的结束时间）
获取主编号的获取者（参见mina.time）
从机编号设置器
easing-oneasing函数，默认为mina.linear
再跑一次
var SNPsvg=Snap（“mySVG”）；
var SpiralG=SNPsvg.g（）.attr（{id:'SpiralG'，strokeWidth:1，stroke:'black'}）；
/*---广义动画核心函数
允许进度/输出遵循特定/自定义等式（增量）
作者：伊利亚·坎特-http://javascript.info/tutorial/animation
*/
var AnimateJS=函数（选项）{
this.options=options
var start=新日期
var iT=setInterval(
函数（）{
var timePassed=新日期-开始
var progress=timePassed/options.duration
如果（进度>1）进度=1
这个。进步=进步
var delta=选项。delta（进度）
选项。输出（增量）
如果（进度==1）清除间隔（iT）；
}，选项。延迟）
}
//--“重新加载”和“再次运行”按钮---
函数runAnimLinear（）
{
var范围=720/--度：2转---
var FPS=80/---每秒帧数=平滑度--
var延迟=1000/FPS/---延迟---
var持续时间=3000/--持续时间毫秒，3秒---
var delta=函数线性（p）{return p}/--linear---
//---这个动画---
新的AnimateJS（{延迟：延迟，持续时间：持续时间，增量：增量，输出：
函数（增量）/---输出：增量=0.0到1.0---
{
addToSpiral（范围*delta）
如果（进度==1）/--完成---
{
runAgainButton.disabled=false
}
}})
}
//---在每个输出请求时激发---
函数addToSpiral（角度）
{
半径=常数*角度；
偏移量x=半径*数学cos（角度*数学PI/180）；
偏移量=半径*Math.sin（角度*Math.PI/180）；
currentX=基点X+偏移量X；
currentY=基准点Y偏移量；
//添加垂直线段。。。
lineX=lineHHLength*Math.cos(
分支*角度*数学PI/180）；
lineY=lineHHLength*Math.sin(
分支*角度*数学PI/180）；
fromX=当前x线x；
fromY=当前y+线路y；
destX=电流x+线路x；
destY=当前的y-lineY；
lineNode=SNPsvg.line（fromX，fromY，destX，destY）
SpiralG.append（lineNode）；
lineX=lineHHLength*Math.cos(
分支*（角度+90）*数学PI/180）；
lineY=lineHHLength*Math.sin(
分支*（角度+90）*数学PI/180）；
fromX=当前x线x；
fromY=当前y+线路y；
destX=电流x+线路x；
destY=当前的y-lineY；
lineNode=SNPsvg.line（fromX，fromY，destX，destY）
SpiralG.append（lineNode）；
}
//--在“再次奔跑”时开火---
函数clearLines（）
{
SpiralG.clear（）
}
//----螺旋变量---
var basePointX=180。；
var basePointY=170。；
var currentX=0。；
var电流Y=0。；
var offsetX=0。；
var offsetY=0。；
var半径=0。；
最小变异=12；
var majorAxis=20。；
var常数=0.25；
var fromX=0。；
var fromY=0。；
var destX=0。；
var destY=0。；
变量lineX=0。；
变量lineY=0。；
var分支=3。；
var lineHVLength=2*最小值；
var lineHHLength=2*majorAxis；
var lineNode=null；

你真的需要米娜吗？Snap有一个名为Snap.animate（）的通用动画方法（docs）。这不会作用于特定元素（与element.animate（）不同）；所以你很少需要特别地和米娜打得火热（我想我从来没有必要这么做过），但要知道这并没有特别地回答你的问题

前两个参数是起始值和结束值（注意，我认为它也可以使用一个值数组在两者之间插值）。这些将被插值（就像我认为在原始代码中的增量）

第三个参数是每次调用的函数。val/delta被传递到此函数中

第四个论点是放松（所以这里需要mina.linear）

第五个参数是回调（因此如果需要，我们重置按钮以再次运行动画）

主要核心是这个转换后的函数

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的一个具体原因，也许可以将其添加到问题中

这里有一种同样的东西，使用mina来给出如何工作的想法

 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
  });

---

谢谢你，伊恩。我有大约20个使用AnimateJS对象的漂亮动画示例。我想将它们转换为快照，创建SVG和动画。我认为mina（）是最简单的方法。相反，我将使用Snap.animation（），正如您所示。我刚刚在底部添加了一个类似的示例，说明了如何使用mina，因为它有点未知，可能会帮助某些人。我通常不会使用这个（因为它更多的是在幕后），但它已经出现了好几次。