Snap svg Snap.animation() 函数答案

【问题标题】：Snap svg Snap.animation() functionSnap svg Snap.animation() 函数
【发布时间】：2016-07-08 04:26:47
【问题描述】：

我正在尝试创建具有多个更改阶段的动画，Snap.animation() 是否允许这样做，或者我必须使用 css3 动画？感觉文档仍然缺少一些东西

【问题讨论】：

如果你指的是序列动画，你可以这样做，但需要一些额外的编程。例如svg.dabbles.info/snaptut-animateframe
谢谢伙计，这就是我要找的。但是，如果动画包含很多阶段，可能会有点乏味......我想我将不得不坚持这个解决方案一段时间
你能澄清一下你所说的阶段是什么意思，上面的脚本不会做（或者那很乏味，可以改进）？如果有道理，我可能会改编它。
顺便说一句，这是我不久前做的一个更新的，它允许回调和不同的元素..svg.dabbles.info/snaptut-animateframeel2
太棒了，非常感谢您的帮助。我如何给人们信用？我是这个网站的新手...

标签： javascript snap.svg svg-animate

【解决方案1】：

最好的方法是创建一个顺序函数或插件来轮流处理您的动画，而无需对每一个进行编码。例如，您可以将它们作为数组传递。这是我之前做过的一些代码。

在数组中，你传递一个对象..

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

example

【讨论】：