Question

简介

我使用SVG和DOM Javascript元素了解<animate>的一些基本动画技术。所以我创建了这个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 Spec
添加一些Javascript代码是一个选项
使用CSS3也是一个选项

Answer 1

<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 + some_clock_value然后正确使用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" />

每隔x秒动画SVG元素

1 个答案: