5

介绍

SVG我知道一些同时使用JavascriptDOM<animate>元素的基本动画技术。所以我创建了这个 SVG，但我不知道如何在没有太多代码的情况下每 x 秒触发一次动画。我试过begin="4s"了，但它只等待第一次。

问题：

有一个类似beginor的 DOM 属性dur，但是要以秒为单位定义间隔？实现这一目标的更好方法是什么？

我尝试过的：

<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 也是一种选择
4

1 回答 1

4 
<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" />
于 2013-01-25T18:17:39.463 回答