tweentype

最新推荐文章于 2020-07-28 20:47:40 发布
ly402609921
最新推荐文章于 2020-07-28 20:47:40 发布
阅读量445
点赞数
CC 4.0 BY-SA版权
本文链接：https://blog.youkuaiyun.com/ly402609921/article/details/49102715
本文介绍了一个使用HTML、CSS和JavaScript实现的动画效果示例。通过不同的缓动函数（Tween），可以为网页元素创建丰富的动画效果。文章提供了完整的代码实现，包括动画初始化、计算运动范围和单位转换等功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tween</title>
<style type="text/css">
html, body{ padding: 0; margin: 0;}
code{ white-space: pre;}
#code{ background: #f3f3f3;}
#wrap{ position: relative; width: 1100px; height: 100px; margin: 20px auto; background: #f5f5f5;}
#move{ position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: #f93;}
#change{ margin-left: 50%; margin-bottom: 20px;}
</style>
</head>
<body>
<div id="wrap">
    <div id="move"></div>
</div>
<select id="change">
    <option value="easeInQuad">easeInQuad</option> 
    <option value="easeOutQuad">easeOutQuad</option> 
    <option value="easeInOutQuad">easeInOutQuad</option> 
    <option value="easeInCubic">easeInCubic</option> 
    <option value="easeOutCubic">easeOutCubic</option> 
    <option value="easeInOutCubic">easeInOutCubic</option> 
    <option value="easeInQuart">easeInQuart</option> 
    <option value="easeOutQuart">easeOutQuart</option> 
    <option value="easeInOutQuart">easeInOutQuart</option> 
    <option value="easeInQuint">easeInQuint</option> 
    <option value="easeOutQuint">easeOutQuint</option> 
    <option value="easeInOutQuint">easeInOutQuint</option> 
    <option value="easeInSine">easeInSine</option> 
    <option value="easeOutSine">easeOutSine</option> 
    <option value="easeInOutSine">easeInOutSine</option> 
    <option value="easeInExpo">easeInExpo</option> 
    <option value="easeOutExpo">easeOutExpo</option> 
    <option value="easeInOutExpo">easeInOutExpo</option> 
    <option value="easeInCirc">easeInCirc</option> 
    <option value="easeOutCirc">easeOutCirc</option> 
    <option value="easeInOutCirc">easeInOutCirc</option> 
    <option value="easeOutBounce">easeOutBounce</option> 
    <option value="easeInBack">easeInBack</option> 
    <option value="easeOutBack">easeOutBack</option> 
    <option value="easeInOutBack">easeInOutBack</option> 
    <option value="elastic">elastic</option> 
    <option value="swingFromTo">swingFromTo</option> 
    <option value="swingFrom">swingFrom</option> 
    <option value="swingTo">swingTo</option> 
    <option value="bounce">bounce</option> 
    <option value="bouncePast">bouncePast</option> 
    <option value="easeFromTo">easeFromTo</option> 
    <option value="easeFrom">easeFrom</option> 
    <option value="easeTo">easeTo</option> 
    <option value="linear">linear</option> 
    <option value="sinusoidal">sinusoidal</option> 
    <option value="reverse">reverse</option> 
    <option value="mirror">mirror</option> 
    <option value="flicker">flicker</option> 
    <option value="wobble">wobble</option> 
    <option value="pulse">pulse</option> 
    <option value="blink">blink</option> 
    <option value="spring">spring</option> 
    <option value="none">none</option> 
    <option value="full">full</option> 
</select>
<script type="text/javascript">
var $ = function(selector) {
    return document.getElementById(selector.substring(1));
}
function getCurrentStyle(ele, prop) {
    try {
        return ele.style[prop] || ele.currentStyle[prop] || 1;
    } catch (e) {
        return ele.style[prop] || window.getComputedStyle(ele)[prop];
    }
}
var Animate = {
    init: function(ele, tween) {
        ele.style.left = 0;
        setTimeout(function() {
            Animate._animate(ele, tween);
        }, 200);        
    },
    _animate: function(ele, tween) {
        var speed = 1000,
            prop = { left: '1000px'};

        // 计算运动范围,各种属性处理，单位转换
        var props = [];
        for (var i in prop) {
            if (prop.hasOwnProperty(i)) {
                props.push(i);
            }
        }
        var e = '' + (prop[props[0]]),
            s = getCurrentStyle(ele, props[0]),
            l = parseInt(e) - parseInt(s);
        
        var ext = e.indexOf('%') > -1 ? '%' : 'px';
        var st = +new Date(),
            et = st + speed,
            timer = setInterval(function() {

            // 时间剩余比例
            //var r = ((et - new Date()) / speed).toFixed(3);
			var r = ((new Date() -st)/speed).toFixed(3);
            // 运动结束后gotoEnd
            if (r >= 1) {
                clearInterval(timer);
                ele.style[props[0]] = e;
                return;
            }

            // 运动
            var middle =  l * Tween[tween](r);
            ele.style[props[0]] = middle + ext;
        }, 18);
    }
};
var Tween = {
        easeInQuad: function(t){
            return Math.pow(t, 2);
        },

        easeOutQuad: function(t){
            return -(Math.pow((t-1), 2) -1);
        },

        easeInOutQuad: function(t){
            if ((t/=0.5) < 1) return 0.5*Math.pow(t,2);
            return -0.5 * ((t-=2)*t - 2);
        },

        easeInCubic: function(t){
            return Math.pow(t, 3);
        },

        easeOutCubic: function(t){
            return (Math.pow((t-1), 3) +1);
        },

        easeInOutCubic: function(t){
            if ((t/=0.5) < 1) return 0.5*Math.pow(t,3);
            return 0.5 * (Math.pow((t-2),3) + 2);
        },

        easeInQuart: function(t){
            return Math.pow(t, 4);
        },

        easeOutQuart: function(t){
            return -(Math.pow((t-1), 4) -1)
        },

        easeInOutQuart: function(t){
            if ((t/=0.5) < 1) return 0.5*Math.pow(t,4);
            return -0.5 * ((t-=2)*Math.pow(t,3) - 2);
        },

        easeInQuint: function(t){
            return Math.pow(t, 5);
        },

        easeOutQuint: function(t){
            return (Math.pow((t-1), 5) +1);
        },

        easeInOutQuint: function(t){
            if ((t/=0.5) < 1) return 0.5*Math.pow(t,5);
            return 0.5 * (Math.pow((t-2),5) + 2);
        },

        easeInSine: function(t){
            return -Math.cos(t * (Math.PI/2)) + 1;
        },

        easeOutSine: function(t){
            return Math.sin(t * (Math.PI/2));
        },

        easeInOutSine: function(t){
            return (-.5 * (Math.cos(Math.PI*t) -1));
        },

        easeInExpo: function(t){
            return (t==0) ? 0 : Math.pow(2, 10 * (t - 1));
        },

        easeOutExpo: function(t){
            return (t==1) ? 1 : -Math.pow(2, -10 * t) + 1;
        },

        easeInOutExpo: function(t){
            if(t==0) return 0;
            if(t==1) return 1;
            if((t/=0.5) < 1) return 0.5 * Math.pow(2,10 * (t-1));
            return 0.5 * (-Math.pow(2, -10 * --t) + 2);
        },

        easeInCirc: function(t){
            return -(Math.sqrt(1 - (t*t)) - 1);
        },

        easeOutCirc: function(t){
            return Math.sqrt(1 - Math.pow((t-1), 2))
        },

        easeInOutCirc: function(t){
            if((t/=0.5) < 1) return -0.5 * (Math.sqrt(1 - t*t) - 1);
            return 0.5 * (Math.sqrt(1 - (t-=2)*t) + 1);
        },

        easeOutBounce: function(t){
            if ((t) < (1/2.75)) {
                return (7.5625*t*t);
            } else if (t < (2/2.75)) {
                return (7.5625*(t-=(1.5/2.75))*t + .75);
            } else if (t < (2.5/2.75)) {
                return (7.5625*(t-=(2.25/2.75))*t + .9375);
            } else {
                return (7.5625*(t-=(2.625/2.75))*t + .984375);
            }
        },

        easeInBack: function(t){
            var s = 1.70158;
            return (t)*t*((s+1)*t - s);
        },

        easeOutBack: function(t){
            var s = 1.70158;
            return (t=t-1)*t*((s+1)*t + s) + 1;
        },

        easeInOutBack: function(t){
            var s = 1.70158;
            if((t/=0.5) < 1) {
                return 0.5*(t*t*(((s*=(1.525))+1)*t -s));
            }
            return (0.5*((t-=2)*t*(((s*=(1.525))+1)*t +s) +2));
        },

        elastic: function(t) {
            return -1 * Math.pow(4,-8*t) * Math.sin((t*6-1)*(2*Math.PI)/2) + 1;
        },

        swingFromTo: function(t) {
            var s = 1.70158;
            return ((t/=0.5) < 1) ? 0.5*(t*t*(((s*=(1.525))+1)*t - s)) : 0.5*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2);
        },

        swingFrom: function(t) {
            var s = 1.70158;
            return t*t*((s+1)*t - s);
        },

        swingTo: function(t) {
            var s = 1.70158;
            return (t-=1)*t*((s+1)*t + s) + 1;
        },

        bounce: function(t) {
            if (t < (1/2.75)) {
                return (7.5625*t*t);
            } else if (t < (2/2.75)) {
                return (7.5625*(t-=(1.5/2.75))*t + .75);
            } else if (t < (2.5/2.75)) {
                return (7.5625*(t-=(2.25/2.75))*t + .9375);
            } else {
                return (7.5625*(t-=(2.625/2.75))*t + .984375);
            }
        },

        bouncePast: function(t) {
            if (t < (1/2.75)) {
                return (7.5625*t*t);
            } else if (t < (2/2.75)) {
                return 2 - (7.5625*(t-=(1.5/2.75))*t + .75);
            } else if (t < (2.5/2.75)) {
                return 2 - (7.5625*(t-=(2.25/2.75))*t + .9375);
            } else {
                return 2 - (7.5625*(t-=(2.625/2.75))*t + .984375);
            }
        },

        easeFromTo: function(t) {
            if ((t/=0.5) < 1) return 0.5*Math.pow(t,4);
            return -0.5 * ((t-=2)*Math.pow(t,3) - 2);
        },

        easeFrom: function(t) {
            return Math.pow(t,4);
        },

        easeTo: function(t) {
            return Math.pow(t,0.25);
        },

        linear:  function(t) {
            return t
        },

        sinusoidal: function(t) {
            return (-Math.cos(t*Math.PI)/2) + 0.5;
        },

        reverse: function(t) {
            return 1 - t;
        },

        mirror: function(t, transition) {
            transition = transition || Tween.sinusoidal;
            if(t<0.5)
                return transition(t*2);
            else
                return transition(1-(t-0.5)*2);
        },

        flicker: function(t) {
            var t = t + (Math.random()-0.5)/5;
            return Tween.sinusoidal(t < 0 ? 0 : t > 1 ? 1 : t);
        },

        wobble: function(t) {
            return (-Math.cos(t*Math.PI*(9*t))/2) + 0.5;
        },

        pulse: function(t, pulses) {
            return (-Math.cos((t*((pulses||5)-.5)*2)*Math.PI)/2) + .5;
        },

        blink: function(t, blinks) {
            return Math.round(t*(blinks||5)) % 2;
        },

        spring: function(t) {
            return 1 - (Math.cos(t * 4.5 * Math.PI) * Math.exp(-t * 6));
        },

        none: function(t){
            return 0
        },

        full: function(t){
            return 1
        }
    }
window.onload = function() {
    $('#change').onchange = function() {
        Animate.init($('#move'), this.value);
    }
} 
</script>
</body>
</html>