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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
angularjs实现简单的购物车功能
Sep 21 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
vue导出html、word和pdf的实现代码
Jul 31 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
js实现验证码功能
Jul 24 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/10/09 PHP
给php新手谈谈我的学习心得
2007/02/25 PHP
批量修改RAR文件注释的php代码
2010/11/20 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
Python 高级专用类方法的实例详解
2017/09/11 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
python的移位操作实现详解
2019/08/21 Python
python 内置函数汇总详解
2019/09/16 Python
python opencv进行图像拼接
2020/03/27 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
python中xlutils库用法浅析
2020/12/29 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
村安全生产责任书
2014/08/25 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
实习班主任自我评价
2015/03/11 职场文书
自信主题班会
2015/08/14 职场文书
人力资源部工作计划
2019/05/14 职场文书
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers