Upgrade to Pro — share decks privately, control downloads, hide ads and more …

让网页“抖”的更加高端

w3cplus
November 08, 2012

 让网页“抖”的更加高端

Greensock动画库的介绍

w3cplus

November 08, 2012
Tweet

More Decks by w3cplus

Other Decks in Technology

Transcript

  1. 参考资料 高 性能 javascript第 三章 该不该用? 严重的性能问题 重绘 重排 内存泄漏

    循环引用 操作dom不释放 如何选择使用的动画方式?css3动画?jquery animate? greensock! 如何判断出现问题? dynatrace sIEve chrome develop work(时间戳)
  2. 总结一下? 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实现
  3. 总结一下? 转为帧的思想来实现 移动距离c 总帧数t 当前帧数 d 初始值 b 设经过d帧后的距离是p p=b+v*d

    总共t帧,总共移动c距离,那么v=c/t即每帧移动的距离。 因此 p= b+ c/t *d 注意,单位变了!!公式没变!!
  4. 总结一下? 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实现
  5. 总结一下? 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
  6. 总结一下? 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都懂的。。
  7. 总结一下? 参考资料 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)
  8. 总结一下? 方法分析 获取可以用 var value =document.defaultView.getComputedStyle(a , ":hover") getComputedStyle第二个参数即是伪类,默认为null. 获取后得到的是一个数组,利用getPropertyValue

    或者直接数组键值对取值即可。 直接修改元素的伪类是不行的,但可以通过css样式表进行覆盖。 注意,单位变了!!公式没变!!
  9. 总结一下? 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/