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
打赏
评论区
头像
    头像
    densqzxfoy
      

    文章结构紧凑,层次分明,逻辑严密,让人一读即懂。

    头像
    cbfqezfopy
      

    社会责任感贯穿全文,彰显学者担当。

    头像
    jbghzbkgxh
      

    ?技术类评语?

    头像
    usoowtjwpe
      

    瑕不掩瑜,稍加打磨必成佳作。

    头像
    xthmsakyfs
      

    选材新颖独特,通过细节描写赋予主题鲜活生命力。