首页 > 代码库 > jquery动画,基础以及我发现的新大陆

jquery动画,基础以及我发现的新大陆

$.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展!

一、$.animate( properties [, duration ] [, easing ] [, complete ] )

参数介绍([]包裹的参数可省略)

  • properties

      类型: PlainObject

      一个CSS属性和值的对象,动画将根据这组对象移动。

  • duration (默认: 400)

      类型: Numberor String

      一个字符串或者数字决定动画将运行多久。(注:默认值: "normal", 三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如:1000) )

  • easing (默认: swing)

      类型: String

      一个字符串,表示过渡使用哪种缓动函数。(注:jQuery自身提供"linear" 和 "swing")。

      这个速度函数可以自定义,后面有介绍。

  • complete

      类型: Function()

      在动画完成时执行的函数。

举2个例子吧!

示例代码:

$(".btn2").click(function(){        $("#btn2").animate({height:"300px"},2000,‘swing‘,function(){alert(‘hello world‘)});    });

示例代码:

$(".btn1").click(function(){     $("#btn1").animate({height:"300px"});});
  以上2种效果为方式一的动画效果,也是常用的jquery动画。

二、$.animate( properties, options )

参数介绍:
  • properties

    类型: PlainObject

    一个CSS属性和值的对象,动画将根据这组对象移动。

  • options
    类型: PlainObject
    一组包含动画选项的值的集合。 支持的选项:
    • duration (default: 400)

      Type: Numberor String

      一个字符串或者数字决定动画将运行多久。(愚人码头注:默认值: "normal", 三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如:1000) )

    • easing (default: swing)

      Type: String

      一个字符串,表示过渡使用哪种缓动函数。(愚人码头注:jQuery自身提供"linear" 和 "swing",其他效果可以使用jQuery Easing Plugin插件)

    • queue (default: true)

      Type: Boolean or String

      一个布尔值,指示是否将动画放置在效果队列中。如果为false时,将立即开始动画。 从jQuery1.7开始,队列选项也可以接受一个字符串,在这种情况下,在动画被添加到由该字符串表示的队列中。当一个自定义的队列名称被使用,动画不会自动启动;你必须调用.dequeue("queuename")来启动它。

    • specialEasing

      Type: PlainObject

      由此方法的第一个参数properties定义的一个或多个CSS属性,及其相应的缓动函数组成的键值对map。( 1.4 新增)

    • step

      Type: Function( Number now, Tween tween )

      每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。

    • progress

      Type: Function( Promiseanimation, Numberprogress, NumberremainingMs )

      每一步动画完成后调用的一个函数,无论动画属性有多少,每个动画元素都执行单独的函数。 (version added: 1.8)

    • complete

      Type: Function()

      在动画完成时执行的函数。

    • done

      Type: Function( Promiseanimation, BooleanjumpedToEnd )

      在动画完成时执行的函数。 (他的Promise对象状态已完成). (version added: 1.8)

    • fail

      Type: Function( Promiseanimation, BooleanjumpedToEnd )

      动画失败完成时执行的函数。(他的Promise对象状态未完成)。 (version added: 1.8)

    • always

      Type: Function( Promise animation, Boolean jumpedToEnd )

      在动画完成或未完成情况下停止时执行的函数。(他的Promise对象状态已完成或未完成)。 (version added: 1.8)

这里有2个参数的应用要单独说明一下:

Step Function

第二个版本的.animate()提供了一个step选项- 每步动画执行后调用的回调函数。启用自定义动画类型或改变正在执行的动画,此功能是非常有用。它接受两个参数(nowfx),this是当前正在执行动画的DOM元素集合。

  • now: 每一步动画属性的数字值
  • fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如elem 表示前正在执行动画的元素,startend分别为动画属性的第一个和最后一个的值,prop为进行中的动画属性。

Easing(缓动)

.animate()还有一个参数是一个字符串命名的使用缓动函数。一个缓动函数指定用于动画进行中在不同点位的速度。 在jQuery库中是默认的时调用 swing。在一个恒定的速度进行动画,请调用 linear. 更多的缓动函数要使用的插件,或者自定义。

直接上代码:

$(‘#clickme‘).click(function() {        $(‘#test‘).animate({            width: ‘toggle‘,            height: ‘toggle‘        }, {            duration: 5000,            specialEasing: {                width: ‘linear‘,                height: ‘swing‘            },            complete: function() {                $(this).after(‘<div>Animation complete.</div>‘);            }        });    });

 现在新大陆来了!

jQuery.easing = {        linear: function( p ) {            return p;        },        swing: function( p ) {            return 0.5 - Math.cos( p * Math.PI ) / 2;        }    };

  这是jquery里animate的Easing源码!如果你觉得就linear和swing不能满足你的要求了,咋们可以扩展一些速度函数。

jQuery.extend(jQuery.easing, {        easeOutBounce: function (x, t, b, c, d) {            console.log(x);//0-1            console.log(t);//0-2500            console.log(b);//0            console.log(c);//1            console.log(d);//2500//            return t/1000;            if ((t /= d) < (1 / 2.75)) {                return c * (7.5625 * t * t) + b;            } else if (t < (2 / 2.75)) {                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;            } else if (t < (2.5 / 2.75)) {                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;            } else {                return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;            }        },easeOutCubic: function (x, t, b, c, d) {            return c * ((t = t / d - 1) * t * t + 1) + b;//            return x;        }    })

  现在Easing的值就多了2个选择:easeOutBounce和easeOutCubic。(不要问我这算法的问题,呵呵,我也是百度的!)

来,上代码试试看看咯!

$(‘.new‘).click(function() {        var ele = $("#new");        ele.css({ "left": "0", "top": "0", "transform": "rotateZ(0deg)" });        $({ left: 0, top: 0, tran: 0 }).animate({            left: 800, top: 180, tran:360        }, {            duration: 2500,            specialEasing: {                left: ‘easeOutCubic‘,                top: ‘easeOutBounce‘            },            step: function () {                console.log(this.left);                ele.css({ "left": this.left + "px", "top": this.top + "px", "transform": "rotateZ(" + this.tran + "deg)" });            },            complete: function () {                console.log(this.left);                ele.css({ "left": "800px", "top": "180px", "transform": "rotateZ(360deg)" });            }        });    });

  这种写法真是第一次见,就忍不住自己试了试,感觉还可以,就想写出来分享给大家!  

其实就是自定义了一个动画速度函数!

我把本地的测试效果都移除了,还是把完整代码附给大家试试吧!

<!doctype html><html><head>    <meta charset="utf-8">    <title>nick jq animate</title></head><body ><button class="reset">重置样式</button><div id="btn1" class="nick" style="background-color:aqua;"><button class="btn1">btn1</button></div><div id="btn2" class="nick" style="background-color:#eee;"><button class="btn2">btn2</button></div><div id="test" class="nick"><button id="clickme">clickme</button><button class="btn2">btn2</button></div><div id="new" class="nick" style="width:200px;height:100px;background-color:cadetblue;position:absolute;"><button class="new">clickme</button></div><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script><script>    $(".btn1").click(function(){        $("#btn1").animate({height:"300px"});    });    $(".btn2").click(function(){        $("#btn2").animate({height:"300px"},2000,‘swing‘,function(){alert(‘hello world‘)});    });    $(‘#clickme‘).click(function() {        $(‘#test‘).animate({            width: ‘toggle‘,            height: ‘toggle‘        }, {            duration: 3000,            specialEasing: {                width: ‘linear‘,                height: ‘swing‘            },            complete: function() {                $(this).after(‘<div>Animation complete.</div>‘);            }        });    });    $(‘.new‘).click(function() {        var ele = $("#new").stop(true, false);        ele.css({ "left": "0", "top": "0", "transform": "rotateZ(0deg)" });        $({ left: 0, top: 0, tran: 0 }).animate({            left: 800, top: 180, tran:360        }, {            duration: 2500,            specialEasing: {                left: ‘easeOutCubic‘,                top: ‘easeOutBounce‘            },            step: function () {                console.log(this.left);                ele.css({ "left": this.left + "px", "top": this.top + "px", "transform": "rotateZ(" + this.tran + "deg)" });            },            complete: function () {                console.log(this.left);                ele.css({ "left": "800px", "top": "180px", "transform": "rotateZ(360deg)" });            }        });    });    jQuery.extend(jQuery.easing, {        easeOutBounce: function (x, t, b, c, d) {            console.log(x);//0-1            console.log(t);//0-2500            console.log(b);//0            console.log(c);//1            console.log(d);//2500//            return t/1000;            if ((t /= d) < (1 / 2.75)) {                return c * (7.5625 * t * t) + b;            } else if (t < (2 / 2.75)) {                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;            } else if (t < (2.5 / 2.75)) {                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;            } else {                return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;            }        },easeOutCubic: function (x, t, b, c, d) {            return c * ((t = t / d - 1) * t * t + 1) + b;//            return x;        }    })    $(‘.reset‘).click(function(){        $(".nick").css({ height:"" });    });</script></body></html>

个人能力有限,只能写到这里了,希望对大家有所帮助,还望大家多多评论,指教!

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script><script type="text/javascript">// Animation complete.
‘); } }); }); $(‘.new‘).click(function() { var ele = $("#new"); ele.css({ "left": "0", "top": "0", "transform": "rotateZ(0deg)" }); $({ left: 0, top: 0, tran: 0 }).animate({ left: 800, top: 180, tran:360 }, { duration: 2500, specialEasing: { left: ‘easeOutCubic‘, top: ‘easeOutBounce‘ }, step: function () { console.log(this.left); ele.css({ "left": this.left + "px", "top": this.top + "px", "transform": "rotateZ(" + this.tran + "deg)" }); }, complete: function () { console.log(this.left); ele.css({ "left": "800px", "top": "180px", "transform": "rotateZ(360deg)" }); } }); }); jQuery.extend(jQuery.easing, { easeOutBounce: function (x, t, b, c, d) { console.log(x);//0-1 console.log(t);//0-2500 console.log(b);//0 console.log(c);//1 console.log(d);//2500// return t/1000; if ((t /= d) < (1 / 2.75)) { return c * (7.5625 * t * t) + b; } else if (t < (2 / 2.75)) { return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b; } else if (t < (2.5 / 2.75)) { return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b; } else { return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b; } },easeOutCubic: function (x, t, b, c, d) { return c * ((t = t / d - 1) * t * t + 1) + b;// return x; } }) $(‘.reset‘).click(function(){ $(".nick").css({ height:"" }); });// ]]></script>

jquery动画,基础以及我发现的新大陆