JS实现匀速与减速缓慢运动的动画效果封装示例


Posted in Javascript onAugust 27, 2018

本文实例讲述了JS实现匀速与减速缓慢运动的动画效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>3water.com JS匀速/减速运动</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1 {
      width: 100px;
      height: 100px;
      background-color: pink;
      margin-top: 10px;
      position: relative;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-top: 10px;
      position: relative;
    }
  </style>
</head>
<body>
<button>匀速移动</button>
<button>减速移动</button>
<div class="box1" ></div>
<div class="box2" ></div>
<script>
  // 动画原理 = 盒子位置 + 步长。
  //   1.闪动。 (瞬间到达)
  //   2.匀速。 (每次走一样距离)
  //   3.缓动。 (开始特快越走越慢,步长越来越小)
  //        (类似刹车,电梯停止,压缩弹簧...)
  // 好处:
  //   1.有非常逼真的缓动效果,实现的动画效果更细腻。
  //   2.如果不清除定时器,物体永远跟着目标在移动。
  var box1 = document.getElementsByClassName("box1")[0];
  var box2 = document.getElementsByClassName("box2")[0];
  var but1 = document.getElementsByTagName("button")[0];
  var but2 = document.getElementsByTagName("button")[1];
  console.log(box1.offsetLeft);
  but1.onclick = function () {
    animate1(box1,200);
  }
  but2.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";
      //目标值和当前值只差如果小于步长,那么就不能在前进了
      //因为步长有正有负,所有转换成绝对值来比较
      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);
  }
</script>
</body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,可得到如下运行效果:

JS实现匀速与减速缓慢运动的动画效果封装示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
jQuery 使用手册(二)
Sep 23 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
在Vue中使用antv的示例代码
Jun 29 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 #Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 #Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 #Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 #Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 #Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 #Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 #Javascript
You might like
第六节--访问属性和方法
2006/11/16 PHP
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
js异或加解密效果代码
2008/06/25 Javascript
js option删除代码集合
2008/11/12 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
简单了解微信小程序的目录结构
2019/07/01 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
js实现无缝轮播图
2020/03/09 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
python抓取网页中的图片示例
2014/02/28 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
Django的信号机制详解
2017/05/05 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
店面出租协议书范本
2014/11/28 职场文书
2014年实验室工作总结
2014/12/03 职场文书
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL