javascript动画基础代码

复制代码
<html>

<head>
    <title></title>
    <style type="text/css">
    #line {
        height: 40px;
        width: 100%;
        background: #ccc;
        position: relative;
        top: 45%;
    }
    
    #box {
        width: 100px;
        height: 100px;
        background: blue;
        position: absolute;
        top: -30px;
        left: 0;
    }
    </style>
</head>

<body>
    <div id="line">
        <div id='box'></div>
    </div>
    <script type="text/javascript">
    function animate(opts) {
        opts.delay = opts.delay || 15;
        opts.duration = opts.duration || 1000;
        opts.effect = opts.effect || linear;
        var start = new Date;

        if ('requestAnimationFrame' in window) {
            function draw() {
                var now = new Date;
                var timePassed = now - start;
                var progress = (now - start) / opts.duration;
                if (progress < 1) {
                    var delta = opts.effect(progress);
                    opts.step(delta);
                    setTimeout(function() {
                        requestAnimationFrame(draw);
                    }, opts.delay);
                }
            }
            draw();
        } else {
            var id = setInterval(function() {
                var timePassed = new Date - start;
                var progress = timePassed / opts.duration;

                if (progress > 1) progress = 1;
                var delta = opts.effect(progress);
                opts.step(delta);

                if (progress === 1) {
                    clearInterval(id);
                }

            }, opts.delay);
        }
    }

    function linear(progress) {
        return progress;
    }

    function quad(progress) {
        return Math.pow(progress, 2);
    }

    function circ(progress) {
        return 1 - Math.sin(Math.acos(progress))
    }

    function back(progress, x) {
        x = x || 1.5;
        return Math.pow(progress, 2) * ((x + 1) * progress - x)
    }

    function bounce(progress) {
        for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
            if (progress >= (7 - 4 * a) / 11) {
                return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2)
            }
        }
    }

    function elastic(progress, x) {
        x = x || 1.5;
        return Math.pow(2, 10 * (progress - 1)) * Math.cos(20 * Math.PI * x / 3 * progress)
    }

    function makeEaseOut(delta) {
        return function(progress) {
            return 1 - delta(1 - progress)
        }
    }

    function makeEaseInOut(delta) {
        return function(progress) {
            if (progress < .5)
                return delta(2 * progress) / 2
            else
                return (2 - delta(2 * (1 - progress))) / 2
        }
    }


    var el = document.getElementById('box');

    animate({
        duration: 3000,
        effect: makeEaseInOut(bounce),
        step: function(delta) {
            el.style.left = 1000 * delta + 'px';
        }
    });
    </script>
</body>

</html>
复制代码

 

posted @   记忆的森林  阅读(272)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
AI IDE Trae