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

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

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

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

一:基于时间的运动

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

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

源代码如下图:

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


二:基于速度的运动

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

源代码如下图:

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

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

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


许你一城个人博客