day39—JavaScript缓冲运动
转行学开发,代码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缓冲运动的更多相关文章
- Javascript 缓冲运动——逐行分析代码,让你轻松了解缓冲运动的原理
看过上一篇关于Javascript 匀速运动文章的朋友相信对于运动已经有了初步的了解 接下来 讲一下关于缓冲运动的原理 ,我会逐行分析代码,代码简单易懂,能马上理解其中的原理,适用于初学者. #div ...
- javascript 缓冲运动demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JavaScript运动功能系列(二):缓冲运动
匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...
- javascript运动系列第五篇——缓冲运动和弹性运动
× 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...
- javascript每日一练(十)——运动二:缓冲运动
一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...
- JavaScript 运动(缓冲运动,多物体运动 ,多物体多值运动+回调机制)
匀速运动 (当需要物体做匀速运动直接调用statMove函数) function startMove(dom,targetPosetion){ //dom : 运动对象,targetPositio ...
- javaScript运动框架之缓冲运动
缓冲运动 逐渐变慢,最后停止 距离越远速度越大 速度由距离决定 速度=(目标值-当前值)/缩放系数 存在Bug 速度取整 跟随页面滚动的缓冲侧边栏 潜在问题:目标值不是整数时 缓冲运动的停止条件 ...
- 关于javascript的运动教程
一.javascript的匀速运动 关于物体的javascript匀速运动要点分析: 1.物体关于运动的时候,我们要打开定时器 2.打开定时器的时候我们记得要在停止的时候关闭定时器,同时应该注意的是一 ...
- js动画之缓冲运动
缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...
随机推荐
- 来自python自学者的小问题
我想使用python的第三方库,但是我的IDE给我一个错误代码: D:\untitled\venv\Scripts\python.exe "D:/py code/venv/sxsxsxsxs ...
- [19/05/08-星期三] JDBC(Java DataBase Connectivity)_ORM(Object Relationship Mapping, 对象关系映射)
一.概念 基本思想: – 表结构跟类对应: 表中字段和类的属性对应:表中记录和对象对应: – 让javabean的属性名和类型尽量和数据库保持一致! – 一条记录对应一个对象.将这些查询到的对象放到容 ...
- 【SQL Server复制】数据库复制:修改表结构、新增表、新增存储过程 会被复制到订阅服务器?
转自:https://www.cnblogs.com/happyday56/p/3849018.html 关键字:sql server复制 [SQL Server高可用性]数据库复制:修改表结构.新增 ...
- Oracle数据库用户介绍
Oracle数据库创建的时候,创建了一系列默认的用户,有时候可能我们不小心忘记创建了某个用户,比如SCOTT用户,我们就需要使用Oracle提供的脚本来创建,介绍如下: 1.SYS/change_on ...
- 【CF321E】+【bzoj5311】
决策单调性 + WQS二分 贴个代码先... //by Judge #pragma GCC optimize("Ofast") #include<bits/stdc++.h& ...
- mysql安装,卸载; 库和表的基础操作
数据库 """ 1.什么是数据库:管理数据的系统 - 安装某种管理数据的系统 - 管理的对象本质是文件 2.存储数据的位置:内存.硬盘 3.什么是系统:运行在硬件基础上 ...
- 2018-8-10-调试-ms-源代码
title author date CreateTime categories 调试 ms 源代码 lindexi 2018-08-10 19:17:19 +0800 2018-2-13 17:23: ...
- 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 ...
- Altium Designer设计PCB中如何开槽
在不同层画槽孔形状实际得到的PCB效果(注意槽孔边缘) 在不同层画槽孔形状进行(注意槽孔边缘) 很多坛友问在使用Altium Designer设计PCB时,想在板子上开一个槽或者挖一个孔该如何操作,是 ...
- Nginx优化_压缩处理与内存缓存
对页面进行压缩处理; 服务器内存缓存. 1.对页面进行压缩处理 [root@proxy ~]# cat /usr/local/nginx/conf/nginx.conf http { ... gzip ...