[英]Custom Animation in Raphael.js
Hyphotesis
我在路径上有一些圆圈(参见图中的起始形状),他们需要动画到另一条路径(图中的最终形状)。
动画必须执行以下操作:
- 将整个形状移动到新位置
- 改变路径
- 减少所有圆半径
图:
问题
Raphael.js知道如何设置从原始坐标到最终坐标的圆形动画,同时改变半径。 因为动画不像原始动画和最终动画那样在类似路径上运行,所以动画看起来不太好。 圆圈以直线从x1,y1到x2,y2。
我尝试了什么
执行直接动画,从开始到结束移动圆圈,更改半径。 就像我说的,这不行。
以间隔移动每个圆,计算每次迭代的新路径并计算圆的位置。 这很慢。
使用Element.getPointAtLength()计算每次迭代的临时圆位置。 这也很慢。
将一些中间路径硬编码在数组中并通过每个路径运行动画。 这在速度方面更好,但看起来有点生涩
那么,有什么想法吗?
http://irunmywebsite.com/raphael/additionalhelp.php?v=2&q=element.getpointatlength
我在iPod上这么说不多,但这可能会有所帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.