浅析javaｓｃｒｉｐｔ动画的实现原理

假设有这样一个动画功能要求：改变一个div的宽度从100px到200px，编写的代码可能是这样的：

复制代码代码如下所示：
功能animate1（元，endvalue，持续时间）{

VaR StartTime =新的日期（），

startValue = parseInt（元。风格。宽度），

步骤1；
VaR值= setInterval（function（））{

无功nextvalue = parseInt（元。风格。宽）+步；

element.style.width = nextvalue + 'px；

如果（nextvalue = endvalue）{

ClearInterval（值）；

显示/动画时间

element.innerhtml =新的日期-时间；

}

}，时间/（endvalue - startValue）*步）；

}

animate1（document.getelementbyid（'test1 '），200, 1000）；
原理是增加1px每次到一定时间直到200px。然而，在动画完成后的时间大于1s（通常约1.5秒）。原因是setInterval不严格保证执行间隔。

有没有更好的方法接下来，看看小学的数学问题。

复制代码代码如下所示：

A楼和B楼相距100米。一个人从一座建筑物走到B楼，速度均匀。到达目的地要花5分钟。他在第三分钟内离大楼有多远
匀速运动中某段时间距离的计算公式是道路的当前时间/时间，所以答案应为100×3 5＝60。

这个问题的启发是，某一时刻的路径可以用一个特定的公式来计算，同样的，动画过程中时刻的值也可以用公式来计算，而不是累加。

复制代码代码如下所示：
功能animate2（元，endvalue，持续时间）{

VaR StartTime =新的日期（），

startValue = parseInt（元。风格。宽度）；

VaR值= setInterval（function（））{

无功率=（新的日期/时间-开始时间）；

无功stepvalue = startValue +（endvalue - startValue）*百分比；

element.style.width = stepvalue + 'px；

如果（百分比> = 1）{

ClearInterval（值）；

element.innerhtml =新的日期-时间；

}

}，13）；

}

animate2（document.getelementbyid（'test2 '），200, 1000）；
经过改进后，您可以看到动画的执行至多需要10毫秒的错误，但是这个问题还没有完全解决。检查浏览器的开发工具test2元素可以发现test2的最终宽度可超过200px。对animate2功能代码，仔细检查可发现：

1.percentage的值可以大于1，可以通过Math.min限制最大值求解。

2，即使百分比的值不大于1，如果endvalue或StartValue是十进制的值（endvalue - startValue）*百分比也可能导致错误，因为Javaｓｃｒｉｐｔ小数运算的精度是不够的。事实上，我们要保证的是最终值的准确性，所以当百分比是1，你可以直接使用endvalue。

因此，对animate2函数的代码修改：

复制代码代码如下所示：

功能animate2（元，endvalue，持续时间）{

VaR StartTime =新的日期（），

startValue = parseInt（元。风格。宽度）；

VaR值= setInterval（function（））{

该百分比小于1

无功率= math.min（1，（新的日期-时间）/时间）；

无功stepvalue；

如果（百分比> = 1）{

确保最终值的准确性。

stepvalue = endvalue；

{人}

stepvalue = startValue +（endvalue - startValue）*百分比；

}

element.style.width = stepvalue + 'px；

如果（百分比> = 1）{

ClearInterval（值）；

element.innerhtml =新的日期-时间；

}

}，13）；

}
最后一个问题是：为什么是13ms setInterval设置的间隔原因是显示器的刷新率一般不超过75hz目前，即每秒刷新75次，即每13ms刷新，并同步间隔刷新率更好。