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引用对象的方法
Jan 11 Javascript
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
javascript 最常用的10个自定义函数[推荐]
Dec 26 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 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
php MySQL与分页效率
2008/06/04 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
用js的for循环获取radio选中的值
2013/10/21 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
Python中几种导入模块的方式总结
2017/04/27 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
护士自我介绍信
2014/01/13 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
户外拓展训练感想
2015/08/07 职场文书