SVG SMIL动画的begin,end属性详解
2017-02-12 13:57

svg begin支持的值

svg smil begin属性支持的值有:时间值,offset-value,syncbase-value,event-value, repeat-value, accessKey-value ,media-marker-vaue,wallclock-sync-value,"indefinite"。end属性跟begin属性取值类似,本文以begin为例子介绍。

时间值是我们最常用的,单位有s,ms,min等。表示动画多长时间后开始。

下面我们介绍其他属性值的用法。

offset-value

此属性用来表示时间的偏移量,通过+/- 加上时间值表示,单独使用表示页面加载多长时间后开始动画,不能为负值。结合其他属性使用表示在其基础上的时间偏移量。

syncbase-value

用来同步确定时间,用法如:[元素id].end +offset-value。借助其他动画的begin或者end实现两个动画的级联操作。

<svg viewBox="0 0 500 500">
    <ellipse rx="80" ry="40" cx="80" cy="460" fill="#FFA800" stroke="none">
        <animate id="hor" attributeName="cx" 
        begin="0s" from="80" to="420" dur="2s" fill="freeze"></animate>
        <animate attributeName="cy" 
        begin="hor.end" from="460" to="40" dur="4s" fill="freeze"></animate>
    </ellipse>
</svg>

效果如下:

svgbegin.png

一个椭圆,先横向运动,然后再纵向运动,点击demo查看效果:begin syncbase-value示例

event-value

event-value表示通过事件启动或结束动画,用法[元素id].eventName +offset-value.

<svg viewbox="0 0 500 500">
    <circle r="100" cx="250" cy="250" stroke="#FF4E00" stroke-width="1" fill="#fff">
    </circle>
    <circle r="10" cx="0" cy="0" fill="#00FF4E" stroke="none">
        <animateMotion
            begin="cp.click+1s" end="ps.click"
            path="M 250,350 A 100,100 0 0 0 250,150 A 100,100 0 0 0 250,350"
            dur="5s" fill="freeze" repeatCount="indefinite">

        </animateMotion>
    </circle>
    <text x="100" y="400" id="cp" cursor="pointer">开始</text>
    <text x="200" y="400" id="ps" cursor="pointer">暂停</text>
   
</svg>

效果如下:

svgbegin2.png

绿色的小圆球围着圆形的边缘转动,demo体验:svg begin event-value轨迹动画

在demo中,点击开始,要等待1s才会执行动画,点击暂停按钮会让动画停止,这里使用fill属性,有两个值:freeze,remove。freeze表示停止保留动画移动到的位置状态,remove表示重头开始复位。其中的圆形路径绘制使用A命令,svg path的A命令讲解

这里我们停止动画后再点击开始,动画会重头开始,如果你想要动画继续进行,需要使用js操作。

<svg viewbox="0 0 500 500">
    <circle r="100" cx="250" cy="250" stroke="#FF4E00" stroke-width="1" fill="#fff">
    </circle>
    <circle  r="10" cx="0" cy="0" fill="#00FF4E" stroke="none">
        <animateMotion id="andom"
                begin="0s"
                path="M 250,350 A 100,100 0 0 0 250,150 A 100,100 0 0 0 250,350"
                dur="5s" fill="freeze" repeatCount="indefinite">

        </animateMotion>
    </circle>
    <text x="230" fill="#D51313" y="450" id="svgbtn" 
    onclick="continueAn()" cursor="pointer">暂停</text>
</svg>
<script>
    var svg=document.getElementsByTagName("svg")[0];
    var btn=document.getElementById("svgbtn");
    function continueAn(){
        //判断动画是否暂停
        if(svg.animationsPaused()) {
            svg.unpauseAnimations();
            btn.innerHTML="暂停";
        }else{
            svg.pauseAnimations();
            btn.innerHTML="开始";
        }
    }
</script>

效果如下:

svgbegin3.png

你可以点击开始/暂停 按钮来控制动画的进度。体验demo:svg pauseAnimations控制动画

但是这个pauseAnimations暂停动画是svg根元素的方法,是用来设置svg中所有动画的开关的,使用时一定要注意这一点。

repeat-value

repeat-value表示一个元素的一个动画重复多少次后开始这个元素的另动画,使用方法:【元素id】.repeat(n) +offset-value。

<svg viewBox="0 0 500 500">
    <circle r="10" cx="10" cy="490" fill="#D51313">
        <animate id="fan" attributeName="cx" begin="0s" 
        values="10;490;10" dur="3s" repeatCount="indefinite" ></animate>
        <animate attributeName="cy" from="490" 
        to="10" dur="2s" begin="fan.repeat(3)" fill="freeze"></animate>
    </circle>
</svg>

效果如下:

svgbegin4.png

小圆球会在下面左右循环三圈后开始第二个动画往上移动,就会出现斜着上去的效果,然后开始在顶部左右移动。svg begin repeat示例

accessKey-value

accesskey-value表示在键盘上按键后开始动画。

<svg viewBox="0 0 500 500">
    <circle r="10" cx="10" cy="490" fill="#D51313">
        <animate id="fan" attributeName="cx" begin="accessKey(m)" 
        values="10;490;10" dur="3s" repeatCount="indefinite" ></animate>
        <animate attributeName="cy" from="490" to="10" dur="2s" 
        begin="fan.repeat(3)" fill="freeze"></animate>
    </circle>
</svg>

这个代码中火狐下有效,中chrome浏览器下没有反应,建议不要使用。

“indefinite”

indefinite关键字设置的svg动画要通过js启动。调用svg的api中的beginElement()方法来启动“indefinite”的svg动画。

 <svg viewBox="0 0 500 500">
        <circle r="10" cx="10" cy="490" fill="#D51313">
            <animate id="fan" attributeName="cx" begin="indefinite" 
            values="10;490;10" dur="3s" repeatCount="indefinite" >
            </animate>
            <animate attributeName="cy" from="490" to="10" 
            dur="2s" begin="fan.repeat(3)" fill="freeze"></animate>
        </circle>
        <text x="240" y="240" id="inits" 
        fill="red" font-size="28" cursor="pointer">启动</text>
    </svg>
</div>
<script>
    var btn=document.getElementById("inits");
    var anim=document.getElementById("fan");
    btn.addEventListener("click",function(){
        anim.beginElement();
        this.style.display="none";
    });
</script>

效果如下:

svgbegin5.png

点击上面的启动按钮调用js来启动动画。注意这个beginElement()方法是animate等动画标签对象上的方法。svg beginElement方法示例

对于"indefinite"的动画我们还可以通过svg中a标签的xlink:href指向动画元素来点击启动动画。

<svg viewBox="0 0 500 500">
    <circle r="10" cx="10" cy="490" fill="#D51313">
        <animate id="fan" attributeName="cx" begin="indefinite" 
        values="10;490;10" dur="3s" repeatCount="indefinite" ></animate>
        <animate attributeName="cy" from="490" to="10" 
        dur="2s" begin="fan.repeat(3)" fill="freeze"></animate>
    </circle>
    <a xlink:href="#fan">
    <text x="240" y="240" id="inits" fill="red"
     font-size="28" cursor="pointer">启动</text>
    </a>
</svg>

这中“indefinite”通过a标签启动的动画,和event-value启动的svg动画有异曲同工的用途,你可以根据喜好来抉择。

svg的动画的begin属性参数十分灵活,可以灵活运用达到自己想要的目标。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(11469)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1