文章/答案/技术大牛

发布

社区首页 >问答首页 >Snap.svg:用mina()绘制螺旋线的动画

问Snap.svg:用mina()绘制螺旋线的动画
EN

Stack Overflow用户

提问于 2017-04-12 18:19:40

回答 1查看 340关注 0票数 0

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

我想把它转换成Snap的mina()。我在应用各种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
	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>

snap.svg

javascript

svg

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-04-13 08:33:29

你真的需要米娜吗？Snap有一个名为Snap.animate() (docs 这里)的通用动画方法。这并不适用于特定的元素(不像element.animate() )；因此很少需要专门地使用mina (不要认为我从来不需要这样做)，但要知道这并不是专门回答您的问题。

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

第三个参数是每次调用的函数。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的特定原因，请将其添加到问题中。

小提琴

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

小提琴

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43376867

复制

相似问题

问Snap.svg:用mina()绘制螺旋线的动画
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Snap.svg:用mina()绘制螺旋线的动画EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Snap.svg:用mina()绘制螺旋线的动画
EN