Javascript基础动画教程

在本文中，我们将详细介绍Javascript动画的基础知识。这些知识将帮助你创建直观易懂的动画效果，使你的网页更加生动活泼。

动画基础知识

在Javascript动画中，我们通常使用以下基础知识：

1. 定时器

定时器在Javascript动画中起到很重要的作用。使用定时器，我们可以按照预定的时间间隔执行特定的代码。一般来说，Javascript中常用的定时器有 setTimeout() 和 setInterval() 函数。

下面是使用 setInterval() 函数创建一个简单的动画示例：

let div = document.getElementById("box");
let pos = 0;
setInterval(move, 10);

function move() {
  pos++;
  div.style.left = pos + "px";
}

在上面的代码中，我们首先获取了id为"box"的DOM元素，并将初始位置存储在变量 pos 中。接着，我们使用 setInterval() 函数执行 move() 函数，该函数每10毫秒执行一次。在 move() 函数中，我们通过自增 pos 来改变元素的位置，并使用CSS的 left 属性改变元素的位置。

2. CSS Transitions 和 Animations

CSS Transitions 和 Animations 是CSS3特性中的两个重要功能，它们可以用来创建基于CSS的动画效果。

下面是一个使用CSS Transitions 创建的简单动画示例：

div {
  transition: all 2s ease-in-out;
}
div:hover {
  transform: scale(2);
}

在上面的代码中，我们为一个DIV元素添加了CSS Transitions。当鼠标悬停在元素上时，我们使用CSS属性 transform 将元素的尺寸放大2倍。鼠标移开时，元素会按照预定的时间间隔逐渐恢复到原始尺寸。 transition 属性指定了动画的持续时间为2秒，并指定了逐渐放大和缩小的动画效果。

下面是一个使用CSS Animations 创建的简单动画示例：

div {
  animation-name: example;
  animation-duration: 4s
}

@keyframes example {
  from {transform: scale(1);}
  to {transform: scale(2);}
}

在上面的代码中，我们使用 animation-name 属性指定了动画名称，并使用 animation-duration 属性指定了动画持续时间为4秒。 @keyframes 指令定义了动画的关键帧， from 表示动画开始时， to 表示动画结束时。通过定义从 scale(1) 到 scale(2) 的变化，我们创建了一个逐渐放大的动画效果。

动画效果进阶

使用以上基础知识，我们可以创建一些很不错的动画效果。但要想创建更为出色的效果，则需要进一步掌握其他技巧。

1. 使用 requestAnimationFrame()

requestAnimationFrame() 函数是另一个常用于创建动画效果的函数。和 setInterval() 函数类似， requestAnimationFrame() 函数也可以在指定时间间隔内执行特定的代码，但它执行的方式更为流畅，能更好地优化用户体验。

使用 requestAnimationFrame() 函数的示例代码如下：

let div = document.getElementById("box");
let pos = 0;
let id = null;

function move() {
  pos++;
  div.style.left = pos + "px";
  if (pos < 200) {
    id = requestAnimationFrame(move);
  }
}

id = requestAnimationFrame(move);

在上面的代码中，我们使用 requestAnimationFrame() 函数代替了 setInterval() 函数。当 pos 变量增加到200时，动画效果停止。除此之外，上述代码与前面使用 setInterval() 函数的示例代码基本相同。

2. 创建复杂动画

使用 CSS3 和 Javascript，我们可以组合创建更为复杂的动画效果。例如，我们可以组合使用 transform 和 transition 属性来创建更为生动的动画效果。下面是一个组合使用 css 与 js 的动画示例：

let div = document.getElementById("box");
let pos = 0;
let id = null;

function move() {
  pos++;
  div.style.transform = "translateX(" + pos + "px)";
  if (pos < 200) {
    id = requestAnimationFrame(move);
  }
}

// 使元素在初始位置消失
div.style.opacity = 0;

// 在一段时间后开始动画
setTimeout(function() {
  div.style.opacity = 1;
  id = requestAnimationFrame(move);
}, 1000);

在上面的代码中，我们首先将元素的 opacity 属性设置为0，使元素初始时不可见。在一段时间后，我们将元素的 opacity 属性设置为1，表示元素可以显示。接着，我们使用 transform 属性和 requestAnimationFrame() 函数创建动画效果。

总结

本文中，我们学习了Javascript动画的基础知识。我们介绍了定时器、CSS Transitions 和 Animations、requestAnimationFrame() 函数、复杂动画等技术，这些技术可以帮助你创建更为出色的动画效果。希望这些知识对你的前端开发工作有所帮助。