SVG_20_牛顿摆球

公众号原文：SVG_20_牛顿摆球

 

知识点：

让一个控件根据指定路线，循环往复的移动，适用于不复杂的路径。

有两个方法：

其一，

通过 animateMotion的路径闭合Z；

<animateMotion path="M-40 0L0 0Z" dur="1s" repeatCount="indefinite"></animate>

其二，

通过animate的values的属性值，也可以实现来回往复；

<animate attributeName="cx" values="40;40;100;100;100;100;40" dur="2s" repeatCount="indefinite"></animate>

代码中使用了多个重复的值，表示在那个位置停留一会儿。

 

为了展示出弧度，我在两端摆出去的球的坐标上提了一点，细节啊

 

效果展示（文章中效果无效）：

视频

牛顿摆球

 

Xi说孔方兄认证