本文介绍了SVG动画延迟每次重复的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想为SVG动画循环的每次迭代添加一个延迟。这是一个简单的例子。
< svg xmlns =http://www.w3.org/2000/svgwidth =100px height =100px> < circle cx =50cy =50r =15fill =blue> < animate id =opattributeType =CSSattributeName =opacityfrom =1to =0dur =3srepeatCount =indefinite/> < / circle>< / svg>
使用 begin
只会延迟第一次迭代,那么是否有延迟每次迭代的方法?
解决方案
您可以将SMIL动画元素的 end
事件添加到属性。
此外,你可以添加多个值,用;
分隔到这个开始
属性:
< svg xmlns =http://www.w3.org/2000/svgwidth =300pxheight =100px> < circle cx =50cy =50r =15fill =blue> < animate id =opattributeType =CSSattributeName =opacityfrom =1to =0dur =3sbegin =3s; op.end + 3s/> < / circle>< / svg>
I'd like to add a delay to each iteration of an SVG animation loop. Here's a simple example.
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
<circle cx="50" cy="50" r="15" fill="blue">
<animate id="op" attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="3s" repeatCount="indefinite" />
</circle>
</svg>
Using begin
only delays the first iteration, so is there a way to delay every iteration?
解决方案
You can add the end
event of a SMIL animated element to the begin
attribute.
Also, you can add multiple values, separated by ;
to this begin
attribute :
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
<circle cx="50" cy="50" r="15" fill="blue">
<animate id="op" attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="3s" begin="3s;op.end+3s" />
</circle>
</svg>
这篇关于SVG动画延迟每次重复的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!