运动

原创于 2020-06-13 21:15:12 发布 · 143 阅读

CC 4.0 BY-SA版权

本文探讨了动画图像的基本原理，指出18帧是人类视觉能识别的最小时间间隔。通过实例讲解如何使用JavaScript控制div元素的动画效果，解决动画运行、停止及速度控制等问题，确保动画流畅且可控。

动画图像
原理：能够识别的最小的时间间隔是18帧。
动画：只需要让动画的切换时间间隔大于18帧，一般情况下电影院里面放映的电影24帧。

简单运送，让一个div从左向右开始运动
1、停不下来
2、当速度取某些值的时候停不下来的问题
3、到达目的值以后，点击还会继续往前运动
if…else 将运动和停止分开
4、重复点击按钮，速度加快
保证只有一个定时器
每次启动定时器之前，先将上一次定时器关闭
在这里插入图片描述

 var oBtn = document.getElementById("btn1");
          var oDiv = document.getElementById("div1");
          var speed = 7;
          var timer = null;
          oBtn.onclick = function(){
              //4
              clearInterval(timer);
              timer = setInterval(function(){
                  
                  //1与2
                  if(oDiv.offsetLeft>=500){
                      clearInterval(timer);
                      //3
                  }else{
                    oDiv.style.left = oDiv.offsetLeft + speed + "px";
                  }
                  
              },30);
          }