核心思想：

(1)相对于匀速移动，盒子每次移动的步长都是变化的，公式：盒子位置=盒子本身位置+（目标位置-盒子本身位置）/10

(2)在盒子位置与目标距离小于10px时，其步长必然是小数，又由于offsetLeft的变态的逢4进值，那么只要小数点的值小于4就会停滞不前

(3)所以要么往上取整，要么往下取整

1、Math.ceil

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         div {
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: pink;
  11.             position: absolute;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16. <button>点击</button>
  17. <div></div>
  18. <script>
  19.     var btn = document.getElementsByTagName("button")[0];
  20.     var divEle = document.getElementsByTagName("div")[0];
  21.     var timer = null;
  22.     btn.onclick = function () {
  23.         clearInterval(timer);
  24.         timer = setInterval(function () {
  25.             //当目标距离与实际距离小于10px时，会以1px的速度前进
  26.             var step = (400 - divEle.offsetLeft) / 10;
  27.             step = Math.ceil(step);
  28.             divEle.style.left = divEle.offsetLeft + step + "px";
  29.             if (Math.abs(400 - divEle.offsetLeft) <= Math.abs(step)) {
  30.                 divEle.style.left = "400px";
  31.                 clearInterval(timer);
  32.             }
  33.         }, 15)
  34.     }
  35. </script>
  36. </body>
  37. </html>

2、Math.floor

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         div {
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: pink;
  11.             position: absolute;
  12.             left: 400px;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17. <button>点击</button>
  18. <div></div>
  19. <script>
  20.     var btn = document.getElementsByTagName("button")[0];
  21.     var divEle = document.getElementsByTagName("div")[0];
  22.     var timer = null;
  23.     btn.onclick = function () {
  24.         clearInterval(timer);
  25.         timer = setInterval(function () {
  26.             //当目标距离与实际距离小于10px时，会以1px的速度前进
  27.             var step = (0 - divEle.offsetLeft) / 10;
  28.             step = Math.floor(step);
  29.             divEle.style.left = divEle.offsetLeft + step + "px";
  30.             if (Math.abs(0 - divEle.offsetLeft) <= Math.abs(step)) {
  31.                 divEle.style.left = 0;
  32.                 clearInterval(timer);
  33.             }
  34.         }, 15)
  35.     }
  36. </script>
  37. </body>
  38. </html>

3、封装

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         div {
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: pink;
  11.             position: absolute;
  12.             left: 0px;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17. <button>回到起点</button>
  18. <button>回到200</button>
  19. <button>回到400</button>
  20. <div></div>
  21. <script>
  22.     var btn1 = document.getElementsByTagName("button")[0];
  23.     var btn2 = document.getElementsByTagName("button")[1];
  24.     var btn3 = document.getElementsByTagName("button")[2];
  25.     var divEle = document.getElementsByTagName("div")[0];
  26.     btn1.onclick = function () {
  27.         animate(divEle, 0);
  28.     }
  29.     btn2.onclick = function () {
  30.         animate(divEle, 200);
  31.     }
  32.     btn3.onclick = function () {
  33.         animate(divEle, 400);
  34.     }
  35.  
  36.     function animate(ele, target) {
  37.         clearInterval(ele.timer);
  38.         ele.timer = setInterval(function () {
  39.             var step = (target - ele.offsetLeft) / 10;
  40.             step = step > 0 ? Math.ceil(step) : Math.floor(step);
  41.             ele.style.left = ele.offsetLeft + step + "px";
  42.             if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
  43.                 ele.style.left = target + "px";
  44.                 clearInterval(ele.timer);
  45.             }
  46.         }, 15);
  47.     }
  48. </script>
  49. </body>
  50. </html>

JS——缓动动画的更多相关文章

  1. JS基础知识——缓动动画

    基于距离的缓动动画 原理:设定起始位置  start 和终止位置 end,变化会越来越慢. 公式:start=start+(end-start)/10;     这个10不是固定的,想分成多少份就分成 ...

  2. js简单动画：匀速动画、缓动动画、多物体动画以及透明度动画

    主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现: 1.匀速动画(以物体左右匀速运动为例) ...

  3. js off 缓动动画

    动画也有很多种,一起来学习,缓动动画吧 缓动动画 1.缓动动画原理=盒子位置+(目标盒子位置-现在盒子位置)/10 2.步长越来越小 3.让步长越来越小的公式      步长=(目标位置-本身位置)/ ...

  4. JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  5. jQuery-1.9.1源码分析系列（十五） 动画处理——缓动动画核心Tween

    在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. ...

  6. 背水一战 Windows 10 (15) - 动画: 缓动动画

    [源码下载] 背水一战 Windows 10 (15) - 动画: 缓动动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 缓动动画 - easing 示例演示缓动(easing ...

  7. WPF界面设计技巧（7）—模拟电梯升降的缓动动画

    原文:WPF界面设计技巧(7)-模拟电梯升降的缓动动画 如同Flash一样,WPF的亮点之一也在于其擅于表现平滑的动画效果,但以移动动画来说,仅凭简单的起始位置.目标位置,所产生的动画仍会非常生硬,这 ...

  8. Windows Phone开发（42）：缓动动画

    原文:Windows Phone开发(42):缓动动画 前面在讨论关键帧动画的时候,我有意把几个带缓动动画的关键帧动画忽略掉,如EasingColorKeyFrame.EasingDoubleKeyF ...

  9. 重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画

    原文:重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画 [源码下载] 重新想象 Windows 8 Store Apps (19) - 动画 ...

随机推荐

  1. kendo grid 报错：length

    其实是:events中的{}Onsave的问题,把events整个注释掉就好了

  2. golang 中timer,ticker 的使用

    写一个程序, 5s, 10s后能定时执行一个任务,同时能不停的处理来的消息. ------------------------------------------------------------- ...

  3. 假设写一段代码引导PC开机这段代码是 ? Here is a tiny &quot;OS&quot; :-D

    Hello world -- OS 我找到了华科绍志远博士的相关代码,发现他依据MIT的JOS的boot.S 稍作改动.然后单独剥离出来,能够非常好玩~ 资料下载地址: http://download ...

  4. scikit-learn： isotonic regression（保序回归，非常有意思，仅做知识点了解，但差点儿没用到过）

    http://scikit-learn.org/stable/auto_examples/plot_isotonic_regression.html#example-plot-isotonic-reg ...

  5. android中ping命令的实现

    /** * 推断Ping 网址是否返回成功 *  * @param netAddress * @return */ public static String isPingSuccess(int pin ...

  6. 并发与并行(concurrency vs parallesim)

    最近对计算机中并发(concurrency)和并行(parallesim)这两个词的区别很迷惑,将搜索到的相关内容整理如下. http://www.vaikan.com/docs/Concurrenc ...

  7. xshell暂停串口的打印【转】

    本文转载自:http://www.360doc.com/content/16/0311/10/7821691_541261680.shtml xshell不想CRT可以断开而停止打印,看这停下的打印信 ...

  8. poj3421 X-factor Chains——分解质因数

    题目:http://poj.org/problem?id=3421 好久没有独立A题了...做点水题还是有助于提升自信心的: 这题就是把 x 质因数分解,质因数指数的和 sum 就是最长的长度,因为每 ...

  9. bzoj1018

    线段树分治+并查集 线段树本身就是分治结构,碰见这种带删除修改的题目是再合适不过的,我们对于每段修改区间在线段树上打标记,每次路过就进行修改,叶子结点表及答案,先把所有修改在线段树上标记,然后dfs就 ...

  10. IDEA Spark Streaming 操作(套接字流)

    import org.apache.spark.SparkConf import org.apache.spark.streaming.{Seconds, StreamingContext} obje ...