DDR爱好者之家

javascript匀速动画和缓冲动画详解
站长资源 2024/11/28 佚名
25 1538
DDR爱好者之家 Design By 杰米

关于网页中的动画，在css3中我们已经可以使用一些属性快速的做出来，但是有时候为了浏览器的兼容性我们还是需要使用js来制作网页中的动画。

使用js做动画最重要的一个函数就是setInterval函数，这里不再赘述，不懂可以直接百度用法。本文主要讲动画的原理已经在制作过程中的要点。

老规矩，先上代码，能直接看懂的可以节省时间。

html部分：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>move</title> 
  <link rel="stylesheet" href="move1.css"> 
</head> 
<body> 
  <input type="button" value="匀速移动" id="move1"> 
  <input type="button" value="渐变移动" id="move2"> 
  <div id="box1" class="box"></div> 
  <div id="box2" class="box"></div> 
  <script type="text/javascript" src="/UploadFiles/2021-04-02/move1.js">


css部分：







*{ 
  margin: 0px; 
  padding: 0px; 
} 
.box{ 
  width: 100px; 
  height: 100px; 
  background-color: green; 
  position: relative; 
  margin-top: 10px; 
} 





js部分：







/** 
 * Created by siri on 2016/9/10. 
 */ 
window.onload=function () { 
  var btn1 = document.getElementById('move1'); 
  var btn2 = document.getElementById('move2'); 
  var box1 = document.getElementById('box1'); 
  var box2 = document.getElementById('box2'); 
  btn1.onclick = function () { 
    animate1(box1,500); 
  } 
  btn2.onclick = function () { 
    animate2(box2,500); 
  } 
  //匀速动画 
  function animate1(ele,target){ 
    //要用定时器，先清除定时器 
    //一个盒子只能有一个定时器，这样儿的话，不会和其他盒子出现定时器冲突 
    //而定时器本身讲成为盒子的一个属性 
    clearInterval(ele.timer); 
    //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负 
    //目标值如果大于当前值取正，目标值如果小于当前值取负 
    var speed = target>ele.offsetLeft"px"; 
      //目标值和当前值只差如果小于步长，那么就不能再前进了 
      //因为步长有正有负，所有转换成绝对值来比较 
      console.log(val); 
      if(Math.abs(val)<=Math.abs(speed)){ 
        ele.style.left = target + "px"; 
        clearInterval(ele.timer); 
 
      } 
    },30); 
  } 
 
  //缓动动画封装 
  function animate2(ele,target) { 
    clearInterval(ele.timer); //清楚历史定时器 
    ele.timer = setInterval(function () { 
      //获取步长 确定移动方向(正负值) 步长应该是越来越小的，缓动的算法。 
      var step = (target-ele.offsetLeft)/10; 
      //对步长进行二次加工(大于0向上取整,小于0项下取整) 
      step = step>0"px"; 
      //检测缓动动画有没有停止 
      if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){ 
        ele.style.left = target + "px"; //直接移动指定位置 
        clearInterval(ele.timer); 
      } 
    },30); 
  } 
 
 
} 






html和css基本就是为了我们的js部分搭框架，不讲太多，要注意的是，一定要对全局的margin和padding清零，否则的话他在计算的时候初始的margin和padding会影响计算，从而导致有时候运动不停止的情况。


javascript部分代码的解析在源码中已经很详细了，下面主要讲解原理。




匀速运动：




通过setInterval函数我们控制每多少毫秒运动的距离，然后在快要到达指定位置的时候，判断步长（每多少毫秒运动的距离）和此时和目标位置的距离，如果步长大于此时和目标位置的距离，则直接定位到目标位置，这样做是为了避免步长和总距离不是整数倍关系而产生最后到达位置和目标位置有差值的错误。


缓冲运动：




缓冲运动的基本函数是和匀速运动一样的，只是缓冲运动的步长我们是通过和目标位置的距离来确定的，这样我们的步长是不断变小的，从而实现缓冲运动的效果。在确定步长的时候我们使用Math.ceil和Math.floor对步长值进行取整是为了避免出现小数，因为如果出现小数后面最后到达的位置肯定是和目标位置有误差的。




注意事项：在每次移动开始前一定要使用clearInterval清除定时器。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米