基于时间或速度的JS运动框架

JQuery要实现动画，那是相当的简单啊，现成的函数可以用。那么Javascript如何实现动画呢？哎呀，其实也是so easy啊，也许你没想过如何实现，因为JQuery太给力了、甚至CSS3就可以实现完美动画。今天就教教大家如何实现。

实现原理是：动画嘛，不就是一帧一帧的变嘛，打个比方，div元素的width由300px变成400px，那就让它依次变化：305px、310px、315px、320px、........一直下去，直到400px。那么在js里用一个定时器setInterval，每个几ms就改变一下widht的值，直到400px。是不是简单。

实现可以分为两种，一种是基于时间的，还有一种是基于速度的。

一：基于时间的运动

基于时间就是动画必须在规定时间内完成，不管速度是多少。那么当前位置就和当前时间扯上了关系。如下图，时间和位置拥有一个相同的比值prop，所以由图中的两式可以求出当前位置s。

源代码如下图：

二：基于速度的运动

基于速度的运动就是width每次增加量或减少量是固定的，但是动画执行完成所需要的时间是不确定的。

源代码如下图：

................................................................

................................................................

文章详情、案例展示请点击这里

许你一城个人博客