欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery的动画插件制作

程序员文章站 2022-07-02 17:59:43
扩展$.animate 当前jquery提供了animate({key:value})形式的动画,但这个函数只能用于简单的“数字+单位”(10px)。像样...
扩展$.animate

当前jquery提供了animate({key:value})形式的动画,但这个函数只能用于简单的“数字+单位”(10px)。像样式background-position:10% 10%,transform都不支持。所以我们要写入自己的动画插件来扩展它。

1.以扩展background-position为例 ,首先我们要在$.Tween.propHooks插入对应的属性:

 (function($){
    $.Tween.propHooks['backgroundPosition']={
        set:function(tween){


      }
   };

}(jQuery));

2.$.Tween.propHooks['backgroundPosition']里面包含两个函数,set和get函数,我们的动画每次调用时都不断的循环set函数来更新样式的值:

 (function($){
    $.Tween.propHooks['backgroundPosition']={
        set:function(tween){   
            //保证初始化设置一次初始,末尾属性值    
            if(!tween.set){
                initBackgroundPosition(tween);
            }
            //设置样式:
            //公式:pos*(end-start)+start
            //pos为一个在0~1的时间相关的比值
            $(tween.elem).css('background-position',
            (tween.pos*(tween.end[0][1]-tween.start[0][1])+tween.start[0][1]*1)+tween.end[0][2]
            +' '+
            (tween.pos*(tween.end[1][1]-tween.start[1][1])+tween.start[1][1]*1)+tween.end[1][2]);

        }
   };





    /*用来初始化样式属性的开始值与末尾值
    设置解析后的tween.end,tween.start
    */
    function initBackgroundPosition(tween){
        tween.start=parseBackgroundPosition($(tween.elem).css("background-position"));
        tween.end=parseBackgroundPosition(tween.end);
        for(var i=0;i
扩张缓动动画

缓动: 一个属性的变化速度是随着时间变化的,它是非线性的。

一个缓动被实现为一个函数,它返回一个给定时间的属性值。为了迎合用户自定义动画的时长和属性范围的需求,这个函数被标准化为接收一个介于0.0-1.0之间的时间,并且产生的返回值也介于0.0-1.0之间。
例如下面的swing缓动函数:

jQuery.easing={
     /*新版本
      *@param  p:到1的一个很时间成正比的数
      *@return    一个和曲线y轴成正比的0-1之间的书
      */
    swing:function(p){
        return 0.5-Math.cos(p*Math.PI)/2;       
   }
   //旧版本

    /*
     * t: current time(当前时间)
     * b: beginning value(初始值,默认为0)
     * c: change in value(变化量,默认为1)
     * d: duration(持续时间)
    */

    swing:function(p,t,b,c,d){

        return c*(0.5-Math.cos(t/d*Math.PI)/2)*b;       
   }
}

jquery的动画插件制作