svg动画:begin属性实现交互效果

一般在前端实现交互性动画会使用js,如果js被限制使用,那还可以使用SVG的begin属性来实现一些事件触发的动画。

下面通过SVG实现了点击显示隐藏文字的动画,可用于微信图文发布等场景,实现一些简单的交互效果

<div style="width: 200px; border: 1px solid #ccc;">
    <div style="height: 100px; font-size: 20px; line-height: 100px; text-align: center; color: #66ccff;">tenshi.cc</div>
    <div style="margin-top: -100px; height: 100px;">
        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
            <rect width="100%" height="100%" style="fill: rgb(255, 255, 255); opacity: 1;" x="0%">
                <animate attributeName="opacity" begin="click" dur="2" from="1" to="0" fill="freeze"></animate>
            </rect>
        </svg>
    </div>
</div>

点击下面框查看效果↓

tenshi.cc
SVG动画也支持mouseover、mouseout、mousedown等事件。

如果需要做连续动画,可以对每个动画设置一个id,然后将后续动画的触发事件设置为前一个动画的结束

<svg width="200" height="200" viewPort="0 0 200 200">
      <rect width="199" height="199" x="0.5" y="0.5" stroke="#eee" fill="none" />
      <rect width="60" height="20" x="20" y="70" fill="#66ccff">
        <animate id="a" attributeName="width" from="60" to="160" dur="2s" begin="click" />
        <animate id="b" attributeName="width" from="160" to="60" dur="2s" begin="a.end" />
        <animate attributeName="x" from="20" to="120" dur="2s" begin="a.end" />
        <animate id="c" attributeName="width" from="60" to="160" dur="2s" begin="b.end" />
        <animate attributeName="x" from="120" to="20" dur="2s" begin="b.end" />
        <animate attributeName="width" from="160" to="60" dur="2s" begin="c.end" />
      </rect>
</svg>

点击下面框查看效果↓


Copyright ©2016-2018 红世幻境 All Rights Reserved

浙ICP备15041976号-2 联系邮箱: shana@tenshi.cc

Top