简单js动画效果图

要创建简单的JavaScript动画效果，可以利用requestAnimationFrame方法来实现平滑的动画。以下是一个基础示例，实现了一个方块在页面上从左向右移动的动画效果：

HTML部分：

<!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>
        #box {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 100px;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script src="animation.js"></script>
</body>

</html>

JavaScript部分（animation.js）：

const box = document.getElementById('box');
let position = 0;

function animate() {
    if (position < window.innerWidth - 50) {
        position++;
        box.style.left = position + 'px';
        requestAnimationFrame(animate);
    }
}

animate();

基础概念：

requestAnimationFrame：这是一个浏览器提供的API，用于在下一次重绘之前调用指定的函数来更新动画。它比使用setInterval或setTimeout更适合创建流畅的动画，因为它会根据浏览器的刷新率自动调整动画帧率。

优势：

性能优化：与setInterval相比，requestAnimationFrame会在浏览器准备重绘屏幕时调用动画函数，这样可以避免不必要的计算，节省资源。
自动适配屏幕刷新率：它会根据显示器的刷新频率来调用动画函数，使得动画更加平滑。

应用场景：

页面元素的简单动画，如移动、缩放、旋转等。例如菜单的展开和收起动画、图片轮播时的滑动效果等。

如果在动画过程中遇到元素跳动或者卡顿的问题：

可能原因：
- 动画计算过于复杂，在每一帧中花费了太多时间，导致浏览器无法及时完成渲染。
- CSS属性设置不当，例如使用了会引起重排（reflow）的属性进行动画，像改变width、height、margin等可能会频繁触发重排的属性。
解决方法：
- 简化动画计算逻辑，尽量减少每一帧的计算量。
- 对于简单的位移动画，优先使用transform属性（如translateX、translateY），因为transform属性通常不会引起重排，并且可以利用GPU加速，提高动画性能。例如将上述代码中的left属性改为transform属性：
- 对于简单的位移动画，优先使用transform属性（如translateX、translateY），因为transform属性通常不会引起重排，并且可以利用GPU加速，提高动画性能。例如将上述代码中的left属性改为transform属性：