个人介绍任旻 (minren) 腾讯高级工程师 QQ 互联开放平台新浪微博腾讯微博

Size: px

Start display at page:

Download "个人介绍任旻 (minren) 腾讯高级工程师 QQ 互联开放平台新浪微博腾讯微博"

巍香
7 years ago
Views:

2 个人介绍任旻 (minren) 腾讯高级工程师 QQ 互联开放平台新浪微博腾讯微博

3 动画并不神秘什么是动画对象属性随时间变化

4 HTML5 实现动画的方式按照改变属性的方式可以分为三种方式 : CCS3 JavaScript Canvas

5 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 则可以通过设定多个关键帧实现相对复杂的动画

6 为什么选择 CSS3 动画? 不需要其他任何语言或者插件的支持 ; 相对 Flash 来说对无线端的支持非常好, 但是却能实现很多 Flash 的动画效果 ; 可以用更少的代码量来实现用JS 需要写很多倍的效果 ; 让浏览器来负责生成动画, 所以类似 GPU 加速这样的优化对 CSS3 也是有效果的 ;

7 项目实践拍拍 3 月彩钻节

8 拍拍 5 月促销活动

9 手机 QQ 网购

10 ECD 前端实验室

11 主要细节 CSS3 关键帧动画 ; 利用 animation-delay 这个属性来达到不同元素动画之间的衔接来达到整体的动画效果

12 各种 transform 2D 变换 rotate: scale: skew: matrix: Skew(X,Y) X 正数是向 X 轴负方向扭曲,Y 正数是向 Y 轴负方向扭曲 ; IE 下 matrix 滤镜可以实现在其他高级浏览器相同的效果 ; CSS3 动画提供了几种动画过度的方式 :

13 3D 变换将正方体的每个面用 3D 变换定位好, 然后在父层上应用 3D 动画, 达到旋转的正方体的效果 ;

14 一些示例一个用CSS3 动画实现的超棒战争动画 ; promote/2012/index_236.shtml CSS3 幻灯片 CSS3 3D 变换 CSS3 菜单, 太阳系, 进度条

15 你可以在这里找到目前所有的动画效果 ; JS+CSS3 3d 盒子 CSS3 幻灯片

16 CSS3 与 JS webkit 内核的浏览器提供了很多 CSS3 的事件接口, 开发者可以很方便的使用这些事件 ; 例如在 safari 的文档中, 你可以在 webkit 中直接调用它的 CSS3 方法 : Firfox

split(' '), prop; for(var i = 0, l = props.length; i < l; i++) { if(typeof el.

17 由于每个浏览器都带自己的前缀, 所以在控制的时候需要将他们的前缀都提取出来 : 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]

18 在支持 CSS3 动画的浏览器中存在一个 WebKitCSSKeyframesRule 构造器, 可以用来改变 keyframe:

19 然后这个时候可以通过 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); } }" 修改后的属性 :

20 当然如果你不想自己写, 我们还可以使用一些现有的库来制作 : Transiton 过渡动画的集合,animate.css 可以直接引用到你的项目中 ; JQUERY TRANSIT MOVE.JS 一个动画库, 只有 25KB, 非常强大 ;

21 手机端实践在做手机 QQ 网购 APP 的时候, 我们发现在相同配置下安卓 4.X 以下版本系统自带的浏览器或者第三方浏览器使用2D 变换改变 top,left 的方式比用3D TransformXY 的速度慢了很多倍, 或者是完全无法运行, 在 4.x 版本表现比较良好 ; 同样系统不同配置时, 高配要比低配表现好不少 ; 3D TransformXY 可以调用手机的 GPU 资源, 也就是可以硬件加速, 但是代价就是加速耗电 ; IOS 没有这些问题 ;

22 性能 CSS 2D 矩阵动画效率高于 JS 利用 margin 和 left,top 模拟的矩阵动画 ; CSS3 其它常规动画属性的效率低于 JS 模拟的动画 ; 过度使用 infinite 导致帧数明显下降, 且 webkit 下明显比 firfox 下更卡 ;

23 总结优点简单, 无需其他支持 ; 简单动画可以直接在 CSS 中实现, 无需 JS 可以支持 3D 效果变换 ; 可以通过优化硬件来优化动画 ; 无线端支持非常好 ; 缺点需要书写大量前缀来兼容浏览器 ; IE10 以下支持非常少 ; 市面上目前制作调试工具较少, 只能靠自己测试 ;

24 在 IOS 上表现非常好,andriod 平台与硬件配置有很大关系, 如果不考虑能耗问题, 硬件加速效果很好 ; 一些 CSS 自有属性的改变建议使用JS 来控制 ; Infinite 属性勿滥用, 会导致网页帧数显著降低 ; 可以通过一些工具来制作, 减少代码成本 ;

25 CSS3 使用的一些注意事项 Transform 中的顺序问题 : perspective 必须在最前面 rotatex 与 rotate 的顺序对效果有影响详细内容请关注 Alloy 团队 blog

26 纯 JAVASCRIPT 动画利用 setinterval 在循环中修改属性优点 : 兼容性最强 ( 和 HTML5 没关系 ) 有许多成熟框架, 比如 jquery 缺点 : 性能最差 2D 效果好,3D 效果一般

27 JAVASCRIPT 动画的一些注意点 JavaScript 与 UI 共享浏览器线程关于 15 毫秒与 33 毫秒重绘 (redraw) 与重排 (reflow) 一次性对多个属性赋值, 避免在 IE 下闪烁如 : node.csstext = "heigth:100px;width:100px;top: 100px"; 将动画元素使用绝对定位, 提出页面布局流之外

28 CANVAS 保留模式 Retain Model VS 即时模式 Immediate Model 浏览器只显示唯一的对象 (canvas 本身 ) 开发者自行维护逻辑显示对象 Logical Display Object 需要自己处理鼠标和键盘事件需要自己开发控件, 也可以与已有控件交互与 Video,Audio 的结合非常灵活可以支持 2D,3D

29 CANVAS 应用 DEMO 一个简单的 Demo 与视频结合与音频结合并添加自定义控件

30 3 种动画的比较 JavaScript 方式兼容性最好 CSS3 方式的动画编码简单, 可以实现 3D 等效果, 适合在网页上想简单的效果动画 Canvas 最灵活,IE9,FF,Chrome 都支持支持 3D, 物理引擎, 碰撞检测游戏的首选

31 3 种动画模式性能对比 CPU 1000 CPU 5000 内存 10 内存 5000 Runtime 10 Runtime 5000 JS M 1.31M 3.2% 7.36% transition M 1.39M 0.0% 1.93% Canvas M 1.28M 7.7% 97% 多动画时 Canvas 比 JS 流畅, 但速度都会变慢 Transition 的速度不变, 但是丢帧, 卡

32 CPU 占用率对比 Transition 的用户代码占用率低 JS 循环的用户代码占用率高但是, 其实 CPU 占用率类似

33 动画与声音交互动画如何与声音相配合 AudioElement 如何管理动态声音重复播放声音需要多少对象? 声音需要加载几次? 浏览器最多支持多少个声音对象? Demo

34 动画框架 JXAnimate JXAnimate 可以调用现有的 CSS3 动画库 JS 创建 CSS3 动画多米诺效果支持声音

35 WEBGL WebGL 是一套 JavaScript API, 允许开发者在浏览器中直接嵌入支持硬件加速的互动 3D 图形需要最新的 Chrome FireBox Safari 以及支持 3D 加速的显卡 DirectX 运行库检测是否支持 WebGL webglreport/

36 WEBGL 的框架 Oak3D 流程清晰简单易用性能高效 Three.js 封装了 WebGL 的底层接口 Demo

37 WEBGL 教程 & DEMO 中文教程 WebGL/Getting_started_with_WebGL 学习教程 3( 翻译自 :httplearningwebgl-com)

chapter 2 HTML5 目錄iii HTML HTML HTML HTML HTML canvas

chapter 2 HTML5 目錄iii HTML HTML HTML HTML HTML canvas Contents 目錄 chapter 1 1-1... 1-2 1-2... 1-3 HTML5... 1-3... 1-5 1-3... 1-9 Web Storage... 1-9... 1-10 1-4 HTML5... 1-14... 1-14... 1-15 HTML5... 1-15... 1-15... 1-16 1-5... 1-18 Apps... 1-18 HTML5 Cache

个 人介绍 任旻 (minren) 腾讯 高级 工程师 QQ 互联开放平台 新浪微博 腾讯微博

个人介绍任旻 (minren) 腾讯高级工程师 QQ 互联开放平台新浪微博腾讯微博