1、setTimeout 和 setInterval：
setTimeout(function, delay)：在指定的延迟后执行一次函数。
setInterval(function, interval)：每隔指定的时间间隔重复执行函数。
这两个函数可以用来创建简单的动画，但可能不够精确，因为它们受到浏览器重绘、其他代码运行和许多其他因素的影响。
2、requestAnimationFrame：
requestAnimationFrame(callback)：告诉浏览器你希望执行一个动画，并请求浏览器在下次重绘之前调用指定的回调函数来更新动画。
这个方法比setTimeout和setInterval更精确、更高效，因为它是由浏览器专门为动画设计的，并且会在浏览器下一次重绘之前执行回调，确保动画的流畅性。
3、CSS动画与JS结合：
- 使用CSS3的transition和animation属性可以创建复杂的动画效果。
- 通过JS动态改变元素的CSS属性，可以触发CSS动画。
4、Canvas 和 WebGL：
- 对于更复杂的2D或3D动画，可以使用HTML5的<canvas>元素或WebGL。
- 这些技术允许你通过JavaScript直接绘制图形，并创建高度自定义的动画效果。
5、动画库：
- 有许多现成的JavaScript动画库，如GSAP (GreenSock Animation Platform)、anime.js、Velocity.js等，它们提供了丰富的API和优化的性能，使动画创建更加简单和高效。
6、性能优化：
- 在创建动画时，需要注意性能问题，避免引起浏览器的重排（reflow）或重绘（repaint），这可以通过使用transform属性而不是top、left等属性来移动元素，以及减少DOM操作等方式来实现。
7、动画的缓动函数：
- 缓动函数可以控制动画的速度和流畅度，ease-in”、“ease-out”、“ease-in-out”等，它们可以使动画看起来更加自然和逼真。
下面是一个简单的使用requestAnimationFrame的动画示例：
let start = null;
let element = document.getElementById('animatedElement'); // 假设你有一个ID为'animatedElement'的HTML元素
function animate(timestamp) {
if (!start) start = timestamp;
let progress = timestamp - start;
element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)'; // 移动元素最多200px
if (progress < 2000) { // 动画持续2秒
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);在这个例子中，animate函数会在浏览器的每一次重绘之前被调用，并根据经过的时间来移动一个HTML元素，动画会在2秒后停止。