转行学开发,代码100天!——2018-04-24

今天继续学习JavaScript运动之缓冲运动。相对于匀速运动,缓冲运动的不同之处在于其速度值是不断变化的,越靠近目标点,速度越小。

即可以表示为:speed =( iTarget-curPos)/constNum;

做个简单的例子说明一下这个问题:

    <input id="btn" type="button" value="开始运动" onclick="startMove(300);">
<div id="div1"></div>
    <style type="text/css">
#div1{width: 100px; height: 100px;position: absolute;top:50px ;left:;background: red;}
</style>

JavaScript部分如下:

<script type="text/javascript">
var timer = null;
function startMove(iTarget)
{
var div1 = document.getElementById("div1");
clearInterval(timer); timer = setInterval(function(){
var speed = (iTarget-div1.offsetLeft)/10; if (div1.style.left==iTarget) {
clearInterval(timer); }else{
div1.style.left = div1.offsetLeft+speed+"px";
}
},30); }

实际运动效果是,div1缓缓靠近300位置,越来越慢。

              

为了判断是否恰好到达目标点,可以在目标点加一个区分线。

<div id="div2"></div>
#div2{width: 1px; height:100px;background: black;position: absolute;top:50px;left: 300px;}

执行后......天啊。竟然....

可以看到物体并没有到达目标点,而是少了些。

经测试,发现物体处于296.4px位置

显然是速度值出了问题,原因在于像素点无小数。因此,需要对速度进行取整处理。应用到数学方法Math.ceil();向上取整

同样,如果物体位置大于目标位置,即物体向左移动时,也会出现相同问题,因此统一处理,此时用数学方法Math.floor();向下取整

综上,

var speed = (iTarget-div1.offsetLeft)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);

如此,就解决了这个问题。

<-  向左

    

向右->

    

如此又可以向自己的运动库里增加一个缓冲运动框架了。

接下来,以一个常见例子,说明缓冲运动的应用。侧边栏的缓冲运动问题。

通常这个单独的侧边栏在鼠标滚动到下端时会出现抖动问题。

<style type="text/css">
#div1{width: 100px; height: 150px;background: red;position: absolute;top: 300px;right:;}
</style>
    <script type="text/javascript">
window.onscroll = function()
{
var oDiv = document.getElementById("div1");
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
oDiv.style.top = document.documentElement.clientHeight-oDiv.offsetHeight +scrollTop+"px";
}
</script>

(不妨按照上述代码一试)

为了解决这个抖动的问题,通常给该物体加上一个缓冲运动。

<script type="text/javascript">
window.onscroll = function()
{
var oDiv = document.getElementById("div1");
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
// oDiv.style.top = document.documentElement.clientHeight-oDiv.offsetHeight +scrollTop+"px";
startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);
} var timer =null;
function startMove(iTarget)
{
var oDiv = document.getElementById("div1");
clearInterval(timer);
timer = setInterval(function(){
var speed = (iTarget-oDiv.offsetTop)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if (oDiv.offsetTop==iTarget) {
clearInterval(timer);
}else{
oDiv.style.top = oDiv.offsetTop+speed+"px";
} },300);
}
</script>

如此,就不会有物体在目标点抖动的问题了。

总结:缓冲运动需要注意以下问题:

1.速度由距离决定;速度=(目标值-当前值)/缩放系数

2.速度必须取整;Math.ceil()  Math.floor()

3.目标值取整;(有0.5像素的误差可忽略)不是整数时会在目标位置附近抖动。

4.缓冲运动的停止条件;两点重合

day39—JavaScript缓冲运动的更多相关文章

  1. Javascript 缓冲运动——逐行分析代码,让你轻松了解缓冲运动的原理

    看过上一篇关于Javascript 匀速运动文章的朋友相信对于运动已经有了初步的了解 接下来 讲一下关于缓冲运动的原理 ,我会逐行分析代码,代码简单易懂,能马上理解其中的原理,适用于初学者. #div ...

  2. javascript 缓冲运动demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 原生JavaScript运动功能系列(二):缓冲运动

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

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

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

  5. javascript每日一练(十)——运动二:缓冲运动

    一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...

  6. JavaScript 运动(缓冲运动,多物体运动 ,多物体多值运动+回调机制)

    匀速运动   (当需要物体做匀速运动直接调用statMove函数) function startMove(dom,targetPosetion){ //dom : 运动对象,targetPositio ...

  7. javaScript运动框架之缓冲运动

    缓冲运动 逐渐变慢,最后停止 距离越远速度越大   速度由距离决定 速度=(目标值-当前值)/缩放系数 存在Bug 速度取整 跟随页面滚动的缓冲侧边栏 潜在问题:目标值不是整数时 缓冲运动的停止条件 ...

  8. 关于javascript的运动教程

    一.javascript的匀速运动 关于物体的javascript匀速运动要点分析: 1.物体关于运动的时候,我们要打开定时器 2.打开定时器的时候我们记得要在停止的时候关闭定时器,同时应该注意的是一 ...

  9. js动画之缓冲运动

    缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. 来自python自学者的小问题

    我想使用python的第三方库,但是我的IDE给我一个错误代码: D:\untitled\venv\Scripts\python.exe "D:/py code/venv/sxsxsxsxs ...

  2. [19/05/08-星期三] JDBC(Java DataBase Connectivity)_ORM(Object Relationship Mapping, 对象关系映射)

    一.概念 基本思想: – 表结构跟类对应: 表中字段和类的属性对应:表中记录和对象对应: – 让javabean的属性名和类型尽量和数据库保持一致! – 一条记录对应一个对象.将这些查询到的对象放到容 ...

  3. 【SQL Server复制】数据库复制:修改表结构、新增表、新增存储过程 会被复制到订阅服务器?

    转自:https://www.cnblogs.com/happyday56/p/3849018.html 关键字:sql server复制 [SQL Server高可用性]数据库复制:修改表结构.新增 ...

  4. Oracle数据库用户介绍

    Oracle数据库创建的时候,创建了一系列默认的用户,有时候可能我们不小心忘记创建了某个用户,比如SCOTT用户,我们就需要使用Oracle提供的脚本来创建,介绍如下: 1.SYS/change_on ...

  5. 【CF321E】+【bzoj5311】

    决策单调性 + WQS二分 贴个代码先... //by Judge #pragma GCC optimize("Ofast") #include<bits/stdc++.h& ...

  6. mysql安装,卸载; 库和表的基础操作

    数据库  """ 1.什么是数据库:管理数据的系统 - 安装某种管理数据的系统 - 管理的对象本质是文件 2.存储数据的位置:内存.硬盘 3.什么是系统:运行在硬件基础上 ...

  7. 2018-8-10-调试-ms-源代码

    title author date CreateTime categories 调试 ms 源代码 lindexi 2018-08-10 19:17:19 +0800 2018-2-13 17:23: ...

  8. 2018-2-13-win10-uwp-读写csv-

    title author date CreateTime categories win10 uwp 读写csv lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17 ...

  9. Altium Designer设计PCB中如何开槽

    在不同层画槽孔形状实际得到的PCB效果(注意槽孔边缘) 在不同层画槽孔形状进行(注意槽孔边缘) 很多坛友问在使用Altium Designer设计PCB时,想在板子上开一个槽或者挖一个孔该如何操作,是 ...

  10. Nginx优化_压缩处理与内存缓存

    对页面进行压缩处理; 服务器内存缓存. 1.对页面进行压缩处理 [root@proxy ~]# cat /usr/local/nginx/conf/nginx.conf http { ... gzip ...