剖析苹果公众号花开SVG动画

原创 收藏 评论
举报 2020-07-25

最近在水果公众号上看到一段菊花绽放的动画,丝般润滑的感受,吹弹可破的花瓣,让我忍不住看了下究竟,将所得整理了下,作为小技巧分享给大家。

具体看下图,视频转换成GIF质量下降,有兴趣可以去水果公号看。

flower.gif

水果绽放动画

瞄了下源代码,居然是用SVG动画拼成的序列帧。序列帧是什么?水果前端为什么好好的GIF图不用,要用序列帧?原因听我慢慢道来。

什么是序列帧?

序列帧就是一系列静止图像,将这些图像按照一定的频率播放,就形成了连续的动画,一般认为到达到每秒24帧的速率,人们才会看到平滑动画,大家平时看到的视频和动图本质都是由序列帧组成的。

2658036-da8561b9cb60911b.jpg

电影画面中序列帧翻页动画

02.gif

翻页序列帧动画

使用序列帧有什么好处?

可以保证图片质量 因为公众号后台会压缩上传的GIF图片,而且GIF图像本身对透明度支持不佳,对图像质量要求较高的场景就不合适了。而使用序列帧,我们可以使用无损的PNG图片,保证动画高清显示。

动画更平滑 相对于GIF动画,程序控制的动画用户体验更加平滑流畅。

怎样使用序列帧?

在平常的web开发中,我们可以很容易地用js或者css实现类似的帧动画,由于公众号图文环境的限制,我们只能用SVG来实现这个效果,水果公号里用animate标签巧妙的解决这个问题。

通过把每一帧的图片单独放在一层里,并使每一层重叠在一起。使用透明度动画来控制每个图片帧的出现时间,产生连续播放的动画效果。

01-4.png

绽放动画的序列帧叠加演示

微信截图_20200725105945.png

原理懂了,可是动画整整有70多帧,复制黏贴显然不适合我这样(lan)机智的前端,于是拿出了看家本领javascript大法。

微信截图_20200725110000.png

将生成的代码,在开发者工具中复制黏贴。

chrome开发者工具中复制黏贴

搞定,收工!

原文地址

https://dev.xingway.com/svg-frame-animation/

源文件
https://dev.xingway.com/tutorials/svg/flowers.zip


1595645772251762.png

本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
本内容为作者独立观点,不代表数英立场。
本文禁止转载,侵权必究。
本文系数英原创,未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)