逐帧动画对比

吐槽君 分类:javascript

这是我参与更文挑战的第3天,活动详情查看: 更文挑战

逐帧动画是一种常见的动画形式(Frame By Frame),其原理是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画,下面来分析下 GIF 和雪碧图这两种实现方式优点和不足。

一、GIF

GIF 是一种图形交换格式,它的大致原理是,图片由许多像素组成,每一个像素都被指定了一种颜色,而这些像素综合起来就构成一个图片并且支持文本控制,多图像叠加以及多帧图像的动画播放。

优点:

  • 几乎所有主流浏览器都支持 GIF
  • 实现成本比较低,目前很多工具都可以实现
  • 支持动画,允许某些像素透明,体积小,可以更好的在网络上传播

不足:

  • 不支持半透明,支持颜色少,最多存储256色,不支持24bit彩色模式,图像比较复杂会有锯齿毛边
  • 不支持控制播放、暂停、等交互操作
  • 不停地播放 GIF 会引起页面周期性的绘制,CPU 和 GPU 需要不停地在工作,性能有损耗

实现方式:

  • 设计师提供 GIF
  • 视频转 GIT

示例:

avatar

GIF 的简单交互:

如果需求要能实现暂停和播放,可以通过其它插件来支持,比如使用插件 gifffer 来实现暂停和播放,具体原理是将GIF转成了canvas来实现一些交互操作,示例 Demo

二、雪碧图

CSS雪碧,即 CSS Sprite,是一种 CSS 图像合并技术,该方法是将多个图片合并到一张图片上,利用 CSS 或者 JS 来控制图片的定位来实现逐帧动画。

优点:

  • 可减少加载图片对服务器的请求次数,降低服务器压力
  • 可提高页面加载速度

不足:

  • 维护成本较高,后期图片改动频繁的话
  • 开发成本较高,拼图和实现动画计算,图片位置的坐标调整比较麻烦

实现方式:

CSS3

利用 CSS3 的 steps 属性切换雪碧图序列帧的方式形成动画效果,示例参考 Demo

JS

采用 JS 切换雪碧图序列帧的方式形成动画效果,示例参考 Demo

三、GIF 和雪碧图对比

实现方式 适合场景 性能损耗 兼容性 交互效果 实现成本
GIF 小动画 全支持 不支持
雪碧图( css3 ) 小动画 部分属性高 低端浏览器兼容差 不支持 较低
雪碧图( JS ) 小动画 可低、高 全支持 不支持 较低

回复

我来回复
  • 暂无回复内容