每隔x秒动画SVG元素

Question

每隔x秒动画SVG元素

5

介绍

我了解一些使用Javascript和DOM <animate>元素的基本SVG动画技术。因此，我创建了这个SVG，但是我无法弄清楚如何在不使用太多代码的情况下每隔x秒触发动画。我尝试过begin="4s"，但它只等待第一次。

问题：

有没有像begin或dur这样的DOM属性来定义以秒为单位的间隔？哪种方法更好实现这个功能？

我的尝试：

<animateTransform attributeName="transform" additive="sum" attributeType="XML" 
type="rotate" dur="1s" repeatCount="indefinite" from="0 54.2 43.3" 
to="360 54.2 43.3" begin="3s" fill="freeze"/>

完整的示例在此处：SVG Fiddle

注：

我已经查看了SVG规范
添加一些Javascript代码是一个选项
使用CSS3也是一个选项

- Tomas Ramirez Sarduy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Scarecrow · Accepted Answer

<g> 
    <rect x="0" y="0" width="30" height="20" fill="#f83"/>      
    <animateTransform id="id1" attributeName="transform" additive="sum" 
     type="scale" calcMode="linear" begin="4;id1.end+4" dur="2" keyTimes="0;1" 
     values="1 1;2 2" fill="freeze" />

</g>

在这里，动画开始时间是相对于动画结束时间指定的，这样你的动画将始终等待你指定的时间（这里是4秒）并重新开始播放...

试一试，祝一切顺利

更新

如果你能使用id.end而不是id.end+一些时钟值，那么请正确使用keyTimes和values属性，用以下animateTransform替换你的旋转动画，并查看是否得到所需的输出结果。

<animateTransform id="id1" attributeName="transform" additive="sum" 
     type="rotate" calcMode="linear" begin="0" dur="4" 
     repeatCount="indefinite"   keyTimes="0;0.75;1" 
     values="0 54.2 43.3 ; 0 54.2 43.3 ; 360 54.2 43.3" fill="freeze" />