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 相关文章推荐
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
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
MySQL中create table语句的基本语法是
2007/01/15 PHP
PHP 中文处理技巧
2010/04/25 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
简述php环境搭建与配置
2016/12/05 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
css图片自适应大小
2007/11/28 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
Python Requests 基础入门
2016/04/07 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
python素数筛选法浅析
2018/03/19 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
python仿抖音表白神器
2019/04/08 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
大学生个人简历自荐信
2015/03/06 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
人民币符号
2022/02/17 杂记
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android