SVG交互设计—GIF控制器

首页 / SVG交互🎠 / 正文

实现原理

理论上是无法对一张GIF实现控制,但因为在微信图文当中,图片以及GIF只有出现在视域中才会开始加载,利用这个原理,可以先将GIF隐藏,通过点击一张图片(透明度变化)使GIF出现,随即开始加载播放。

<section style="background-image: url(触发前的图片链接);background-size:contain;background-repeat:no-repeat;">
    <svg opacity="0" style="background-image: url(触发后的GIF链接);background-repeat:no-repeat;display:block;background-size: 100%;" viewBox="0 0 * *">
        <animate attributeName="opacity" begin="click" to="1" dur="1ms" fill="freeze" calcMode="discrete"></animate>
    </svg>
</section>
SVG
打赏
评论区
头像