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

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

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

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

一:基于时间的运动

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

源代码如下图:

二:基于速度的运动

文章详情、源代码下载请单击这里查看

 

许你一城个人博客

 

posted @ 2018-04-08 10:44  许你一城个人博客  阅读(512)  评论(0编辑  收藏  举报