javascript匀速动画和缓冲动画详解


Posted in Javascript onOctober 20, 2016

关于网页中的动画,在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="move1.js"></script> 
</body> 
</html>

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?3:-3; 
    ele.timer = setInterval(function () { 
      //在执行之前就获取当前值和目标值之差 
      var val = target - ele.offsetLeft; 
      ele.style.left = ele.offsetLeft + speed + "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?Math.ceil(step):Math.floor(step); 
      //动画原理: 目标位置 = 当前位置 + 步长 
      console.log(step); 
      ele.style.left = ele.offsetLeft + step + "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清除定时器。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
js设置和获取自定义属性的方法
Oct 20 #Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 #Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 #Javascript
详解javascript事件绑定使用方法
Oct 20 #Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 #Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 #Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 #Javascript
You might like
PHP4实际应用经验篇(7)
2006/10/09 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
Ext 今日学习总结
2010/09/19 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
Python抓取京东图书评论数据
2014/08/31 Python
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
医学生实习自我鉴定
2013/09/27 职场文书
咨询公司各岗位职责
2013/12/02 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
公司地址变更通知
2015/04/25 职场文书
无罪辩护词范文
2015/05/21 职场文书
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
python单元测试之pytest的使用
2021/06/07 Python
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL