个 人介绍 任旻 (minren) 腾讯 高级 工程师 QQ 互联开放平台 新浪微博 :@min_ren 腾讯微博 :@renmin
动画并不神秘 什么是动画 对象属性随时间变化
HTML5 实现动画的 方式 按照改变属性的 方式可以分为三种 方式 : CCS3 JavaScript Canvas
CSS3 动画 CSS3 动画包括 4 个 方 面 : CSS 2D Transformations, CSS 3D Transformations, CSS Transitions, CSS Animations; Transformation 补充定义了 width, height, left, top 等之外的 一些可 用于实现动画的属性, 如 rotate, scale, skew Transition 和 Animation 用于定义动画的过程 Transition 可以实现简单的动画,Animation 则可以通过设定多个关键帧实现相对复杂的动画
为什么选择 CSS3 动画? 不需要其他任何语 言或者插件的 支持 ; 相对 Flash 来说对 无线端的 支持 非常好, 但是却能实现很多 Flash 的动画效果 ; 可以 用更少的代码量来实现 用JS 需要写很多倍的效果 ; 让浏览器来负责 生成动画, 所以类似 GPU 加速这样的优化对 CSS3 也是有效果的 ;
项 目实践 拍拍 3 月彩钻节 http://www.paipai.com/caizuanjie.shtml
拍拍 5 月促销活动 http://www.paipai.com/fangjia.shtml
手机 QQ 网购 http://m.buy.qq.com/?t=t
ECD 前端实验室 http://ecd.ecc.com/fd_lab/concept/view.html
主要细节 CSS3 关键帧动画 ; 利 用 animation-delay 这个属性来达到不同元素动画之间的衔接来达到整体的动画效果
各种 transform 2D 变换 rotate: scale: skew: matrix: Skew(X,Y) X 正数是向 X 轴负 方向扭曲,Y 正数是向 Y 轴负 方向扭曲 ; IE 下 matrix 滤镜可以实现在其他 高级浏览器相同的效果 ; CSS3 动画提供了 几种动画过度的 方式 : http://www.paipai.com/promote/2012/index_240.shtml
3D 变换 将正 方体的每个 面 用 3D 变换定位好, 然后在 父层上应 用 3D 动画, 达到旋转的正 方体的效果 ;
一些 示例 https://developer.mozilla.org/zh-tw/demos/detail/battlefield-css3/launch 一个 用CSS3 动画实现的超棒战争动画 ; http://www.paipai.com/ promote/2012/index_236.shtml CSS3 幻灯 片 http://www.webkit.org/blog-files/3d-transforms/poster-circle.html CSS3 3D 变换 http://www.paipai.com/promote/2012/index_218.shtml CSS3 菜单, 太阳系, 进度条
http://ie.microsoft.com/testdrive/graphics/hands-on-css3/handson_transitions.htm 你可以在这 里找到 目前所有的动画效果 ; http://www.paipai.com/promote/2012/index_238.shtml JS+CSS3 3d 盒 子 http://lasas.me/demo/img_opt/ppt.html http://bartaz.github.com/impress.js/#/bored CSS3 幻灯 片
CSS3 与 JS webkit 内核的浏览器提供了很多 CSS3 的事件接 口, 开发者可以很 方便的使 用这些事件 ; 例如在 safari 的 文档中, 你可以在 webkit 中直接调 用它的 CSS3 方法 : Firfox
由于每个浏览器都带 自 己的前缀, 所以在控制的时候需要将他们的前缀都提取出来 : var props = 'transform WebkitTransform MozTransform OTransform mstransform'.split(' '), prop; for(var i = 0, l = props.length; i < l; i++) { if(typeof el.style[props[i]]!== "undefined") { prop = props[i]; break; } } 然后操作这些属性即可 : document.getelementbyid('cube').style[prop]
在 支持 CSS3 动画的浏览器中存在 一个 WebKitCSSKeyframesRule 构造器, 可以 用来改变 keyframe:
然后这个时候可以通过 addrule,deleterule 和 findrule 对 keyframes 对象进 行操作 : 修改前 : csstext: "@-webkit-keyframes back-y-spin { 0% { -webkit-transform: rotatey(360deg); } 50% { -webkit-transform: rotatey(180deg); } 100% { - webkit-transform: rotatey(0deg); } }" 修改后的属性 :
当然如果你不想 自 己写, 我们还可以使 用 一些现有的库来制作 : http://daneden.me/animate/ Transiton 过渡动画的集合,animate.css 可以直接引 用到你的项 目中 ; JQUERY TRANSIT HTTP://RICOSTACRUZ.COM/JQUERY.TRANSIT/ MOVE.JS HTTP://VISIONMEDIA.GITHUB.COM/MOVE.JS/ HTTP://JSANIM.COM/ 一个动画库, 只有 25KB, 非常强 大 ;
手机端实践 在做 手机 QQ 网购 APP 的时候, 我们发现在相同配置下安卓 4.X 以下版本系统 自带的浏览器或者第三 方浏览器使 用2D 变换改变 top,left 的 方式 比 用3D TransformXY 的速度慢了很多倍, 或者是完全 无法运 行, 在 4.x 版本表现 比较良好 ; 同样系统不同配置时, 高配要 比低配表现好不少 ; 3D TransformXY 可以调 用 手机的 GPU 资源, 也就是可以硬件加速, 但是代价就是加速耗电 ; IOS 没有这些问题 ;
性能 CSS 2D 矩阵动画效率 高于 JS 利 用 margin 和 left,top 模拟 的矩阵动画 ; CSS3 其它常规动画属性的效率低于 JS 模拟的动画 ; 过度使 用 infinite 导致帧数明显下降, 且 webkit 下明显 比 firfox 下更卡 ;
总结 优点 简单, 无需其他 支持 ; 简单动画可以直接在 CSS 中实现, 无需 JS 可以 支持 3D 效果变换 ; 可以通过优化硬件来优化动画 ; 无线端 支持 非常好 ; 缺点 需要书写 大量前缀来兼容浏览器 ; IE10 以下 支持 非常少 ; 市 面上 目前制作调试 工具较少, 只能靠 自 己测试 ;
在 IOS 上表现 非常好,andriod 平台与硬件配置有很 大关系, 如果不考虑能耗问题, 硬件加速效果很好 ; 一些 CSS 自有属性的改变建议使 用JS 来控制 ; Infinite 属性勿滥 用, 会导致 网 页帧数显著降低 ; 可以通过 一些 工具来制作, 减少代码成本 ;
CSS3 使 用的 一些注意事项 Transform 中的顺序问题 : perspective 必须在最前 面 rotatex 与 rotate 的顺序对效果有影响 详细内容请关注 Alloy 团队 blog http://www.alloyteam.com/
纯 JAVASCRIPT 动画 利 用 setinterval 在循环中修改属性 优点 : 兼容性最强 ( 和 HTML5 没关系 ) 有许多成熟框架, 比如 jquery 缺点 : 性能最差 2D 效果好,3D 效果 一般
JAVASCRIPT 动画的 一些注意点 JavaScript 与 UI 共享浏览器线程 关于 15 毫秒与 33 毫秒 重绘 (redraw) 与重排 (reflow) 一次性对多个属性赋值, 避免在 IE 下闪烁 如 : node.csstext = "heigth:100px;width:100px;top: 100px"; 将动画元素使 用绝对定位, 提出 页 面布局流之外
CANVAS 保留模式 Retain Model VS 即时模式 Immediate Model 浏览器只显 示唯 一的对象 (canvas 本 身 ) 开发者 自 行维护逻辑显 示对象 Logical Display Object 需要 自 己处理 鼠标和键盘事件 需要 自 己开发控件, 也可以与已有控件交互 与 Video,Audio 的结合 非常灵活 可以 支持 2D,3D
CANVAS 应 用 DEMO 一个简单的 Demo 与视频结合与 音频结合并添加 自定义控件
3 种动画的 比较 JavaScript 方式兼容性最好 CSS3 方式的动画编码简单, 可以实现 3D 等效果, 适合在 网 页上想简单的效果动画 Canvas 最灵活,IE9,FF,Chrome 都 支持 支持 3D, 物理引擎, 碰撞检测 游戏的 首选
3 种动画模式性能对 比 CPU 1000 CPU 5000 内存 10 内存 5000 Runtime 10 Runtime 5000 JS 20 25 1.04M 1.31M 3.2% 7.36% transition 25 25 1.07M 1.39M 0.0% 1.93% Canvas 15 25 1.05M 1.28M 7.7% 97% 多动画时 Canvas 比 JS 流畅, 但速度都会变慢 Transition 的速度不变, 但是丢帧, 卡
CPU 占 用率对 比 Transition 的 用户代码占 用率低 JS 循环的 用户代码占 用率 高 但是, 其实 CPU 占 用率类似
动画与声 音交互 动画如何与声 音相配合 AudioElement 如何管理动态声 音 重复播放声 音需要多少对象? 声 音需要加载 几次? 浏览器最多 支持多少个声 音对象? Demo
动画框架 JXAnimate https://github.com/alloyteam/ JXAnimate 可以调 用现有的 CSS3 动画库 JS 创建 CSS3 动画多 米诺效果 支持声 音
WEBGL WebGL 是 一套 JavaScript API, 允许开发者在浏览器中直接嵌 入 支持硬件加速的互动 3D 图形 需要 最新的 Chrome FireBox Safari 以及 支持 3D 加速的显卡 DirectX 运 行库检测是否 支持 WebGL http://analyticalgraphicsinc.github.com/ webglreport/
WEBGL 的框架 Oak3D 流程清晰 简单易 用 性能 高效 http://www.oak3d.com/magiccube/ Three.js 封装了 WebGL 的底层接 口 http://mrdoob.github.com/three.js/ Demo
WEBGL 教程 & DEMO 中 文教程 http://www.hiwebgl.com/?p=42 https://developer.mozilla.org/en-us/docs/ WebGL/Getting_started_with_WebGL http://www.mhtml5.com/resources/webgl 学习教程 3( 翻译 自 :httplearningwebgl-com)