Question

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

我想将其转换为Snap的mina（）。我应用各种mina属性来实现这一点有点困难。

任何帮助都将不胜感激。

＆＃13;

<!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
	var start = new Date
	var iT = setInterval(
	function(){
		var timePassed = new Date - start
		var progress = timePassed / options.duration
		if (progress > 1) progress = 1
		this.progress=progress
		var delta = options.delta(progress)
		options.output(delta)
		if (progress == 1)clearInterval(iT);
	},options.delay)
}
//--onload, and 'run again' button---
function runAnimLinear()
{
	var range=720 //--degrees: 2 revs---
	var FPS=80 //---Frames Per Second = smoothness--
	var delay=1000/FPS //---delay---
	var duration=3000 //---duration ms, 3 seconds---
	var delta=function linear(p){return p}//---linear---
	//---this animation---
	new AnimateJS({delay:delay,duration:duration,delta:delta,output:
	function(delta)//---output: delta=0.0 thru 1.0---
	{
		addToSpiral(range * delta )
		if(progress==1) //---finished---
		{
			runAgainButton.disabled=false
		}
	}})
}

//---fired at each output request---
function addToSpiral(angle)
{
	radius = Constant*angle;
	offsetX = radius*Math.cos(angle*Math.PI/180);
	offsetY = radius*Math.sin(angle*Math.PI/180);
	currentX = basePointX+offsetX;
	currentY = basePointY-offsetY;
	// add perpendicular line segments...
	lineX = lineHHLength*Math.cos(
		branches*angle*Math.PI/180);
	lineY = lineHHLength*Math.sin(
		branches*angle*Math.PI/180);

	fromX = currentX-lineX;
	fromY = currentY+lineY;
	destX = currentX+lineX;
	destY = currentY-lineY;

	lineNode = SNPsvg.line(fromX,fromY,destX,destY)
	SpiralG.append(lineNode);

	lineX = lineHHLength*Math.cos(
	branches*(angle+90)*Math.PI/180);
	lineY = lineHHLength*Math.sin(
	branches*(angle+90)*Math.PI/180);

	fromX = currentX-lineX;
	fromY = currentY+lineY;
	destX = currentX+lineX;
	destY = currentY-lineY;

	lineNode = SNPsvg.line(fromX,fromY,destX,destY)

	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>

＆＃13;

Answer 1

你真的需要米娜吗？ Snap有一个名为Snap.animate（）的通用动画方法（docs here）。这不会对特定元素起作用（与element.animate（）不同）;所以你很少需要专门跟mina打瞌睡（不要以为我曾经需要），但是要明白这并不是特别回答你的问题。

前两个参数是起始值和结束值（注意，它可以采用值数组以及我认为插值之间）。这些将在两者之间进行插值（就像我在原始代码中所想的那样）。

第三个参数是每次调用的函数。 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 }  );
}

剩下的我已经离开了。

然而，现在这里存在一些问题，这取决于是否真的需要平滑度，所以它们并不完全相同。如果是这样，我认为＆＃39;它需要另一种解决方案，这将有点复杂，我不确定是否有足够的理由不使用原件。如果您需要使用mina的具体原因，可以将其添加到问题中。

jsfiddle

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

jsfiddle

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

1 个答案: