实现一个可持续的动画

最新推荐文章于 2024-09-03 03:15:58 发布

QUAN-铨

最新推荐文章于 2024-09-03 03:15:58 发布

阅读量167

点赞数

分类专栏： js 文章标签： css js html javascript

本文链接：https://blog.csdn.net/abcquan123/article/details/108204242

版权

js 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

实现一个可持续的动画

1、使用css动画属性

直接上代码，具体里面有注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS实现可持续动画</title>
    <style>
        .quan{
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /* 名字 花费的时间 速度曲线 播放次数 */
            animation: wei 10s ease infinite;
        }
        @keyframes wei{
            0% {top: 0px;left: 0px;} 
            25% {background-color: red;top: 50px;left: 50px;}
            50% {background-color: green;top: 100px;left: 100px;}
            75% {background-color: blue;top: 200px;left: 200px;}
            100% {background-color: black;top: 300px;left: 300px;}
        }
        .box1{
            position: absolute;
            top: 300px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /* alternate是否应该轮流反向播放动画 */
            animation: box1 4s ease infinite alternate;
        }
        @keyframes box1{
            from{

            }
            to{
                width: 400px;
                height: 400px;
            }
        }
    </style>
</head>
<body>
    <div class="quan"></div>
    <div class="box1"></div>
</body>
</html>

2、使用js，这里有两种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS实现可持续的动画</title>
    <style>
        .quan{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="box1">点击开始动画(方式1)</div>
    <div id="box2">点击开始动画(方式2)</div>
    <div class="quan"></div>
    <script>
        // 用requestAnimationFrame的好处
        // 1、浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果
        // 2、一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力
        
        // cancelAnimationFrame方法用于取消重绘
        // -------------------------------------------------------------
        // 检测是否支持这个API，不支持就自己部署
        window.requestAnimFrame = (function(){
            return  window.requestAnimationFrame       || 
                    window.webkitRequestAnimationFrame || 
                    window.mozRequestAnimationFrame    || 
                    window.oRequestAnimationFrame      || 
                    window.msRequestAnimationFrame     || 
                    function( callback ){
                        /*按照1秒钟60次（大约每16.7毫秒一次），来模拟requestAnimationFrame。*/
                        window.setTimeout(callback, 1000 / 60);
                    };
        })();
        // 获取元素
        let quan = document.querySelector('.quan')
        let box1 = document.getElementById('box1')
        let box2 = document.getElementById('box2')
        let flag = true
        let left=0
        // 方法一  使用定时器
        box1.addEventListener('click',function(){
            setInterval(animation,100)
        })
        // 方法二  使用requestAnimationFrame
        box2.addEventListener('click',function animloop(){
            animation()
            requestAnimationFrame(animloop)
        })
        // 执行动画的函数
        function animation(){
            // console.log(left)
            left==0 ? flag=true : left==100 ? flag=false : ''
            flag ? quan.style.left = `${left++}px` : quan.style.left = `${left--}px`
        }
    </script>
</body>
</html>