JavaScript 利用定时器setInterval实现不断来回移动碰撞动画

本文链接：https://blog.youkuaiyun.com/github_36262442/article/details/82788288

本文介绍了一种使用CSS和JavaScript实现的基本动画效果。通过设置块元素的位移，使一个圆球在矩形边界内沿X、Y轴来回弹跳。关键代码包括CSS样式设置和定时器控制的动画逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

该动画的实现主要利用了css中的style以及setInterval，原理：定时运行设置块元素的位移（style.left、style.top）。

CSS（colorstyle.css）

/*矩形边框的样式设置*/
#rectangle {
  width: 500px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto;
  position: relative;
}
/*圆球的CSS设置*/
#circle {
  width: 30px;
  height: 30px;
  background: red;
  border-radius: 50%;
  position: absolute;
}

JS（anim.js）

/* eslint-disable no-unused-vars */
//获取红色圆球 circle
var circle=document.getElementById('circle');
function startAnim() {
  //X的偏移量
  var offsetX = 0;
  //y的偏移量
  var offsetY = 0;
  //标识X坐标的行走方向
  var isAddX = true;
  //标识Y坐标的行走方向
  var isAddY = true;
  //移动矢量
  var value = 10;

  //定义水平方向上的移动
  function xmove() {
    if (isAddX) {
      offsetX += value;
      if (offsetX >= 470) {
        isAddX = false;
      }
    } else {
      offsetX -= value;
      if (offsetX <= 0) {
        isAddX = true;
      }
    }
    circle.style.left = offsetX + 'px';
  }

  //定义竖直方向上的移动
  function ymove() {
    if (isAddY) {
      offsetY += value;
      if (offsetY >= 270) {
        isAddY = false;
      }
    } else {
      offsetY -= value;
      if (offsetY <= 0) {
        isAddY = true;
      }
    }
    circle.style.top = offsetY + 'px';
  }
  //设置定时器，同时运行X、Y坐标的移动
  setInterval(function() {
    xmove();
    ymove();
  }, 100);
}

引入外联css：

<link rel="stylesheet" href="css/colorstyle.css">

引入外联js：

<script src="js/anim.js"></script>

HTML定义<div>块元素：

  <!--矩形边框-->
  <div id="rectangle">
    <!--圆球-->
    <div id="circle"></div>
  </div>

定义按钮调用开始动画函数：

<button onclick="startAnim()">开始动画</button>

最终效果：