jQuery Easing 动画效果扩展

在CSS3过渡效果(Transition)学习中,我们知道了过渡效果涉及到一个叫 贝塞尔曲线(cubic-bezier曲线) 的东西。

transition-timing-function:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) ]*
CSS3缓冲过渡效果语法

除了 ease(逐渐变慢)linear(匀速)ease-in(加速)ease-out(减速)ease-in-out(加速然后减速)外最后还有一个利用 贝塞尔曲线(cubic-bezier曲线)自定义缓冲效果。可以说利用CSS3可以做任何动画效果,CSS3确实 很强大。很多 js 库里也有动画的缓冲效果,但是没有CSS3中可以自己定义 贝塞尔曲线(cubic-bezier曲线)来自定义缓冲效果的。贝塞尔的计算方法贝塞尔曲线是个很复杂的数学模型,对于我们这些学过一点点甚至没有学过线性代数的人来说,他的原理实在是太深奥了,所以自己封装一个一些常用的缓冲效果来解决动画效果是很有必要的。

jqurey中的动画缓冲扩展

在jQuery中,我们知道自定义动画函数.animate()有四个参数:

params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合
duration (String,Number) : (可选) 三种预定速度之一的字符串(”slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”.
callback (Function) : (可选) 在动画完成时执行的函数
jQuery中.animate()的四个参数

从上我们看出jqurey中只为 easing 预定义linear(线性)和 swing(摇摆)两个参数,然后我们就可以利用jq自己的 扩展方法 jQuery.extend 来扩展easing。想要哪个就加哪个:

jQuery.easing['jswing'] = jQuery.easing['swing'];
    jQuery.extend( jQuery.easing,
    {
        swing: function (x, t, b, c, d) {
        return jQuery.easing[jQuery.easing.def](x, t, b, c, d);//jQuery默认的easing,
    },
    //其他效果可以参考下面的DEMO自己选择增加,按照 缓冲名/值增加自己想要的效果。
    easeInQuad: function (x, t, b, c, d) {
        return c*(t/=d)*t + b;
    },
}

DEMO

点击看效果

给jqurey给 animate 增加效果

本文源链接:http://www.html5jscss.com/jquery-extend-easing.html

转载请注明《jQuery Easing 动画效果扩展》| html5jscss

评论关闭了.