前端动画

实现动画有这几种方式：

GIF

GIF实现动画有以下特点：

• 一张图片资源
• 最多256种颜色
• 支持全透明，不支持半透明
• 不适用于RGB(RGB共有即256×256×256=16777216种颜色)
• 动画资源与资源体积成正比

APEN

APEN实现动画有以下特点：

• Animated PNG一张图片
• 第一张是PNG，后续是拓展块
• 浏览器支持度低

video

使用video作为背景动画是常见的方式：

• 设置autoplay自动播放(也可以使用js手动播放和暂停)
• 设置loop属性循环播放
• 带宽是一个问题(传输数据能力，一个大视频需要下载很久)

SVG

SVG实现动画有以下特点：

• 矢量图没有失真(不会因为放大而模糊)
• 难以呈现复杂位图的效果
• 复杂动画具有渲染的性能问题

Canvas

canvas是通过js编程的画布，它在页面上呈现为单个DOM元素，它具有

• 2D context API
• WebGL接口(3d)

javaScript

通过使用js控制DOM和CSS，由代码维护时间流和动画速度。可以参考我另一篇博文js实现帧动画

CSS3

CSS3动画包括

• 过渡动画(transition)
• 关键帧动画(keyframes)

渲染引擎会通过跳帧保证动画的流畅性，同时会停止或降低不可见元素动画的刷新频率。

stats.js

可以通过stats.js来监控动画的性能。

性能

动画性能要注意这几点：

• 避免频繁重绘和重排。(比如改变某个元素的颜色，就只会触发”重绘”，不会触发”重排”，因为布局没有改变。但是，”重排”必然导致”重绘”，比如改变一个元素的位置，就会同时触发”重排”和”重绘”，因为布局改变了。比如通过display: none隐藏一个DOM节点-触发重排和重绘。通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化)
• 避免 width 和 height，使用 transform: scale(x)(开启gpu加速， 但是兼容性比较差)
• 避免 margin、top / left，使用 transform: translate(x, y)
• 元素创建后，立即设置 transform: translateZ(0) 或translate3d(0,0,0)开启gpu加速。

雪碧图和压缩

如果没使用构建工具，可以通过生成雪碧图和压缩图片来处理雪碧图和压缩。

zip压缩包

对于大图使用雪碧图显然不合理，可以通过资源打包，减少请求数。通过资源打包和前端解压可以解决这一问题。

will-change属性

这个属性可以提前通知浏览器器元素哪些属性会发生动画

    .content {        will-change: transform;    }