摩擦运动：

逐渐变慢，最后停止

缓冲运动：

与摩擦力的区别:可以精确的停到指定目标点
距离越远速度越大
速度由距离决定
速度=(目标值-当前值)/缩放系数
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. WPFの三种方式实现快捷键

    最近,对wpf添加快捷键的方式进行了整理.主要用到的三种方式如下: 一.wpf命令: 资源中添加命令 <Window.Resources> <RoutedUICommand x:Ke ...

  2. 编写一个JSP程序实现用户登录

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. Sublime Text的使用代码块安装的模块

    在众多的开发工具IDE当中.作者现在唯独深爱sublime text(以下简称st).以前做后台开发使用visual studio(以下简称vs),以及实行前后端分工也是配合后台使用vs.这里要讲述两 ...

  4. ie6兼容之绝对定位元素内容为空时高度问题

    正常显示: ie6下显示: line6元素高度最小16px; 解决办法: 添加内容在空的div里,并且设置行高即可. 其中,非ie6浏览器不需要再空的div里加无谓的内容,再次需要用“条件注释”来解决 ...

  5. 《BI项目笔记》SSAS部署时发生的问题——元数据管理器中存在错误 解决办法

    在生成和部署期间出错.是否继续?解决办法: 用Microsoft SQL Server Management Studio 连接Analysis Services 然后删除多维数据库,重新布署.这样就 ...

  6. python pymongo-ensure_index

    create_index 与 ensure_index 一.概述 ensure_index() 在mongoDB中创建索引 看了[1]感觉自己有些断章取义 ----------41316-- 参考链接 ...

  7. java高薪之路__004_泛型

    参考地址: 1. http://www.cnblogs.com/lwbqqyumidi/p/3837629.html2. http://www.cnblogs.com/abcwt112/p/47350 ...

  8. 函数指针与指针函数以及typedef

    c难于理解的是指针,其魅力之处也是指针,函数方法结构,化繁为简可以理解为:返回值 函数名(形参表),具体来说: 返回值:1.可以为空void 2.基本数据类型char short int long f ...

  9. hello word

    开通微博,用于记录在工作中遇到的点滴问题. 2015/08/31

  10. cocos2d-x lua绑定解析

    花了几天时间看了下cocos2d-x lua绑定那块,总算是基本搞明白了,下面分三部分解析lua绑定: 一.lua绑定主要用到的底层函数 lua绑定其本质就是有一个公用的lua_Stack来进行C和L ...