JS 动画

最新推荐文章于 2023-09-21 08:00:19 发布

布织锁云

最新推荐文章于 2023-09-21 08:00:19 发布

阅读量147

点赞数

文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/qq_52731478/article/details/130357669

版权

Css动画原理

1.预先给元素设置关键帧(@keyframes)，并给每帧设置边偏移或大小等属性的改变
2.通过animation给元素设置动画
弊端：繁琐，没有回调

JS动画

1.设置setInterval或者setTimeout给元素设置每帧的边偏移或大小等属性的改变
弊端：关闭动画的时候需要设置变量接收；占用电脑资源较大

JS动画封装

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            background-color: var(--bg);
        }

    </style>
</head>
<body>
    <button onclick="clickFn()">开始动画</button>
    <div style="--bg:red;">1</div>
    <div style="--bg:orange;">2</div>
    <div style="--bg:greenyellow;">3</div>
    <div style="--bg:yellow;">4</div>
    <div style="--bg:aqua;">5</div>

    <script>
        let divs = document.querySelectorAll('div')//伪数组
        let div_arr=Array.from(divs)               //转真实数组
        

        function myAnimatation(obj,target,interval,callback){
            clearInterval(obj.timer)        //清除定时器
            obj.timer=setInterval(()=>{
                if(obj.offsetLeft<target){
                    obj.style.marginLeft = (obj.offsetLeft + 1) +'px'
                }
                else{
                    clearInterval(obj.timer)
                    console.dir(div_arr)
                    callback&&callback(obj.pindex)      //判断是否存在回调函数，如果存在执行该回调函数
                }
            },interval)
        }
                    
        for (let j = 0; j < div_arr.length-1; j++) {
            if(j==div_arr.length-2){
                div_arr[j].pindex=j+1
                myAnimatation(div_arr[j],(j+1)*100,j*5,function(j){
                    alert('第'+j+'个盒子执行完毕')
                })
            }
            else{
                myAnimatation(div_arr[j],(j+1)*100,j*5)
            }
        }
        
        function clickFn(){
            myAnimatation(div_arr[div_arr.length-1],500,5)
        }
        
    </script>
</body>
</html>

在这里插入图片描述

缓动动画

本质上来说是改变步长值，因此改变匀速的效果
关键代码
let 步长= (最终距离-元素当前位置) / int
int越大，运动越慢

<!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>Document</title>
        <style>
            *{
               margin: 0;
               padding: 0;
            }
            .box{
                position: absolute;
               width: 200px;
               height: 200px;
               background-color: red;
            }
        </style>
    </head>
    <body>
        <button id="btnReset600">重新设定值为600</button>
        <div class="box"></div>
        <script>
            var box = document.querySelector(".box")
            
            /** 
               * 函数说明:动画
               * @author:qbb
               */        
            function my_animation(obj,target,intervar,callback){
                  clearInterval(obj.timer)
                  obj.timer = setInterval(() => {
                    var step = (target - obj.offsetLeft)/10
                    console.log(step);
                    step = step > 0 ? Math.ceil(step) : Math.floor(step)
                    
                    obj.style.left = (obj.offsetLeft + step) + "px"
                   
                    if(obj.offsetLeft == target){
                       clearInterval(obj.timer)
                       callback&&callback()
                    }
                  }, intervar);
            }
            // 调用动画函数
            my_animation(box,1200,20,null)
            
            var btnReset600 = document.querySelector("#btnReset600")
            btnReset600.addEventListener("click",function(){
                console.log(111);
                my_animation(box,600,20,null)
            })
        </script>
    </body>
</html>