简介
我使用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
备注:
答案 0 :(得分: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" />