程序博客网 > mac口红 色号

Tween中用到的缓动算法

来源：互联网 发布：mac口红 色号 编辑：程序博客网 时间：2024/04/29 03:26
动画效果分类
  • Linear：无缓动效果；
  • Quadratic：二次方的缓动（t^2）；
  • Cubic：三次方的缓动（t^3）；
  • Quartic：四次方的缓动（t^4）；
  • Quintic：五次方的缓动（t^5）；
  • Sinusoidal：正弦曲线的缓动（sin(t)）；
  • Exponential：指数曲线的缓动（2^t）；
  • Circular：圆形曲线的缓动（sqrt(1-t^2)）；
  • Elastic：指数衰减的正弦曲线缓动；
  • Back：超过范围的三次方缓动（(s+1)*t^3 - s*t^2）；
  • Bounce：指数衰减的反弹缓动。

每个效果都分三个缓动方式（方法），分别是：

  • easeIn：从0开始加速的缓动；
  • easeOut：减速到0的缓动；
  • easeInOut：前半段从0开始加速，后半段减速到0的缓动。

四个参数分别是：

  • t：current time（当前时间）；
  • b：beginning value（初始值）；
  • c： change in value（变化量）；
  • d：duration（持续时间）。


</pre><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 rTweennsitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-rTweennsitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title> TweenDemo </title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style>.cont {margin-left:50px;}#scroll {width:500px; height:50px; border:1px solid #800000; position:relative}#scroller {width:50px; height:50px; background-color:#006600; position:absolute}.oper { margin-left:50px; margin-top:10px;}.next {margin-top:50px; width:500px; height:200px; border:1px solid #800000; position:relative}#chart {position:absolute; height:200px;}#line {position:absolute;left:0; top:0; height:200px; width:2px; background-color:#006600; display:none; }</style></head><body><div class="cont"><div id="scroll"><div id="scroller"></div></div><div class="next"><div id="chart"></div><div id="line"></div></div></div><div class="oper">Tween类型<p><label><input type="radio" name="rTween" value="Linear" checked/>Linear</label><label><input type="radio" name="rTween" value="Quad" />Quad</label><label><input type="radio" name="rTween" value="Cubic" />Cubic</label><label><input type="radio" name="rTween" value="Quart" />Quart</label><label><input type="radio" name="rTween" value="Quint" />Quint</label><br/><label><input type="radio" name="rTween" value="Sine" />Sine</label><label><input type="radio" name="rTween" value="Expo" />Expo</label><label><input type="radio" name="rTween" value="Circ" />Circ</label><label><input type="radio" name="rTween" value="Elastic" />Elastic</label><label><input type="radio" name="rTween" value="Back" />Back</label><label><input type="radio" name="rTween" value="Bounce" />Bounce</label></p>Ease类型<p><label><input type="radio" name="rEase" value="easeIn" checked/>easeIn</label><label><input type="radio" name="rEase" value="easeOut" />easeOut</label><label><input type="radio" name="rEase" value="easeInOut" />easeInOut</label></p><input type="button" value="Run" style="width:60px;height:28px;" id="run" /></div><script>// Tween类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;}}};function T$(i) { return document.getElementById(i); }function T$$(i) { return document.getElementsByName(i); }function Each(arr, fn) {for (var i = 0, len = arr.length; i < len; i++) {fn(arr[i], i, arr);}}Tween.demo = function() {var change = 500, duration = 100, timer = null;var rTween = 'Linear', rEase = 'easeIn';var ss = T$('scroller'), sl = T$('line'), sc = T$('chart'), rTweens = T$$('rTween'), rEases = T$$('rEase');;return {init: function() {this.setMethod();this.drawChart();this.events();},events: function() {var self = this;Each(rTweens, function(item) { item.onclick = function() {rTween = this.value;self.setMethod();self.drawChart();}});Each(rEases, function(item) {item.onclick = function() {rEase = this.value;self.setMethod();self.drawChart();}});T$('run').onclick = function() {self.scroller();self.drawChart();}},setMethod: function() {fx = rTween == 'Linear' ? Tween[rTween] : Tween[rTween][rEase];},scroller: function() {clearTimeout(timer);var time = 0, begin = 0;sl.style.display = 'block';function run() {ss.style.left = Math.ceil(fx(time, begin, change - 50, duration)) + 'px';sl.style.left = Math.ceil(Tween.Linear(time, begin, change, duration)) + 'px';if (time < duration) { time++; timer = setTimeout(run, 10);} else {time = duration;sl.style.display = 'none';clearTimeout(timer);}}run();},drawChart: function() {var arr = [];for (var i = 0; i <= change; i++) {arr.push('<div style="width:2px;height:2px;font-size:0;background-color:#006600;position:absolute;left:'+(i - 1)+'px;top:'+(Math.ceil(fx(i, 200, -200, change)))+'px"><\/div>');}sc.innerHTML = arr.join('');}}}();Tween.demo.init();</script></body></html>






// Tween类
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;
        }
    }
};
 
function T$(i) { return document.getElementById(i); }
function T$$(i) { return document.getElementsByName(i); }
function Each(arr, fn) {
    for (var i = 0, len = arr.length; i < len; i++) {
        fn(arr[i], i, arr);
    }
}
Tween.demo = function() {
    var change = 500, duration = 100, timer = null;
    var rTween = 'Linear', rEase = 'easeIn';
    var ss = T$('scroller'), sl = T$('line'), sc = T$('chart'), rTweens = T$$('rTween'), rEases = T$$('rEase');;
    return {
        init:function() {
            this.setMethod();
            this.drawChart();
            this.events();
        },
 
        events:function() {
            var self = this;
            Each(rTweens,function(item) {
                item.onclick = function() {
                    rTween = this.value;
                    self.setMethod();
                    self.drawChart();
                }
            });
            Each(rEases,function(item) {
                item.onclick = function() {
                    rEase = this.value;
                    self.setMethod();
                    self.drawChart();
                }
            });
             
            T$('run').onclick = function() {
                self.scroller();
                self.drawChart();
            }
        },
 
        setMethod:function() {
            fx = rTween == 'Linear' ? Tween[rTween] : Tween[rTween][rEase];
        },
 
        scroller:function() {
            clearTimeout(timer);
            var time = 0, begin = 0;
            sl.style.display = 'block';
            function run() {
                ss.style.left = Math.ceil(fx(time, begin, change - 50, duration)) + 'px';
                sl.style.left = Math.ceil(Tween.Linear(time, begin, change, duration)) + 'px';
                if (time < duration) {
                    time++;
                    timer = setTimeout(run, 10);   
                }else {
                    time = duration;
                    sl.style.display = 'none';
                    clearTimeout(timer);
                }
            }
            run();
        },
 
        drawChart:function() {
            var arr = [];
            for (var i = 0; i <= change; i++) {
                arr.push('<div style="width:2px;height:2px;font-size:0;background-color:#006600;position:absolute;left:'+(i - 1)+'px;top:'+(Math.ceil(fx(i, 200, -200, change)))+'px"><\/div>');
            }
            sc.innerHTML = arr.join('');
        }
    }
}();
 
Tween.demo.init();
0 0
mac口红 色号 mac口红 色号
原创粉丝点击
热门IT博客
淘宝免费申请试用规则淘宝免费申请试用规则
树莓派网络摄像头树莓派网络摄像头
js注释方法
电脑安装录音软件
键盘按键记录软件
细说php视频 百度云
微信当前网络不稳定
linux ant自动打包apk
caffe架构
div 里调用js函数开关
华为研发 知乎
网络潮语2017
windows nt 10.0
做网络推广压力大吗
淘宝天天特价活动说明
刷搜狗手机点击优化
php strcmp 漏洞
d3.v3.min.js引用
python网络编程 第3版
中国网络流行语大全
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 智珉 智盘 智睿 神智不清 神智不清的意思 超神智脑系统 剑气凌天 漆原智志的破产神作 智神 渣诚 阿撒托斯被谁剥夺神智 智秀 jisoo智秀 智米 智米科技 智美 智美啤酒 智美体育 智者无敌 智者千虑 智者乐水 智者 智者奥尔姆 智者大师 智者学派 智者乐山 智者不惑 智者不入爱河 智者千虑必有一失 谣言止于智者 智者不入爱河下一句 智者不入爱河什么意思 流言止于智者 谣言止于智者下一句 谣言止于智者什么意思 智者千虑必有一失出自哪里 智者千虑必有一失出自 智者如风01作品 与智者同行与高人为伍 智者千虑或有一失 智者减半省者全无 智者无敌全集免费观看

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里