高效h5动画设计与性能优化.pdf

⾼效H5动画设计与性能优化 廖泽恺 0 ⾃我介绍 • 2015年加⼊AlloyTeam • 参与过兴趣部落、群话题、Now直播 相关⽣态开发 • 专注移动前端性能优化，前端项⽬⼯ 程化、组件化和⾃动化 • 喜欢旅游，乐于分享 ⽬录 0 1 常⽤的动画⽅案 2 移动端屏幕适配 3 性能监控与优化 4 ⾃动化与可配置 1 兴趣部落送礼 ⽬录 0 1 常⽤的动画⽅案 2 移动端屏幕适配 3 性能监控与优化 4 ⾃动化与可配置 1 动画实现⽅式—GIF • ⼀张图⽚资源 • 最多256种颜⾊ • ⽀持全透明，不⽀持半透明 • 不适⽤于“真彩⾊”— RGB • 动画质量与资源体积成正⽐ 1 动画实现⽅式—APNG • Animated PNG⼀张图⽚ • ⾮官⽅认可 • 第⼀帧是PNG，后续是拓展块 • ⽀持度低 1 动画实现⽅式—Video • 设置autoplay属性⾃动播放 • 设置loop属性控制循环 • 视频⻓度很重要 （12s – 30s） • 带宽是个问题 1 动画实现⽅式—SVG • ⽮量⽆失真 • 难以呈现复杂位图效果 • 复杂动画具有渲染问题 1 动画实现⽅式—Canvas • 可编程的画布 • 2D Context API • 单个DOM元素，⽆状态 • WebGL 1 动画实现⽅式—JavaScript • 使⽤JS控制DOM、CSS • ⾃身维护时间流和动画速度 1 动画实现⽅式—CSS3 • 过渡动画（transition） • 关键帧动画（keyframes） • 渲染引擎会使⽤跳帧保证 动画的流畅性 • 渲染引擎会停⽌或降低不 可⻅元素动画的刷新频率 1 总结 • Gif • APNG DOM元素 • Video • Canvas • JS • SVG 关键帧动画 过渡动画 • CSS 1 兴趣部落送礼 1 选择⽅案的标准—性能 FPS⼯具选择 • stats.js ：/ mrdoob/stats.js/ ⽬录 0 1 常⽤的动画⽅案