代码改变世界

JS Tween动画效果研究 : - )Tween公式使用

2013-01-16 17:20  VVG  阅读(13091)  评论(2编辑  收藏

先看iframe一下DEMO:

DEMO:点击直接查看

Tween中的方法接受4个参数t,b,c,d 。返回值为计算后的当前位置.

t => time(初始记步次数)   b => begin(初始位置)   c => change(变化量)   d => duration(持续次数)

如:

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;
            }
        }

公式的原理是神马,我也搞不懂,看起来好高深,我只知道用。。。拿来主义,呵呵。

我们知道了其中的参数的意思,就可以写一个通用的move函数,用的时候只要传递Tween方法即可,我写的方法如下:

function MoveTo(options) { //参数o,t,b,c,d  ***** o为移动对象   t => time(初始记步次数)  b => begin(初始位置)   c => change(变化量)   d => duration(持续次数)
        var o = options.o, // 移动对象
                t = options.t || 0, // 初始步进
                lb = options.lb || 0, // 初始left距离
                tb = options.tb || 0, // 初始top距离
                lc = options.lc || 500, // left变化的距离
                tc = options.tc || 0, // top变化的距离
                d = options.d || 500, // 变化次数,次数越多速度越慢
                tween = options.tween || Tween.Elastic.easeOut;        // 移动方式,套用公式

        (function () {
            if (o) {
                if (lc > 0){
                    o.style.left = Math.ceil(tween(t, lb, lc, d)) + "px";

                }
                if (tc > 0) {
                    o.style.top = Math.ceil(tween(t, tb, tc, d)) + "px";
                }
                if (t < d) {
                    t++;
                    setTimeout(arguments.callee, 10);
                }
            }
        })()
    }

动画与绘制轨迹曲线的代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tween动画效果</title>
    <style type="text/css">
        #vvg { text-align: center; font-size: 16px; font-weight: bold; }
        #box { width: 520px; height: 50px; border: 1px solid #333; margin: 10px auto; position: relative; }
        #sbox { width: 20px; height: 50px; position: absolute; left: 0; background: red; }
        #graph{ border: 1px solid #ccc; background: #272424;}
        #vvg .radios{width: 520px; margin: 5px auto; font-weight: normal; text-align: left; overflow: hidden;}
        #vvg .radios label{ width:103px; float: left;}
        #vvg .row1{ background: #cccccc;}
        #vvg .row2{ background: #b6b6b6; margin-top: 10px;}
        #vvg .btn{padding: 5px 40px;}
    </style>
</head>
<body>
<div id="vvg">
    <div id="box">
        <div id="sbox">&nbsp;</div>
    </div>
    <canvas id="graph" width="522px" height="500">你的浏览器不支持canvas</canvas>
    <div class="radios row1" id="radio_1">
        <label><input type="radio" value="Linear" name="tname" checked>Linear</label>
        <label><input type="radio" value="Quad" name="tname">Quad </label>
        <label><input type="radio" value="Cubic" name="tname">Cubic </label>
        <label><input type="radio" value="Quart" name="tname">Quart </label>
        <label><input type="radio" value="Quint" name="tname">Quint</label>
        <label><input type="radio" value="Sine" name="tname">Sine</label>
        <label><input type="radio" value="Expo" name="tname">Expo</label>
        <label><input type="radio" value="Circ" name="tname">Circ</label>
        <label><input type="radio" value="Elastic" name="tname">Elastic</label>
        <label><input type="radio" value="Back" name="tname">Back</label>
        <label><input type="radio" value="Bounce" name="tname">Bounce</label>
    </div>
    <div class="radios row2" id="radio_2">
        <label><input type="radio" value="easeIn" name="tname2"  checked>easeIn</label>
        <label><input type="radio" value="easeOut" name="tname2">easeOut</label>
        <label><input type="radio" value="easeInOut" name="tname2">easeInOut</label>
    </div>
    <div><input type="button" value="运 行" class="btn" id="run"></div>
</div>

<script type="text/javascript">
    // 快捷选择函数
    function $(arg, context) {
        var tagAll, n, eles = [], i, sub = arg.substring(1);
        context = context || document;
        if (typeof arg == 'string') {
            switch (arg.charAt(0)) {
                case '#':
                    return document.getElementById(sub);
                    break;
                case '.':
                    if (context.getElementsByClassName) return context.getElementsByClassName(sub);
                    tagAll = $('*', context);
                    n = tagAll.length;
                    for (i = 0; i < n; i++) {
                        if (tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
                    }
                    return eles;
                    break;
                default:
                    return context.getElementsByTagName(arg);
                    break;
            }
        }
    }

    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;
            }
        }
    }
    //Tween中的方法接受4个参数t,b,c,d 。t为初始时间 b、c、d三个参数(即初始值,变化量,持续时间)。返回值为当前位置
    //t => time(初始记步次数)  b => begin(初始位置)   c => change(变化量)   d => duration(持续次数)
    /*
     先通过上面的坐标实例说一下算法原理:

     x轴是时间,y轴是当前值,b是y轴的初始值,x轴的初始值是0,t是当前时间。当t(x轴)逐渐增加到达d时,当前值(y轴)会到达目标值(b+c)。
     想详细理解的话可以找资料看看吧(貌似跟数学关系比较大)。

     下面就介绍如何使用这个Tween了,首先b、c、d三个参数(即初始值,变化量,持续时间)在缓动开始前,是需要先确定好的。
     举一个简单的例子,一个div要向右缓动,left初始值是50,那么b就是50,要向右移动100,那c就是100,如果知道的是目标值,例如要向右移动到150,那就把目标值150减初始值b就是变化量c了。
     至于d的设置就比较灵活,只要符合t是从0向d递增(或递减)就可以了。

     d跟步长配合使用来设置持续时间,例如d设置为100,如果设置步长是1,那么从0到100就有100步,即分100次来完成这个过程,步数越多那么持续时间就越长。
     至于t的变化相当于时间的变化,一般是均匀变化的,每次变化都增加一个步长,当t从0递增(或递减)到d时,缓动就结束了。

     要注意的是t是从0开始的,设置步长时必须确定t确实能到达d,如果上面的步长是3,那么t就永远都到不了d了。更好的处理是当t等于或超过d之后,就停止定时器并设置当前值为目标值。
     */

    // 获取radio值
    var radio_1 = function(){
       var radios = $('input',$('#radio_1'));
       for(var i = 0,n=radios.length;i<n;i++){
           if(radios[i].checked == true){
               return radios[i].value;
           }
       }
    };

    var radio_2 = function(){
        var radios = $('input',$('#radio_2'));
        for(var i = 0,n=radios.length;i<n;i++){
            if(radios[i].checked == true){
                return radios[i].value;
            }
        }
    };

    // 移动动画
    function MoveTo(options) { //参数o,t,b,c,d  ***** o为移动对象   t => time(初始记步次数)  b => begin(初始位置)   c => change(变化量)   d => duration(持续次数)
        var o = options.o, // 移动对象
                t = options.t || 0, // 初始步进
                lb = options.lb || 0, // 初始left距离
                tb = options.tb || 0, // 初始top距离
                lc = options.lc || 500, // left变化的距离
                tc = options.tc || 0, // top变化的距离
                d = options.d || 500, // 变化次数,次数越多速度越慢
                tween = options.tween || Tween.Elastic.easeOut;        // 移动方式,套用公式
                // 绘图处=============================不用绘图可去掉
                var canvas = document.getElementById('graph');
                var context = canvas.getContext('2d');
                context.clearRect(0,0,500,500);
                // ================================== end

        (function () {
            if (o) {
                if (lc > 0){
                    o.style.left = Math.ceil(tween(t, lb, lc, d)) + "px";
                    // 绘图区域开始,可以去掉 ==============================
                    drawPoint({
                        canvas:canvas,
                        left:Math.ceil(t*5),
                        top: Math.ceil(tween(t, lb, lc, d))
                    })
                    // 绘图区域结束 ======================================
                }
                if (tc > 0) {
                    o.style.top = Math.ceil(tween(t, tb, tc, d)) + "px";
                }
                if (t < d) {
                    t++;
                    setTimeout(arguments.callee, 10);
                }
            }
        })()
    }
    // 绘制曲线图
    function drawPoint(options){
       var canvas = options.canvas;    //画布
       var left = options.left;        // time
       var top = options.top;    // 当前值
       var context = canvas.getContext('2d');
        // 绘制点
        context.fillStyle = '#fff';
        context.fillRect(left,top,2,2);
    }


    $("#run").onclick = function(){
        var div = document.getElementById('sbox');
        var tween1 = radio_1();
        var tween2 = radio_2();
        if(!!Tween[tween1][tween2]){
            var tween = Tween[tween1][tween2];
        }else{
            tween =  Tween[tween1];
        }
        var options = {
            o:div,
            lc:500,
            d:100,
            tween:tween
        }
        MoveTo(options);
    }

</script>
</body>
</html>

详细请参考: cloudgamer Tween算法及缓动效果