iQuery实现CSS3 transition动画接口

2010-8-24

给iquery加了跟jquery差不多的动画接口animate,不过实现上是通过CSS3的transition。

效果点这里 (桌面浏览器只支持webkit内核,如chrome/safari)

iQuery源码

原理

研究了下CSS3的动画Transition,我想如果iphone上要做动画效果的话应该由CSS3实现,不再是传统用js间隔一定时间不断更改数值这样的方式,系统内置的动画实现方式毫无疑性能会高。

CSS3有两个实现动画的方式,Transitions和Animations,Animations自定义程度比较高,但理解起来和用起来会有点别扭,实际上普通动画效果只需要用Transitions就行了,Transitions很好理解:

给元素定义需要渐变转换的属性-webkit-transition-property,和持续时间-webkit-transition-duration

#elem { -webkit-transition-property: width;  -webkit-transition-duration: 1s;  }
接着设置这个元素的width
elem.style.width = “100px”
这个元素就会从原先的宽度逐渐变到100px,持续时间为1s。

简单地说就是告诉它你哪个属性要渐变,持续多长时间,然后你下次改变这个属性时它就会做出动画。

还有一个参数-webkit-transition-timing-function(真够长的),可以设定动画的缓动,已定义的有”ease linear ease-in ease-out ease-in-out”,除了这些还可以传一个cubic-bezier函数自定义缓动:cubic-bezier(x1, y1, x2, y2)。

有了这些就可以考虑用js控制它,给iquery加上jquery那样的动画接口。

几个问题

看到john resig 08年的一篇文章:http://ejohn.org/blog/css-animations-and-javascript 原来有人早就想做这方面的工作了,不过john resig给出了几个不做的理由:

  1. 不能停止动画
  2. 没法做出每一步动画的回调(jquery里的onstep)
  3. 没办法同步各个动画
  4. 没办法自定义缓动函数

对于问题1,transition动画过程中通过elem.style获得的会是最终值,而通过getComputedStyle获得的是运动过程中的值,这样就可以实现stop了,只要getComputedStyle把当前值拿出来再赋一次,再取消transition,就成了。

对于问题4,可以通过传入cubic-bezier曲线实现自定义缓动,这个没具体研究,有什么限制就不知道了~

问题3我没看出他的意思,现在各个动画是可以同步执行的。问题2目前就没办法了,不知现实中用到onstep的机会多不多?

目前这个动画接口桌面浏览器只支持webkit内核的,其实加几行代码就可以支持firefox和opera的,不过iQuery是针对iOS和Android的,就不加了。iQuery没有经过大量测试,现在应该还是不靠谱,找时间用它做一个像样的应用,边做边找里面的bug~

评论

*

*

2010年11月7日 21:40

jquery出了jquerymobile,不知您你用过没有?iquery会怎么发展?

2010年11月8日 9:52

@droidwolf jquerymobile是基于原来的jquery再加上针对mobile的东西,跟iquery不一样,不过iquery现在也谈不上发展,停滞中~