解决速度正负舍入问题的JavaScript运动框架(一)

这里说的运动是指缓冲运动，使物体逐渐“落地”而不是“硬着陆”，到达目标位置时速度变得越来越慢，看起来很舒服。

缓冲特性：

速度随着距离=(目标值-当前值)/比例因子的缩短而降低；速度必须是整数。例如，如果一个div从最左边移动到左边等于400的位置，可以实现如下：

！doctype html head metharset=' utf-8 ' title motion frame(1)/title style type=' text/CSS ' * { padding : 0；margin : 0；} # div1 { width: 100px高度： 100像素；背景：橙色；绝对位置：} # div2 { width: 1pxheight: 300px背景：黑色；绝对位置：left: 400px} # btn1 { width: 60px高度： 40px；背景# fff绝对位置：left: 10pxtop: 150px}/style/head body div id=' div 1 '/div id=' div 2 '/div输入id=' BTN 1 ' type=' button ' value=' start ' onclick=' startMove()'/script type=' text/JavaScript ' var oDiv=document . getelementbyid(' div 1 ')；var oBtn=document . getelementbyid(' BTN 1 ')；var计时器=null函数startMove() {/*每次启动定时器都要清理最后一个定时器，因为有些人会多次点击按钮，多次启动定时器，速度会越叠加越快！*/clearInterval(计时器)；Timer=setinterval(函数(){//每次速度随着距离的缩短而降低，var speed=(400-odiv。offset left)/10；if(odiv . offsetleft==400){ clearInterval(定时器)；} else { Odiv . style . left=Odiv . offsetleft speed ' px '；document.title=oDiv.offsetLeft '，' speed} }, 30);}/脚本/正文/html

启动按钮后你会发现div没有准确到达400的位置。看标题上印的实际目标和速度，我们发现最终落脚点是396，速度是0.4。我们知道1px是最小的单位，没有小数的概念，所以0.4px是没有概念的，计算机会认为是0px。仔细分析，当div运行到396px时，还剩下4px。速度为4/10=0.4，下一个单位时间(30毫秒)向前运行0.4px，实际上是0，所以永远停止，定时器清零步骤永远不会执行！怎么解决呢，数学里有个方法叫向上舍入，就是把速度向上舍入，试图帮助div跨过这一步

math . ceil(3.2)==4 ath . ceil(-9.7)==-9 ath . floor(5.98)==5 function start move(){ clearInterval(计时器)；timer=setInterval(function(){ var speed=(400-odiv . offsetleft)/10；速度=数学(速度)；//下划线，下划线if (odiv。offsetleft==400) {clearinterval(定时器)；} else { Odiv . style . left=Odiv . offsetleft speed ' px '；document.title=oDiv.offsetLeft '，' speed} }, 30);}

当然，div可以负移也可以正移，比如从800到400。如果不四舍五入，还是不能精确到400。

# div1 { width: 100px高度： 100像素；背景：橙色；绝对位置：left: 800px/* 0-800 */}

函数startMove() { clearInterval(计时器)；timer=setInterval(function(){ var speed=(400-odiv . offsetleft)/10；console . log(' speed=' speed ')；速度=数学地板(速度)；//下划线，下划线，下划线if (odiv。offsetleft==400) {clearinterval(定时器)；} else { Odiv . style . left=Odiv . offsetleft speed ' px '；document.title=oDiv.offsetLeft '，' speed} }, 30);}

总结：

向前运动(速度0)，数学细胞(速度)；反向运动(速度0)，数学地板(速度)；

Var速度=(itar get-cur)/系数；速度=速度0？数学天花板(速度):数学地板(速度)；函数startMove(itar get){ setInterval(function(){ var speed=(itar get-odiv . offsetleft)/10；速度=速度0？数学。天花板(速度):火柴。地板(速度)；odiv . style . left=odiv . offsetleft速度' px '；}, 30);}速度舍入是针对速度(绝对值)变大并越过那个阈值的最后时刻，否则只能停留在附近！

如果速度不四舍五入，最终结果是停在目标值附近，这是几个像素短。由该值计算的速度的绝对值必须小于1，这导致距离交叉只有几个像素。如果此时将速度四舍五入为1，最后几个像素之间的距离实际上是以恒定速度移动的。每次(30毫秒)，你走1px，因为最近几次算出来的速度是1，1 px！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。