编写高效 JavaScript动画 使用定时器技巧和圆周运动

定时器：JavaScript 提供了两个定时器函数：setTimeout 和 setInterval。通过设置定时器，可以在指定的时间间隔执行代码来创建动画效果。

1、setTimeout: setTimeout函数用于在指定的时间后执行一次代码。它接受两个参数：要执行的代码和延时的时间（以毫秒为单位）。例如，

setTimeout(function(){ ... }, 1000) 

将在延时1秒后执行代码。

2、setInterval: setInterval函数用于以固定的时间间隔循环执行代码。它接受两个参数：要执行的代码和时间间隔（以毫秒为单位）。例如，

setInterval(function(){ ... }, 5000) 

将每隔5秒执行一次代码

在使用定时器时，需要注意性能和用户体验。过多或过频的定时器任务可能会影响网页性能，而过长的定时器延时可能会导致用户等待时间过长。因此，合理地使用和管理定时器非常重要。

下面将展示一个JavaScript通过定时器移动方块：

代码如下：

<head>
    <title>js动画</title>
    //CSS内容
    <style>
        .f {
            width: 500px;
            height: 500px;
            border: 1px solid rebeccapurple;
            position: relative;
        }

        .z {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            position: absolute;

        }
    </style>
</head>

<body>
    <div class="f">
        <div id="z" class="z">

        </div>
    </div>
</body>
<script>
    //获取
    let z = document.getElementById('z')
    let x = 0, y = 0
    //定时器
    setInterval(() => {
        if(x>=400 || y>=400){
            clearInterval(dsq)
        }
        x++,
        y++
        z.style.top = y + 'px'
        z.style.left = x + 'px'
    }, 10)



</script>

效果图如下：

 

 下面是 圆周运动代码展示：

//只展示JavaScript部分:
<script>
    let r = 200, x0 = 250, y0 = 250;
    let b1 = document.getElementById('b1')
    //定义域x，y表示小球的运动轨迹坐标
    let x = 50, y = 50;
     function start1() {
        //上半圆
        let sbr=setInterval(() => {

            x++
            y = -Math.sqrt(Math.pow(r, 2) - Math.pow(x - x0, 2)) + y0
            b1.style.top = y - 50 + 'px'
            b1.style.left = x - 50 + 'px'
            if (x == 450 && y == 250) {
                //取消上半圆的定时器
                clearInterval(sbr)
                //开启下半圆的定时器
                let xbr = setInterval(() => {
                    x--
                    y = Math.sqrt(Math.pow(r, 2) - Math.pow(x - x0, 2)) + y0
                    b1.style.top = y - 50 + 'px'
                    b1.style.left = x - 50 + 'px'
                    if(x==50 && y==250){
                        //取消下半圆的定时器
                        clearInterval(xbr)
                        //开启上半圆定时器
                        start1() //递归
                    }
                })
            }
        }, 10)
    } 

   
</script>

效果图展示

总结JavaScript 可以使用 DOM 操作、定时器、CSS3 动画、Canvas 等技术来创建动画效果。同时，JavaScript 动画库和框架也可以帮助简化动画的开发过程。