当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jquery的动画插件制作

jquery的动画插件制作

2017年12月21日  | 移动技术网IT编程  | 我要评论
扩展$.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;       
   }
}

各种动画曲线

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网