![](/img/trans.png)
[英]Snap.svg error when passing a Snap.animation to Element.animate
[英]Snap svg Snap.animation() function
我正在尝试创建具有许多更改阶段的动画,Snap.animation()是否允许这样做,或者我必须使用css3动画? 感觉文档仍然缺少某些东西
最好的方法是创建一个排序功能或插件,以轮流播放动画,而无需每次都进行编码。 例如,您可以将它们作为数组传递。 这是我之前完成的一些代码。
在数组中,向其传递一个对象。
el:要采取行动的要素
animation:要执行的动画(例如,包含要为其设置动画的属性的对象)
dur:持续时间
宽松:宽松
startFunc:为每个“框架”运行的可选回调。
请注意,如果您想要延迟之类的内容,则可能会包含一些空白框架(将属性设置为相同的值或不存在或无关紧要的属性)。
function nextFrame ( frameArray, whichFrame ) {
if( whichFrame >= frameArray.length ) { return }
if( typeof frameArray[ whichFrame ].startFunc === 'function' ) {
frameArray[ whichFrame ].startFunc.call(frameArray[ whichFrame ].el)
};
frameArray[ whichFrame ].el.animate( frameArray[ whichFrame ].animation,
frameArray[ whichFrame ].dur,
frameArray[ whichFrame ].easing,
nextFrame.bind(null, frameArray, whichFrame + 1 )
);
}
// Example of use
var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' });
var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' });
var g = s.group(r,c);
var myFrames = [
{ el: g, animation: { transform: 'r360,150,150' }, dur: 1000, easing: mina.bounce },
{ el: r, animation: { transform: 't100,-100s2,3', fill: 'green' }, dur: 1000, easing: mina.bounce },
{ el: r, animation: { transform: 't100,100' }, dur: 1000, easing: mina.bounce, startFunc: sayHello },
{ el: g, animation: { transform: 's2,1' }, dur: 1000, easing: mina.bounce },
{ el: r, animation: { transform: 's1,2' }, dur: 1000, easing: mina.bounce },
{ el: c, animation: { transform: 's1,1' }, dur: 1000, easing: mina.bounce }];
nextFrame( myFrames, 0 );
function sayHello() {
alert('hello, this is me ==> ' + this);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.