js缓动函数

公式一：

var Tween = {
    Linear: function(t, b, c, d) {
        return c * t / d + b;
    },
    Quad: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t + b;
        },
        easeOut: function(t, b, c, d) {
            return - c * (t /= d) * (t - 2) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t + b;
            return - c / 2 * ((--t) * (t - 2) - 1) + b;
        }
    },
    Cubic: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t + b;
        },
        easeOut: function(t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
            return c / 2 * ((t -= 2) * t * t + 2) + b;
        }
    },
    Quart: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t * t + b;
        },
        easeOut: function(t, b, c, d) {
            return - c * ((t = t / d - 1) * t * t * t - 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
            return - c / 2 * ((t -= 2) * t * t * t - 2) + b;
        }
    },
    Quint: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t * t * t + b;
        },
        easeOut: function(t, b, c, d) {
            return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
            return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
        }
    },
    Sine: {
        easeIn: function(t, b, c, d) {
            return - c * Math.cos(t / d * (Math.PI / 2)) + c + b;
        },
        easeOut: function(t, b, c, d) {
            return c * Math.sin(t / d * (Math.PI / 2)) + b;
        },
        easeInOut: function(t, b, c, d) {
            return - c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
        }
    },
    Expo: {
        easeIn: function(t, b, c, d) {
            return (t == 0) ? b: c * Math.pow(2, 10 * (t / d - 1)) + b;
        },
        easeOut: function(t, b, c, d) {
            return (t == d) ? b + c: c * ( - Math.pow(2, -10 * t / d) + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if (t == 0) return b;
            if (t == d) return b + c;
            if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
            return c / 2 * ( - Math.pow(2, -10 * --t) + 2) + b;
        }
    },
    Circ: {
        easeIn: function(t, b, c, d) {
            return - c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
        },
        easeOut: function(t, b, c, d) {
            return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return - c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
            return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
        }
    },
    Elastic: {
        easeIn: function(t, b, c, d, a, p) {
            if (t == 0) return b;
            if ((t /= d) == 1) return b + c;
            if (!p) p = d * .3;
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else var s = p / (2 * Math.PI) * Math.asin(c / a);
            return - (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        },
        easeOut: function(t, b, c, d, a, p) {
            if (t == 0) return b;
            if ((t /= d) == 1) return b + c;
            if (!p) p = d * .3;
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else var s = p / (2 * Math.PI) * Math.asin(c / a);
            return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
        },
        easeInOut: function(t, b, c, d, a, p) {
            if (t == 0) return b;
            if ((t /= d / 2) == 2) return b + c;
            if (!p) p = d * (.3 * 1.5);
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else var s = p / (2 * Math.PI) * Math.asin(c / a);
            if (t < 1) return - .5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
            return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
        }
    },
    Back: {
        easeIn: function(t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            return c * (t /= d) * t * ((s + 1) * t - s) + b;
        },
        easeOut: function(t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
        },
        easeInOut: function(t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
            return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
        }
    },
    Bounce: {
        easeIn: function(t, b, c, d) {
            return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b;
        },
        easeOut: function(t, b, c, d) {
            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;
            }
        },
        easeInOut: function(t, b, c, d) {
            if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
            else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
        }
    }
}公式二：
var tween = {
    easeInQuad: function(pos) {
        return Math.pow(pos, 2);
    },
    easeOutQuad: function(pos) {
        return - (Math.pow((pos - 1), 2) - 1);
    },
    easeInOutQuad: function(pos) {
        if ((pos /= 0.5) < 1) return 0.5 * Math.pow(pos, 2);
        return - 0.5 * ((pos -= 2) * pos - 2);
    },
    easeInCubic: function(pos) {
        return Math.pow(pos, 3);
    },
    easeOutCubic: function(pos) {
        return (Math.pow((pos - 1), 3) + 1);
    },
    easeInOutCubic: function(pos) {
        if ((pos /= 0.5) < 1) return 0.5 * Math.pow(pos, 3);
        return 0.5 * (Math.pow((pos - 2), 3) + 2);
    },
    easeInQuart: function(pos) {
        return Math.pow(pos, 4);
    },
    easeOutQuart: function(pos) {
        return - (Math.pow((pos - 1), 4) - 1)
    },
    easeInOutQuart: function(pos) {
        if ((pos /= 0.5) < 1) return 0.5 * Math.pow(pos, 4);
        return - 0.5 * ((pos -= 2) * Math.pow(pos, 3) - 2);
    },
    easeInQuint: function(pos) {
        return Math.pow(pos, 5);
    },
    easeOutQuint: function(pos) {
        return (Math.pow((pos - 1), 5) + 1);
    },
    easeInOutQuint: function(pos) {
        if ((pos /= 0.5) < 1) return 0.5 * Math.pow(pos, 5);
        return 0.5 * (Math.pow((pos - 2), 5) + 2);
    },
    easeInSine: function(pos) {
        return - Math.cos(pos * (Math.PI / 2)) + 1;
    },
    easeOutSine: function(pos) {
        return Math.sin(pos * (Math.PI / 2));
    },
    easeInOutSine: function(pos) {
        return ( - .5 * (Math.cos(Math.PI * pos) - 1));
    },
    easeInExpo: function(pos) {
        return (pos == 0) ? 0 : Math.pow(2, 10 * (pos - 1));
    },
    easeOutExpo: function(pos) {
        return (pos == 1) ? 1 : -Math.pow(2, -10 * pos) + 1;
    },
    easeInOutExpo: function(pos) {
        if (pos == 0) return 0;
        if (pos == 1) return 1;
        if ((pos /= 0.5) < 1) return 0.5 * Math.pow(2, 10 * (pos - 1));
        return 0.5 * ( - Math.pow(2, -10 * --pos) + 2);
    },
    easeInCirc: function(pos) {
        return - (Math.sqrt(1 - (pos * pos)) - 1);
    },
    easeOutCirc: function(pos) {
        return Math.sqrt(1 - Math.pow((pos - 1), 2))
    },
    easeInOutCirc: function(pos) {
        if ((pos /= 0.5) < 1) return - 0.5 * (Math.sqrt(1 - pos * pos) - 1);
        return 0.5 * (Math.sqrt(1 - (pos -= 2) * pos) + 1);
    },
    easeOutBounce: function(pos) {
        if ((pos) < (1 / 2.75)) {
            return (7.5625 * pos * pos);
        } else if (pos < (2 / 2.75)) {
            return (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);
        } else if (pos < (2.5 / 2.75)) {
            return (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
        } else {
            return (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
        }
    },
    easeInBack: function(pos) {
        var s = 1.70158;
        return (pos) * pos * ((s + 1) * pos - s);
    },
    easeOutBack: function(pos) {
        var s = 1.70158;
        return (pos = pos - 1) * pos * ((s + 1) * pos + s) + 1;
    },
    easeInOutBack: function(pos) {
        var s = 1.70158;
        if ((pos /= 0.5) < 1) return 0.5 * (pos * pos * (((s *= (1.525)) + 1) * pos - s));
        return 0.5 * ((pos -= 2) * pos * (((s *= (1.525)) + 1) * pos + s) + 2);
    },
    elastic: function(pos) {
        return - 1 * Math.pow(4, -8 * pos) * Math.sin((pos * 6 - 1) * (2 * Math.PI) / 2) + 1;
    },
    swingFromTo: function(pos) {
        var s = 1.70158;
        return ((pos /= 0.5) < 1) ? 0.5 * (pos * pos * (((s *= (1.525)) + 1) * pos - s)) : 0.5 * ((pos -= 2) * pos * (((s *= (1.525)) + 1) * pos + s) + 2);
    },
    swingFrom: function(pos) {
        var s = 1.70158;
        return pos * pos * ((s + 1) * pos - s);
    },
    swingTo: function(pos) {
        var s = 1.70158;
        return (pos -= 1) * pos * ((s + 1) * pos + s) + 1;
    },
    bounce: function(pos) {
        if (pos < (1 / 2.75)) {
            return (7.5625 * pos * pos);
        } else if (pos < (2 / 2.75)) {
            return (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);
        } else if (pos < (2.5 / 2.75)) {
            return (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
        } else {
            return (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
        }
    },
    bouncePast: function(pos) {
        if (pos < (1 / 2.75)) {
            return (7.5625 * pos * pos);
        } else if (pos < (2 / 2.75)) {
            return 2 - (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);
        } else if (pos < (2.5 / 2.75)) {
            return 2 - (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
        } else {
            return 2 - (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
        }
    },
    easeFromTo: function(pos) {
        if ((pos /= 0.5) < 1) return 0.5 * Math.pow(pos, 4);
        return - 0.5 * ((pos -= 2) * Math.pow(pos, 3) - 2);
    },
    easeFrom: function(pos) {
        return Math.pow(pos, 4);
    },
    easeTo: function(pos) {
        return Math.pow(pos, 0.25);
    },
    linear: function(pos) {
        return pos
    },
    sinusoidal: function(pos) {
        return ( - Math.cos(pos * Math.PI) / 2) + 0.5;
    },
    reverse: function(pos) {
        return 1 - pos;
    },
    mirror: function(pos, transition) {
        transition = transition || tween.sinusoidal;
        if (pos < 0.5) return transition(pos * 2);
        else return transition(1 - (pos - 0.5) * 2);
    },
    flicker: function(pos) {
        var pos = pos + (Math.random() - 0.5) / 5;
        return tween.sinusoidal(pos < 0 ? 0 : pos > 1 ? 1 : pos);
    },
    wobble: function(pos) {
        return ( - Math.cos(pos * Math.PI * (9 * pos)) / 2) + 0.5;
    },
    pulse: function(pos, pulses) {
        return ( - Math.cos((pos * ((pulses || 5) - .5) * 2) * Math.PI) / 2) + .5;
    },
    blink: function(pos, blinks) {
        return Math.round(pos * (blinks || 5)) % 2;
    },
    spring: function(pos) {
        return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp( - pos * 6));
    },
    none: function(pos) {
        return 0
    },
    full: function(pos) {
        return 1
    }
}


转自：http://www.cnblogs.com/sky000/archive/2010/10/14/1851274.html
				


				
时间： 2024-10-23 22:18:35 

		


		


	

	
	

		


		
js缓动函数的相关文章


								

		

			

                JS动画之缓动函数分析及动画库
			

		

		

									

				上一篇讲了JS动画定时器相关知识,这一篇介绍下缓动函数及流行的动画库. 熟悉的图 实际使用 jquery animate()+jquery.easing插件的使用: $(selector).animate(styles,speed,easing,callback) 原生js使用:张鑫旭同学的文章 缓动函数知识 什么是缓动函数?我的理解是动画参数与数学公式结合的函数. 各流行库缓动函数对比,以easeInQuad为例,如图: Tween.js jQuery.easing GSAP CreateJS			

		

	

				

		

			

                缓动函数速查表
			

		

		

									

				缓动函数速查表 缓动函数指定动画效果在执行时的速度,使其看起来更加真实. 现实物体照着一定节奏移动,并不是一开始就移动很快的.当我们打开抽屉时,首先会让它加速,然后慢下来.当某个东西往下掉时,首先是越掉越快,撞到地上后回弹,最终才又碰触地板. 本页可以在每次你需要时,帮助你找到想要的缓动函数. linear xt css+js easeInSine easeOutSine easeInOutSine easeIn缓动函数速查表,布布扣,bubuko.com			

		

	

				

		

			

                缓动函数
			

		

		

									

				/* * Tween.js * t: current time(当前时间) * b: beginning value(初始值) * c: change in value(变化量) * d: duration(持续时间) */ var Tween = { Linear: function(t, b, c, d) { return c*t/d + b; }, Quad: { easeIn: function(t, b, c, d) { return c * (t /= d) * t + b; },			

		

	

				

		

			

                缓动函数与关键帧动画
			

		

		

									

				缓动函数与关键帧动画 缓动函数指定动画效果在执行时的速度,使其看起来更加真实. 现实物体照着一定节奏移动,并不是一开始就移动很快的.当我们打开抽屉时,首先会让它加速,然后慢下来.当某个东西往下掉时,首先是越掉越快,撞到地上后回弹,最终才又碰触地板. http://easings.net/zh-cn 缓动函数能让动画效果看起来更加真实:). iOS开发中,能用到缓动函数的地方就属于关键帧动画了,以下是我用关键帧动画做出来的模拟真实时钟效果的动画,效果相当逼真哦,只是这个gif图片的效果不好而已.			

		

	

				

		

			

                div盒子的缓动函数封装
			

		

		

									

				1.2.  缓动动画 1.2.1.       原理公式 动画公式 leader = leader + step 匀速动画公式 step = 定值 leader = leader + step 缓动动画公式 step = ( target - leader ) / 10 leader = leader + step 缓动动画的好处 他的移动是有尽头的.不像基础匀速运动那样无限移动. 有非常逼真的缓动效果,实现的动画效果更细腻. 如果不清除定时器,物体永远跟着目标leader在移动. @体验缓动动			

		

	

				

		

			

                用缓动函数模拟物理动画
			

		

		

									

				1.缓动函数简介      <1>缓动函数的动画效果是建立在CALayer层级的关键帧动画基础之上 也就是说用普通的UIView的Animation是无法直接实现缓动函数 <2>缓动函数是一系列模拟物理效果(如抛物线)方程式的统称,用以计算给定两点之间的插值 <3>两点之间插的值越多,效果越好,但是会耗费更多的性能 <4>只有理解了缓动函数的原理才有可能写出自己想要的效果 学习来自:<极客学院>之 "用缓动函数模拟物理动画"			

		

	

				

		

			

                选择合适的缓动函数
			

		

		

									

				缓动函数定义 缓动函数指定动画效果在执行时的速度,使其看起来更加真实. 为什么要使用缓动函数 在平常的生活中,物体在运动的过程中,总是时而加速,时而减速.因此我们的大脑习惯了这种物体的这种自然的运动方式.所以在应用中加入这种自然的运动方式,会让用户觉得很舒服. 常见的缓动函数 Linear 匀速运动 Ease 慢速开始,然后变快,然后慢速结束 Ease-out 先快后慢 Ease-in 先慢后快 Ease-in-out 以慢速开始和结束 工具 缓动函数速查表 贝塞尔曲线在线生成工具			

		

	

				

		

			

                iOS基本动画/关键帧动画/利用缓动函数实现物理动画效果
			

		

		

									

				先说下基本动画部分 基本动画部分比较简单, 但能实现的动画效果也很局限 使用方法大致为: #1. 创建原始UI或者画面 #2. 创建CABasicAnimation实例, 并设置keypart/duration/fromValue/toValue #3. 设置动画最终停留的位置 #4. 将配置好的动画添加到layer层中 举个例子, 比如实现一个圆形从上往下移动, 上代码: 1 //设置原始画面 2 UIView *showView = [[UIView alloc] initWithFrame			

		

	

				

		

			

                WPF中的动画——（四）缓动函数
			

		

		

									

				缓动函数可以通过一系列公式模拟一些物理效果,如实地弹跳或其行为如同在弹簧上一样.它们一般应用在From/To/By动画上,可以使得其动画更加平滑. ????var widthAnimation = new DoubleAnimation()????{????????From = 0,????????To = 320,????????Duration = TimeSpan.FromSeconds(1),????????EasingFunction = new BackEase()????????{