聊聊H5页面的动画实现 — 刘慧敏.

Presentation on theme: "聊聊H5页面的动画实现 — 刘慧敏."— Presentation transcript:

1 聊聊H5页面的动画实现 — 刘慧敏

2 活动运营、产品宣传、招聘等等

3 H5页面主要特征 资源预加载、滑屏翻页、背景音乐、微信分享，以及… 炫酷的动画效果 主要介绍动画效果的实现

4 动画效果 简单的过渡动画 常见的位移、缩放、旋转、渐变动画 带有立体效果的3D 动画 帧动画/精灵动画 Canvas、SVG矢量动画

5 相关的CSS属性 opacity transform transition keyframes animation

6 过渡动画 通过transition + transform/opacity 实现
优点：简单易用 缺点：功能有限，仅能表现两个状态间的过渡效果

7 常见动画 主要通过animation + transfrom/opacity 实现 推荐参考或使用 Animate.css

8 3D动画 利用指定如下带3D 变换效果的属性来实现： translateZ, translate3d, rotateX, rotateY, rotate3d, scaleZ, scale3d

9 帧动画 将动画效果的每一帧分别导出为 图片，借助keyframes 以及 animation-timing-function 的 steps 函数实现 优点：效果棒棒哒 缺点：加大了图片k数

10 用JS监听动画状态 可以通过JS 监听如下事件来对动画进行更好的控制： animationstart, animationiteration, animationend, transitionend

11 矢量动画 有些仅由形状组成的动画，可以用Canvas 或SVG 实现为矢 量动画 优点：节省k数，高清无码不失真

12 游戏类H5 游戏通常包括动画循环、图片绘制、缓动效果、精灵动画、 碰撞检测等内容 H5游戏推荐简单易用的2D游戏引擎CreateJS

13 图片的优化 在画质可接受的范围内尽量减少文件k数及http链接数 合并雪碧图 + 压缩图片 (推荐TinyPNG)

14 Gulp工作流 合并雪碧图、图片压缩、编译SASS、添加浏览器前缀、代 码压缩、文件合并...

15 关于动画性能 避免在页面上同时执行过多的动画 对在当前屏幕不显示的动画进行停用 图片尺寸不宜过大，控制在2000x2000以下
尽量只对脱离了文档流（例如绝对定位）的元素做动画 位移动画用translate 来代替top, left 的变化 尽量只通过改变translate, scale, rotate, opacity 来实现动画 适当地利用3d 变换来开启GPU 硬件加速

16 代码调试与优化 善用强大的Chrome 开发者工具
设备模拟、元素结构&样式查看、动画缓动算法调试、 网络请求瀑布流、Profiles、Timeline 等 ease.html

17 利用工具实现 Flash to HTML5 AE (Adobe After Effects) Hype3 其他在线工具

18 Thanks~