【问题标题】:raphael.js animation problem: animate only certain points of a pathraphael.js 动画问题:仅对路径的某些点进行动画处理
【发布时间】:2011-09-18 03:24:10
【问题描述】:

我创建了一个粗略的云生成器here。 除了固定的第一条和最后一条之外,云的每条弧都是随机生成的。

我希望云的形状缓慢变化,所以我创建了一个动画,每次调用时都会调用新生成的路径。

问题是在新旧路径之间的插值过程中,有时最后一个点也会移动,而它不应该移动。

如何确保第一个点和最后一个点不动?

【问题讨论】:

    标签: animation svg raphael


    【解决方案1】:

    哇,你的云动画看起来真不错。我不太确定 Raphael 动画功能是如何工作的,但我怀疑问题是由 Raphael 如何在具有不同坐标数的两条路径之间移动造成的。

    您可以通过移动最后的 z(关闭形状)并在这些点之间手动绘制一条线(确保这条线不是动画的一部分)来解决这个问题。如果需要,另一种可能性是确保路径中有相同数量的坐标。

    【讨论】:

    • 谢谢!问题可能是,如果我将路径一分为二,那么形状的填充就会中断!如果这不是问题,你能发布一个例子吗? (PS:随意使用云!)
    • 这有点小技巧,而且边角不太对,但我认为它可以正常工作:dl.dropbox.com/u/169269/cloud.html
    • 非常感谢,它有效!所以这绝对是 SVG 动画的一个包含闭角的错误或 raphael 的错误!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-01-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-06-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多