作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Snap.svg为 13 个 SVG 制作动画。所有 SVG 都从一个点开始,然后通过其他几个动画(通过回调)进行动画处理。下面用代码描述了我的动画的一个简化示例:
var reset = function(person) {
person.attr({transform: 't0,0', opacity: 0});
animatePerson(person);
};
var animatePerson = function(person) {
person.animate({opacity: 1}, 300, null,function() {
person.animate({transform: 't100,20'}, 1000, null, function() {
person.animate({opacity: 0}, 300, null, function() {
reset(person);
});
});
});
};
var people = [Snap('#Person_1'), Snap('#Person_2'), Snap('#Person_3'), Snap('#Person_4'), Snap('#Person_5')];
我的第一次尝试是映射数组并为第一个动画设置超时,如下所示:
people.map(function(person, index) {
setTimeout(function() {
animatePerson(person);
}, (300*index));
});
但是这不起作用,因为 SVG 在循环时会开始相互重叠/超越。然后我尝试将超时设置为动画完整“一圈”所花费的时间长度,并将其除以 SVG 的总数,如下所示:
people.map(function(person, index) {
setTimeout(function() {
animatePerson(person);
}, (1600/people.length));
});
在 Snap.svg 或 JavaScript 中有没有一种方法可以使用回调和/或超时让动画循环,或者我离开这里?
这是我所指的完整动画的图像:
最佳答案
我这样做的一种方法是编写一个小函数,接收一个元素和一组预设动画,然后通过回调依次处理它们,如下所示...
编辑:稍作修改以便能够为每个动画包含不同的元素,下面的 example2 链接也包括包含每次调用的函数的选项。
function nextFrame ( frameArray, whichFrame ) {
if( whichFrame >= frameArray.length ) { return }
frameArray[ whichFrame ].el.animate(
frameArray[ whichFrame ].animation,
frameArray[ whichFrame ].dur,
frameArray[ whichFrame ].easing,
nextFrame.bind(null, frameArray, whichFrame + 1 )
);
}
然后你可以给它传递一个动画数组,像这样......
var myFrames = [
{ el: g, animation: { transform: 'r360,150,150' }, dur: 1000, easing: mina.bounce },
{ el: r, animation: { transform: 't100,-100s2,3' }, dur: 1000, easing: mina.bounce },
{ el: r, animation: { transform: 't100,100' }, dur: 1000, easing: mina.bounce },
{ 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( el, myFrames, 0 );
example (点击那里运行)
example 2 (这允许您包含要调用的函数及其一部分)
关于JavaScript 动画 : Handling Complex Animations That Use Callbacks & Loop,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31122570/
我是一名优秀的程序员,十分优秀!