手把手教你用js写动画

在前端开发中，动画效果往往能够提升用户体验和界面交互性。本文将手把手地教你使用 JavaScript 来实现常见的动画效果。

前置知识

在学习本文之前，需要掌握以下基础知识：

• HTML 和 CSS：了解 HTML 标记和 CSS 样式的基本语法和概念。
• JavaScript：熟悉 JavaScript 的基本语法和一些常见的 API。

实现动画的方式

实现动画效果有多种方式，其中比较常见的方式有以下几种：

1. 使用 CSS3 的 transition、animation 属性；
2. 使用 CSS3 的 transform 属性；
3. 使用 JavaScript 定时器（setInterval、setTimeout）；
4. 使用 JavaScript 操作 DOM 元素的样式属性。

在本文中，我们主要介绍最后一种方式，即使用 JavaScript 操作 DOM 元素的样式属性来实现动画效果。

实现过程

下面分别介绍如何使用 JavaScript 来实现平移、缩放和旋转三种常见的动画效果。

平移动画

平移动画是指将一个元素沿着特定的轴线（水平或垂直）移动一段距离。这可以通过改变元素的 left 或 top 属性来实现。

下面是一个简单的平移动画示例：

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 0;
  top: 0;
}

const box = document.querySelector('.box');
let left = 0;
setInterval(() => {
  left += 10;
  box.style.left = left + 'px';
}, 100);

在上面的示例中，我们使用 setInterval 函数每隔 100 毫秒将 box 元素向右移动 10 像素，直到离开屏幕为止。

缩放动画

缩放动画是指将一个元素按照特定的比例进行放大或缩小。这可以通过改变元素的 width 或 height 属性来实现。

下面是一个简单的缩放动画示例：

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 0;
  top: 0;
}

const box = document.querySelector('.box');
let scale = 1;
setInterval(() => {
  scale += 0.1;
  box.style.transform = `scale(${scale})`;
}, 100);

在上面的示例中，我们使用 setInterval 函数每隔 100 毫秒将 box 元素按照 1.1 的比例进行放大，直到达到原始大小的两倍为止。

旋转动画

旋转动画是指将一个元素以某一点为中心进行旋转。这可以通过改变元素的 transform 属性来实现。

下面是一个简单的旋转动画示例：

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 0;
  top: 0;
}

const box = document.querySelector('.box');
let angle = 0;
setInterval(() => {
  angle += 10;
  box.style.transform = `rotate(${angle}deg)`;
}, 100);

在上面的示例中，我们使用 setInterval 函数每隔 100 毫秒将 box 元素以左上

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43134