myMove()方法功能是什么？前端DOM位移动画实现代码解析

功能作用 #

该方法用于实现指定DOM元素的平移动画效果：调用后，页面中id为myAnimation的红色小方块，会从黄色父容器myContainer的左上角位置，沿右下方向匀速滑动，直到触达父容器右下角后自动停止。

逐行实现逻辑 #

• 元素获取
  首先通过document.getElementById("myAnimation")获取要执行动画的红色方块元素，存储到变量elem中。
• 状态初始化
  声明初始偏移量变量pos赋值为0，用来记录方块相对于父容器左上角的位移数值。
• 定时器启动
  调用setInterval(frame, 10)创建定时任务，设置每10毫秒执行一次frame函数，同时将定时器的唯一标识存入变量id，用于后续停止定时任务。
• 帧动画执行逻辑
  嵌套的frame函数是动画的核心执行单元，每次触发的逻辑如下：
  1. 终止判断：当pos等于350时调用clearInterval(id)销毁定时器，动画终止。这里350的取值是父容器宽高(400px)减去方块自身宽高(50px)得到的最大可偏移值，此时方块刚好处于父容器右下角，不会超出容器范围。
  2. 位移更新：未达到终止条件时，pos自增1，同时将方块的top和left样式属性设置为pos + 'px'，实现方块每次同时向下、向右移动1px的视觉效果。

注意事项 #

你提供的HTML触发代码<p>点击我</p>没有绑定事件，实际运行时需要修改为<p onclick="myMove()">点击我</p>，点击后才能触发动画效果。

内容的提问来源于stack exchange，提问作者Haise Sakaki