JS-动画

**JS 动画**

JavaScript 是一种非常强大的语言，能够让网页变得更加生动和互动。其中一个重要的方面就是动画。通过 JavaScript，我们可以创建各种类型的动画效果，从简单的滑动到复杂的旋转、缩放等。

在本文中，我们将介绍 JS 动画的基本概念、API 和实例代码示例。

###1. 动画的基本概念动画是指网页元素在一定时间内进行变化的过程。例如，一个按钮从未激活状态变为激活状态，或者一个图片从静止状态开始旋转等。

JS 动画通常涉及以下几个方面：

* **定时器（Timer）**：用于控制动画的播放速度和持续时间。
* **元素位置和尺寸**：决定了动画中元素的起始和结束位置，以及尺寸的变化。
* **样式属性**：例如颜色、背景、边框等，可以在动画过程中进行改变。

###2. 动画 APIJavaScript 提供了几个用于创建动画的 API：

* **requestAnimationFrame（RAF）**：这是一个专门用于动画的 API，能够让浏览器优化动画的性能。
* **setTimeout() 和 setInterval()**：这两个函数可以用来实现简单的定时器效果，但不如 RAF 效果好。

###3. 实例代码示例####1. 简单的滑动动画

javascript// 获取元素const elem = document.getElementById('myElem');

// 定义动画函数function animate() {
 // 获取当前时间 const now = Date.now();
 // 计算进度 const progress = (now - startTime) / duration;
 // 根据进度改变元素位置 if (progress < 1) {
 elem.style.top = `${Math.floor(progress * height)}px`;
 } else {
 elem.style.top = '0px';
 }
}

// 初始化变量const startTime = Date.now();
const duration =1000; // 动画持续时间（ms）
const height = document.body.offsetHeight;
let intervalId;

// 开始动画intervalId = setInterval(animate,16); // 每帧执行 animate 函数// 停止动画function stopAnimation() {
 clearInterval(intervalId);
}

javascript// 获取元素const elem = document.getElementById('myElem');

// 定义动画函数function rotate() {
 // 根据当前时间改变旋转角度 const now = Date.now();
 const angle = (now /1000) *360;
 elem.style.transform = `rotate(${angle}deg)`;
}

// 开始动画setInterval(rotate,16); // 每帧执行 rotate 函数

javascript// 获取元素const elem = document.getElementById('myElem');

// 定义动画函数function scale() {
 // 根据当前时间改变缩放尺寸 const now = Date.now();
 const scaleValue = (now /1000) *2;
 elem.style.transform = `scale(${scaleValue})`;
}

// 开始动画setInterval(scale,16); // 每帧执行 scale 函数