jQuery Animation实现CSS3动画示例介绍 |
|
jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态 。CSS属性值是逐渐改变的，这样就可以创建动画效果 。只有数字值可创建动画（比如 "margin:30px"） 。字符串值无法创建动画（比如 "background-color:red"） 。详细用法请参考jQuery 效果 - animate()方法和官方教程 。 像CSS3好多效果因为不是数值的，所以是没有办法直接通过animate()方法实现的 。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法，这些方法的一个特点就是它们的值是字符和数字混合在一起的 。因此我们是不可以直接用animate()方法来动态地修改它们的值来实现动画的效果 。 如果我们自己用JavaScript实现CSS3动画，那么我们只能自已通过setInterval()方法来实现，实现起来比较复杂 。其实animate()方法就是基于setInterval()方法进行工作的，但是可以用方便的设置动画速度，还可以设置是匀速还是变速 。animate()方法的第二种用法有个step参数规定动画的每一步要执行的函数 。我们可以用使用一个不影响元素效果显著的CSS值来触发animate()方法，然后在step回调函数中修改我们想要修改的值，这样就可以间接地实现动画了 。请看transform例子: 复制代码 代码如下: <div id="box"></div> #box { width:100px; height:100px; position:absolute; top:100px; left:100px; text-indent: 90px; background-color:red; } $(#box).animate({ textIndent: 0 }, { step: function(now,fx) { $(this).css(-webkit-transform,rotate(+now+deg)); }, duration:slow },linear); 这里使用text-indent属性来触发动画，是因为我们这里没有文字，所以使用text-indent而不会影响到元素的样式效果，这里也可以用font-size等 。然后使用animate()方法产生的节奏来实现动画 。以此类推，我们就可以实现很多效果了 。具体例子请参考这里 参考文档 •jQuery 效果 - animate() 方法 •.animate() |
