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 相关文章推荐
网上抓的一个特效
May 11 Javascript
jQuery技巧总结
Jan 01 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
php调用mysql数据 dbclass类
2011/05/07 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
JS功能代码集锦
2016/05/04 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
Python利用ansible分发处理任务
2015/08/04 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
django 发送手机验证码的示例代码
2018/04/25 Python
css sprite简单实例
2016/05/23 HTML / CSS
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
美国在线工具商店:Acme Tools
2018/06/26 全球购物
C++的几个面试题附答案
2016/08/03 面试题
自我评价范文分享
2014/01/04 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
主要负责人任命书
2014/06/06 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
安全生产月标语
2014/10/07 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
签证工作证明模板
2015/06/15 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python