JavaScript框架设计第14章动画引擎

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #taxiway {
            width: 800px;
            height: 100px;
            background: #E8E8EF;
            position: relative;
        }
        #move {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background: #a9ea00;
        }
    </style>
</head>
<body>
    <div id="taxiway">
        <div id="move"></div>
    </div>
    <script>
        function easeOutBounce(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 + 0.75);
            } else if (pos < (2.5/2.75)) {
                return (7.5625*(pos-=(2.25/2.75))*pos + 0.9375);
            } else {
                return (7.5625*(pos-=(2.625/2.75))*pos + 0.984375);
            }
        }

        var el = document.getElementById('move')
        var parent = document.getElementById('taxiway')
        var distance = parent.offsetWidth - el.offsetWidth
        var begin = parseFloat(window.getComputedStyle(el, null).left)
        var end = begin + distance
        var fps = 30
        var interval = 1000 / fps
        var duration = 2000
        var times = duration / 1000 * fps
        var step = distance / times


        el.onclick = function() {
            var beginTime = new Date
            var id = setInterval(function() {
                var t = new Date - beginTime
                if (t >= duration) {
                    el.style.left = end + 'px'
                    clearInterval(id)
                } else {
                    var per = t / duration
                    el.style.left = begin + easeOutBounce(per) * distance + 'px'
                }
            }, interval)
        }
    </script>
</body>
</html>

easeIn
linear(easeNone)
In 表示加速
Out 表示减速
InOut 表示加速到中途又开始减速

以实现方式与指数或开根进行区分
Sine 表示由三角函数实现
Quad 是二次方
Cubic 是三次方
Quart 是四次方
Quint 是五次方
Cire 使用开平方根的 Math.sqit
Expo 使用开立方根的 Math.pow
Elastic 是结合三角函数与开立三方根的初级弹簧效果
Back 是使用了一个 1.70158 常数来计算的回退效果
Bounce 是高级弹簧效果

JavaScript框架设计 第14章 动画引擎

JavaScript框架设计第14章动画引擎