下面我将详细讲解“JS动画效果代码3”的完整攻略。

JS动画效果代码3

简介

本示例是一个用 JS 实现的动画效果，主要通过 JS 的 setInterval() 函数以及 CSS3 的 transform 属性来实现动画效果。

实现步骤

步骤一：编写 HTML 结构

在页面中添加一个 <div> 元素，用来承载动画元素。例如：

<div id="wrapper">
  <div class="circle"></div>
</div>

在上面的代码中，id 为 wrapper 的 <div> 元素用来承载动画元素，class 为 circle 的 <div> 元素就是动画元素。

步骤二：编写 CSS 样式

为动画元素 .circle 添加样式，使其呈现圆形，并设置默认的 transform 样式。例如：

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(0px) translateY(0px);
}

其中，transform 样式的初始值为 translateX(0px) translateY(0px)，表示动画元素的初始位置在左上角。

步骤三：编写 JS 代码

定义两个变量 x 和 y，它们的初始值都为 0。使用 setInterval() 函数来间隔一段时间执行一次动画函数，代码如下：

var x = 0,
    y = 0;

setInterval(function() {
  move();
}, 10);

在动画函数中，先获取动画元素 .circle 的位置，然后将 transform 样式的值设为新的位置，实现动画效果。代码如下：

function move() {
  var circle = document.querySelector('.circle'),
      wrapper = document.querySelector('#wrapper'),
      maxX = wrapper.clientWidth - circle.offsetWidth,
      maxY = wrapper.clientHeight - circle.offsetHeight;

  if (x < maxX) {
    x += 1;
  }

  if (y < maxY) {
    y += 1;
  }

  circle.style.transform = "translateX(" + x + "px) translateY(" + y + "px)";
}

在上面的代码中，首先获取了包裹动画元素的 div 的宽度和高度，然后获取了 .circle 元素的宽度和高度。计算得到 maxX 和 maxY 分别为 .circle 可以移动的最大横向和纵向距离。

在每次执行动画函数时，如果 x 或 y 的值小于 maxX 或 maxY，则将其加 1。然后通过计算得到一个新的 transform 样式的值，将其赋给 .circle 元素，从而实现动画效果。

步骤四：运行代码

将上述代码复制到 HTML 文件中，并打开浏览器运行即可。动画元素将会在页面中移动，并且在到达边缘时反弹回来。

示例说明

示例一：修改动画元素的大小

如果想要修改动画元素的大小，只需要修改 .circle 元素的 width 和 height 样式即可。例如，将 width 和 height 的值都设置为 100px，则动画元素的大小将变为正方形，并向四周扩展。

示例二：修改动画速度

如果想要修改动画元素的速度，只需要将 setInterval() 函数中的时间间隔 10 修改为另外一个值即可。例如，将时间间隔改为 5，则动画元素的速度将加快。同时，在动画函数中也可以调整 x 和 y 值的增加量，从而改变动画的速度或方向。