让网页“抖”的更加高端

Greensock动画库的介绍

Transcript

1. 让网页“抖”的更加高端 99 前端工程师 新浪微博@宇宙一片小囧
2. 目录 tween缓动算法 greensock动画库简单介绍 现代浏览器操纵样式
3. 怎样抖的？ 抖的什么？ 如何让网页抖起来？ css3 animate transition transform javascript setInterval requestAnimationFrame jquery animate
4. 参考资料 高 性能 javascript第 三章 该不该用？ 严重的性能问题 重绘 重排 内存泄漏 循环引用 操作dom不释放 如何选择使用的动画方式？css3动画？jquery animate? greensock! 如何判断出现问题？ dynatrace sIEve chrome develop work(时间戳)
5. 怎样抖的？ 抖的什么？ 如何让网页抖起来？ css3 animate transition transform javascript setInterval requestAnimationFrame jquery animate
6. 怎样抖的？ 抖的？ 在线观察运动情况 请用chrome访问 http://1.jtyresume.sinaapp.c om/tween.html#/boxRoom 鼠标轻轻移动到方块上停止
7. 总结一下？ 定性来描述运动 匀速直线运动 linear ease in减速进入运动 http://cubic-bezier.com/#.42,0,1,1 ease out减速离开运动http://cubic-bezier.com/#0,0,.58,1 减速进入与离开运动http://cubic-bezier.com/#.42,0,.58,1 ease in and out
8. 总结一下？ 定量描述运动 移动距离 c（changeDistance） 总时间 t（time） 当前时间 d（duration） 初始值 b（beforeMove）
9. 总结一下？ Tween算法演示 请观看tween算法演示 http://1.jtyresume.sinaapp.com/tween.html#/step-7
10. 总结一下？ 尝试来推倒一下！ 移动距离c 总时间t 当前时间 d 初始值 b 设经过d时间后的距离是p p=b+v*d 而v = c / t 因此 p= b+ c/t *d linear公式ok！！！！
11. 总结一下？ var d=0,c=500,t=10,b=0; var line : function (t, c, d, b) { return c / t * d + b; } function changeStyle() { obj.style.left = line(t, c, d, b) + 'px'; d++; if (d <= t) { setTimeout(changeStyle, 1000); } } 问题：时间不是整数，怎么办？动画跑得太慢，怎么办？（最小单位是d） javascript实现
12. 总结一下？ 转为帧的思想来实现 移动距离c 总帧数t 当前帧数 d 初始值 b 设经过d帧后的距离是p p=b+v*d 总共t帧，总共移动c距离，那么v=c/t即每帧移动的距离。 因此 p= b+ c/t *d 注意，单位变了！！公式没变！！
13. 总结一下？ var d=0,c=500,t=40,b=0; var line : function (t, c, d, b) { return c / t * d + b; } function changeStyle() { obj.style.left = line(t, c, d, b) + 'px'; d++; if (d <= t) { setTimeout(changeStyle, 1000/t); } } 问题:你扯了这么多蛋，我了解tween算法有什么用？ javascript实现
14. 总结一下？ Tween算法应用 flash动画 tween类 几乎所有的动画库均支持tween算法缓动,很多甚至就是tween算法实现的 jquery animate http://www.blueidea.com/tech/web/2009/6367.asp css3 transition属性 支持贝塞尔曲线描述的缓动 -webkit-transition-timing-function: ease-out ,cubic-bezier(.62,-3,.11,3) http://www.adobe.com/cn/devnet/html5/articles/using-css3-transitions-a-comprehensive-guide.html
15. 总结一下？ javascript 操纵 css3
16. 总结一下？ function getStyle(obj, attr) { return parseFloat(obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]) } 参考资料 http://www.zhangxinxu.com/wordpress/2012/05/get computedstyle-js-getpropertyvalue-currentstyle/ 写过javascript都懂的。。
17. 总结一下？ 参考资料 https://developer.mozilla.org/en- US/docs/DOM/window.getComputedStyle css3 操纵样式工具 window.getComputedStyle Feature Chro me Firefox (Gecko) Internet Explorer Opera Safa ri Basic support (Yes) (Yes) 9 (Yes) (Yes) pseudo-element support (Yes) (Yes) Not supported (ticket) Not supported (Yes)
18. 总结一下？ 方法分析 获取可以用 var value =document.defaultView.getComputedStyle(a , ":hover") getComputedStyle第二个参数即是伪类，默认为null. 获取后得到的是一个数组，利用getPropertyValue 或者直接数组键值对取值即可。 直接修改元素的伪类是不行的，但可以通过css样式表进行覆盖。 注意，单位变了！！公式没变！！
19. 总结一下？ 实战
20. 总结一下？ 实战
21. 总结一下？ 实战 请参考http://99jty.com/?p=871
22. 总结一下？ 操纵animation 利用.class配合keyframe 插入样式表 http://www.alloyteam.com/2012/10/js-dynamic- management-of-css/ 需要执行2次insertCSS函数，第一次插入
23. 总结一下？ 操纵transform 这是神马？吓尿了。。。
24. 总结一下？ 一切皆矩阵 其中a,b,c,d,e,f为matrix滤镜的6个参数。xy为物体 的原始坐标。 计算后的 ax+cy+e为变换后x坐标，bx+dy+f为变 换后y坐标
25. 总结一下？ 一切皆矩阵
26. 总结一下？ IE也有爱 /* IE8+ - must be on one line, unfortunately */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')"; /* IE6 and 7 */ filter: progid:DXImageTransform.Microsoft.Matrix( M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand'); http://www.cnblogs.com/rubylouvre/archive/2012/01/21/2180109.html 可以把css3的transform转成滤镜的小工具 http://www.useragentman.com/IETransformsTranslator/
27. 想学么？ greensock 地球上最牛逼的动画库 上手飞快 性能很好 功能超强 兼容ie6+ 无缝接入jq http://www.greensock.com/v12 http://api.greensock.com/js/
28. 总结一下？ greensock目录结构 包括tweenmax,tweenlite两个主类库，3个插件文 件，一个缓动库
29. 总结一下？ 开始制作
30. 总结一下？ 使用TweenMax.to http://1.jtyresume.sinaapp.com/greensock/css.html
31. 总结一下？ 无缝接入 Jquery http://1.jtyresume.sinaapp.com/greensock/mousepos.html
32. 总结一下？ 超好用 的批量 动画效 果 http://1.jtyresume.sinaapp.com/greensock/array.html
33. 总结一下？ 超好用 的批量 动画效 果 http://1.jtyresume.sinaapp.com/greensock/array.html
34. 总结一下？ 操纵自 定义属 性 http://1.jtyresume.sinaapp.com/greensock/valueSimple.html
35. 总结一下？ 操纵自 定义属 性 http://1.jtyresume.sinaapp.com/greensock/valueSimple.html
36. 总结一下？ 自己试 试吧！ http://1.jtyresume.sinaapp.com/greensock/valueSimple.html http://1.jtyresume.sinaapp.com/greensock/%E6%8B%96 %E6%8B%BD%E5%AD%97%E5%B9%95.html
37. 谢谢！ W3CPLUS 99 javascrip make the world beautiful @宇宙一片小囧 Q&A