【问题标题】:Snap.svg: animate multiple parts with the same kind on animationSnap.svg:动画上具有相同类型的多个部分
【发布时间】:2015-11-25 20:24:24
【问题描述】:

我正在制作一个使用Snap.svg JS 库的小动画/测试,主要是为了得到这个东西。

这是我的在线实验和代码的链接:http://codepen.io/nobilelucifero/pen/nmofF

SVG 是“压缩的”,反正基本结构是

#saucy
    #dragon
        #body
        #ears
        #...

我正在努力实现的是使用相同的功能对我想要移动的身体部位执行几乎相同的动画,而不是全部。

如果我删除例如 Ears 相关代码

// Animate Ears
var bounceEars = new animBounce({'what': ears, 'r': -10, 'x': 130, 'y': 120});
bounceEars.init();

身体继续按预期移动。相反,我想移动的两个身体部位一起执行循环的第一部分。 我确定我错过了一些甚至是基本 JS 代码的东西,但感觉有点失落。你们中有人对我有什么建议吗?欢迎任何建议!

非常感谢。

编辑:如果我将一个函数延迟 0 值,它会起作用。为什么?

setTimeout(function(){
    bounceEars.init();
}, 0);

【问题讨论】:

    标签: javascript animation svg snap.svg


    【解决方案1】:
    transform: 'r' + [this.args.r, this.args.x, this.args.y].join(',')
    

    您需要将数组转换为字符串...只需使用.join(',')

    【讨论】:

    • 哦,是的,对!这是一个正确的观点,谢谢。现在我只需要让它们都循环,嗯嗯。但再次感谢!
    猜你喜欢
    • 1970-01-01
    • 2021-12-20
    • 1970-01-01
    • 1970-01-01
    • 2017-03-05
    • 1970-01-01
    • 1970-01-01
    • 2011-08-05
    • 1970-01-01
    相关资源
    最近更新 更多