Javascript动画的实现原理浅析

JavaScript动画的实现原理：两个实例详解

想象一下这样一个场景：你希望将一个div的宽度从100px逐渐过渡到200px。我们尝试使用最基础的JavaScript代码来实现这个动画效果。

实例代码如下：

```html

```

这个实例的原理是每隔一定时间增加1px，直到达到200px为止。你可能会发现动画结束后显示的耗时往往超过1秒，这是因为`setInterval`并不能保证严格的执行间隔。

那么，有没有更好的方法呢？我们可以从一道小学数学题中得到启示。假设A楼和B楼相距100米，一个人匀速从A楼走到B楼需要5分钟，那么我们如何计算他第3分钟时距离A楼多远呢？答案是使用路程=速度×时间的公式来计算。同样地，我们也可以用这个思路来计算动画过程中某个时刻的值，而不是通过累加得到。

实例代码如下：

```html