核心思想：

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

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

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

1、Math.ceil

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: pink;

            position: absolute;

        }

    </style>

</head>

<body>

<button>点击</button>

<div></div>

<script>

    var btn = document.getElementsByTagName("button")[0];

    var divEle = document.getElementsByTagName("div")[0];

    var timer = null;

    btn.onclick = function () {

        clearInterval(timer);

        timer = setInterval(function () {

            //当目标距离与实际距离小于10px时，会以1px的速度前进

            var step = (400 - divEle.offsetLeft) / 10;

            step = Math.ceil(step);

            divEle.style.left = divEle.offsetLeft + step + "px";

            if (Math.abs(400 - divEle.offsetLeft) <= Math.abs(step)) {

                divEle.style.left = "400px";

                clearInterval(timer);

            }

        }, 15)

    }

</script>

</body>

</html>

2、Math.floor

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: pink;

            position: absolute;

            left: 400px;

        }

    </style>

</head>

<body>

<button>点击</button>

<div></div>

<script>

    var btn = document.getElementsByTagName("button")[0];

    var divEle = document.getElementsByTagName("div")[0];

    var timer = null;

    btn.onclick = function () {

        clearInterval(timer);

        timer = setInterval(function () {

            //当目标距离与实际距离小于10px时，会以1px的速度前进

            var step = (0 - divEle.offsetLeft) / 10;

            step = Math.floor(step);

            divEle.style.left = divEle.offsetLeft + step + "px";

            if (Math.abs(0 - divEle.offsetLeft) <= Math.abs(step)) {

                divEle.style.left = 0;

                clearInterval(timer);

            }

        }, 15)

    }

</script>

</body>

</html>

3、封装

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: pink;

            position: absolute;

            left: 0px;

        }

    </style>

</head>

<body>

<button>回到起点</button>

<button>回到200</button>

<button>回到400</button>

<div></div>

<script>

    var btn1 = document.getElementsByTagName("button")[0];

    var btn2 = document.getElementsByTagName("button")[1];

    var btn3 = document.getElementsByTagName("button")[2];

    var divEle = document.getElementsByTagName("div")[0];

    btn1.onclick = function () {

        animate(divEle, 0);

    }

    btn2.onclick = function () {

        animate(divEle, 200);

    }

    btn3.onclick = function () {

        animate(divEle, 400);

    }

    function animate(ele, target) {

        clearInterval(ele.timer);

        ele.timer = setInterval(function () {

            var step = (target - ele.offsetLeft) / 10;

            step = step > 0 ? Math.ceil(step) : Math.floor(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);

            }

        }, 15);

    }

</script>

</body>

</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. [K/3Cloud]关于"选单"操作

    之前有些人对这块有些疑问,比如: 1.选单操作是否和下推基本一样,都是公用同一套单据转换规则,只不过下推是源单推目标单,选单是目标单去选择源单,最终操作结果一样? 2,我想实现选单的时候,选单列表先通 ...

  2. PHP中HTTP_X_FORWARDED_FOR 和 REMOTE_ADDR使用详解

    1.REMOTE_ADDR:浏览当前页面的用户计算机的ip地址 2.HTTP_X_FORWARDED_FOR: 浏览当前页面的用户计算机的网关 3.HTTP_CLIENT_IP:客户端的ip 在PHP ...

  3. FreeMarker与Spring MVC 4结合错误：Caused by: java.lang.NoClassDefFoundError: org/springframework/ui/freemarker/FreeMarkerConfiguration

    添加spring-context-support的依赖到POM: <!-- spring-context-support --> <!-- https://mvnrepository ...

  4. VS2012调试执行，网页打不开

    360修复漏洞篇 TODO 修复了漏洞.vs2012在firefox和ie中都打不开 解决思路:360漏洞修复→已安装漏洞→卸载刚刚安装的漏洞 就可以解决 忽略漏洞 正常打开.

  5. Android 高仿 频道管理----网易、今日头条、腾讯视频 （能够拖动的GridView）附源代码DEMO

    距离上次公布(android高仿系列)今日头条 --新闻阅读器 (二) 相关的内容已经半个月了.近期利用空暇时间,把今日头条client完好了下.完好的功能一个一个所有实现后.就放整个源代码.开发的进 ...

  6. UVA 10555 - Dead Fraction(数论+无限循环小数）

    UVA 10555 - Dead Fraction 题目链接 题意:给定一个循环小数,不确定循环节,求出该小数用分数表示,而且分母最小的情况 思路:推个小公式 一个小数0.aaaaabbb... 表示 ...

  7. WIZnet的网络产品怎样选型

    文章来源:成都浩然 我们在选用WIZnet的网络产品的时候.面对诸多的器件不知怎样选择,这里介绍一些方法以帮助project师高速准确地选择产品. WIZnet的产品有一个共同的特性.那就硬件TCPI ...

  8. SQL 2005批量插入数据的二种方法

    SQL 2005批量插入数据的二种方法 Posted on 2010-07-22 18:13 moss_tan_jun 阅读(2635) 评论(2) 编辑 收藏 在SQL Server 中插入一条数据 ...

  9. SQL 字符串处理函数大全

    select语句中只能使用sql函数对字段进行操作(链接sql server),select 字段1 from 表1 where 字段1.IndexOf("云")=1;这条语句不对 ...

  10. hdu 1512 Monkey King —— 左偏树

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1512 很简单的左偏树: 但突然对 rt 的关系感到混乱,改了半天才弄对: 注意是多组数据! #includ ...