JavaScript 动画

使用javascript也可以实现css动画的效果，涉及到函数requestAnimationFrame()，接收的参数是重绘前调用的函数，这个函数会接受一个DOMHighResTimeStamp实例(比如performance.now()的返回值)，以此为基础的动画函数如下：

/**
* js动画函数
*
* timing:动画曲线函数
* draw:动画绘制函数
* duration:动画时间
*/
function animation({ timing, draw, duration }) {
    //动画开始时间
    let start = performance.now();
    requestAnimationFrame(function animate(time) {
        // timeFraction: [ 0, 1 ]
        let timeFraction = (time - start) / duration;
        if (timeFraction > 1) timeFraction = 1;
        // 计算当前动画状态
        let progress = timing(timeFraction)
        draw(progress); // 绘制函数
        if (timeFraction < 1) { 
            requestAnimationFrame(animate); 
        } 
    }); 
}

设置函数timing可以实现ease、linear、ease-in等动画曲线，当然还可以自定义一些比较炫酷的曲线。
下面使用该函数在codepen上演示一下，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100vh;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        var box = document.getElementsByClassName('box')[0];
        animation({
            duration: 2000,
            timing: function (timeFraction) {
                return timeFraction;
            },
            draw: function (progress) {
                box.style.setProperty('transform', `translate(${150 * progress}%, 0%)`);
            }
        });

        function animation({
            timing,
            draw,
            duration
        }) {
            let start = performance.now();
            requestAnimationFrame(function animate(time) {
                let timeFraction = (time - start) / duration;
                if (timeFraction > 1) timeFraction = 1;
                let progress = timing(timeFraction)
                draw(progress);
                if (timeFraction < 1) {
                    requestAnimationFrame(animate);
                }
            });
        }
    </script>
</body>
</html>
posted @ 2022-01-07 16:02  晨米酱  阅读(107)  评论(0)    收藏  举报