摩擦运动：

逐渐变慢，最后停止

缓冲运动：

与摩擦力的区别:可以精确的停到指定目标点
距离越远速度越大
速度由距离决定
速度=(目标值-当前值)/缩放系数
Bug：速度取整
值取整：

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <style>

 #div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px;}

 </style>

 <script>

 //摩擦，减速 : 在运动过程中，速度越来越慢

 //愈接近目标点，速度就越小

 window.onload = function() {

     var oBtn = document.getElementById('btn');

     var oDiv = document.getElementById('div1');

     var iTimer = null;

     oBtn.onclick = function() {

         clearInterval(iTimer);

         var iSpeed = 0;

         iTimer = setInterval(function() {

             iSpeed = (500 - oDiv.offsetLeft) / 8;

             iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

             console.log( oDiv.offsetLeft + ' : ' + iSpeed );

             if (oDiv.offsetLeft == 500) {

                 clearInterval(iTimer);

             } else {

                 oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';

             }

         }, 30);

     }

 }

 </script>

 </head>

 <body>

     <input type="button" value="动起来" id="btn" />

     <div id="div1"></div>

 </body>

 </html>

JS运动基础(二) 摩擦运动、缓冲运动的更多相关文章

  1. 原生JavaScript运动功能系列（二）：缓冲运动

    匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...

  2. javascript运动系列第五篇——缓冲运动和弹性运动

    × 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...

  3. JS错误记录 - 右侧悬浮框 - 缓冲运动

    本次练习错误总结: 1.  正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...

  4. 第八节 JS运动基础

    运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...

  5. js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  6. day39—JavaScript缓冲运动

    转行学开发,代码100天!——2018-04-24 今天继续学习JavaScript运动之缓冲运动.相对于匀速运动,缓冲运动的不同之处在于其速度值是不断变化的,越靠近目标点,速度越小. 即可以表示为: ...

  7. JS运动---运动基础（缓冲运动）

    (1)手风琴效果 分析: (2)基础缓冲运动 接下来取整 原因: px为计算机识别的最小单位,1px无法再往下拆分.所以css如果取值200.5px,解析时计算机会自动将其改为200px注意:这里的数 ...

  8. 学习blus老师js(6)--js运动基础

    运动基础 一.匀速运动 运动框架 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE HTML> <html> <head> &l ...

  9. JS运动基础(三) 弹性运动

    加减速运动速度不断增加或减少速度减小到负值,会向反方向运动 弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度 带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前 ...

随机推荐

  1. Hadoop安装指引

    pre.ctl { font-family: "Liberation Mono", monospace } p { margin-bottom: 0.25cm; line-heig ...

  2. Checkpoint--与lazy writer区别

    checkpoint目的是减少数据库的恢复时间(服务奔溃或重启服务后的恢复),而lazy writer的目的是保证SQL OS 有空闲缓存块和系统有一定可用内存. Checkpoint和lazyWri ...

  3. Reapter合并行

    html文件: <asp:Repeater ID="rptEmployee" runat="server"> <HeaderTemplate& ...

  4. linux下tar.gz、tar、bz2、zip等解压缩、压缩命令小结

    Linux下最常用的打包程序就是tar了,使用tar程序打出来的包我们常称为tar包,tar包文件的命令通常都是以.tar结尾的.生成tar包后,就可以用其它的程序来进 行压缩了,所以首先就来讲讲ta ...

  5. SQL Server显式事务与隐式事务

    事务是单个的工作单元.如果某一事务成功,则在该事务中进行的所有数据修改均会提交,成为数据库中的永久组成部分.如果事务遇到错误且必须取消或回滚,则所有数据库修改均被清除. SQL Server中有一下几 ...

  6. havok之内存管理

    [现象记录] 1.往world和rb里都各自加入一个entityListener,当这个rb被remove掉之后, 会首先调用world里的listener的removecallback, 再调用rb ...

  7. CentOS 6.x 一键安装PPTP VPN脚本

    环境 CentOS 6.x 32位/64位XEN/KVM/OpenVZ 步骤 依次运行下列命令 #wget http://www.hi-vps.com/shell/vpn_centos6.sh #ch ...

  8. Gradient Boost Decision Tree（GBDT）中损失函数为什么是对数形式

    由于最近要经常用到XGBOOST的包,不免对相关的GBDT的原理又重新学习了一遍, 发现其中在考虑损失函数的时候,是以对数log进行度量的,囿于误差平方和函数的印象 那么为什么是对数呢?可能是下面的原 ...

  9. 【转】XGBoost参数调优完全指南（附Python代码）

    xgboost入门非常经典的材料,虽然读起来比较吃力,但是会有很大的帮助: 英文原文链接:https://www.analyticsvidhya.com/blog/2016/03/complete-g ...

  10. js中的cookie操作

    一.js cookie   使用时把此段代码引入页面 (function (factory) { if (typeof define === 'function' && define. ...