当前位置:Gxlcms > JavaScript > jQuery之深入学习Animate(二)

jQuery之深入学习Animate(二)

时间:2021-07-01 10:21:17 帮助过:18人阅读

本篇文章给大家带来的内容是jQuery之深入学习Animate(二),接着之前的文章【jQuery之深入学习Animate(一)】让大家了解jQuery中animate的用法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

Step

Type: Function( Number now, Tween tween )
每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。

这个是如此的模糊,让我们看下实例吧!

var k=0;
 $( ".block:first" ).animate(
          {
            left: 100,top:200
          },
          {
            duration: 1000,
            step: function( now, fx ){
                k++;                
                if(k==1) console.log(fx);
            }
);

你能想象输出结果吗?

让我们来看下jQuery源码吧:

jQuery.fx = Tween.prototype.init;
...
function Tween( elem, options, prop, end, easing ) {
    return new Tween.prototype.init( elem, options, prop, end, easing );
}
jQuery.Tween = Tween;
Tween.prototype = {
    constructor: Tween,
    init: function( elem, options, prop, end, easing, unit ) {
        this.elem = elem;
        this.prop = prop;
        this.easing = easing || "swing";
        this.options = options;
        this.start = this.now = this.cur();
        this.end = end;
        this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" );
    },
...}

ok!你应该有个大致的轮廓了,让我详细讲解下参数的意义吧~~

fx
属性类型
easing字符串动画方式"linear",swing,easeIn,easeOut...等
elemDOM元素正在动画的元素
end数值动画结束值
now数值动画当前值
options对象参数
options.duration数值传到动画动的duration
options.queue字符串动画队列
pos数值在动画过程中从0.0到1.0
prop字符串正在变化的css属性
start数值CSS属性开始变化的值
unit字符串CSS值的单位

知道这些,我们可以做很多事!

jQuery Animation实现css3动画 :

jQuery Animation的工作原理是通过将元素的css样式从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。只有数字值可创建动画(比如 “margin:30px”)。字符串值无法创建动画(比如 “background-color:red”)。

像CSS3好多效果因为不是数值的,所以是没有办法直接通过animate()方法实现的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法,这些方法的一个特点就是它们的值是字符和数字混合在一起的。因此我们是不可以直接用animate()方法来动态地修改它们的值来实现动画的效果。

如果我们自己用Javascript实现CSS3动画,那么我们只能自已通过setInterval()方法来实现,实现起来比较复杂。其实animate()方法就是基于setInterval()方法进行工作的,但是可以用方便的设置动画速度,还可以设置是匀速还是变速。animate()方法的第二种用法有个stp参数规定动画的每一步要执行的函数。我们可以用使用一个不影响元素效果显著的CSS值来触发animate()方法,然后在step回调函数中修改我们想要修改的值,这样就可以间接地实现动画了。

CSS代码:

#box {
  width:100px;
  height:100px;
  position:absolute;
  top:100px;
  left:100px;
  text-indent: 90px;
  background-color:red;
}

Html代码:

 <p id="box"></p>

Javascript代码:

var s=0;
$('#box').animate({  textIndent: 0 }, {   //这里的now参数即前面设置的数值,即textIndent: 0中的0,然后后面还有,则以后面的数值为准。
   duration:2000,
   step: function(now,fx) {
        s++;
        fx.start=45;//你可以尝试修改start,end值,来看rotate的变化
        fx.end=0;        
        if(s==1) console.log(fx.start+"----"+fx.end+"---"+fx.startTime);
      $(this).css('-webkit-transform','rotate('+now+'deg)');
   }
});

这里使用text-indent属性来触发动画,是因为我们这里没有文字,所以使用text-indent而不会影响到元素的样式效果,这里也可以用font-size等。然后使用animate()方法产生的节奏来实现动画。

以上就是jQuery之深入学习Animate(二)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行