Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zhangxinxu/Tween
tween.js
https://github.com/zhangxinxu/Tween
Last synced: 8 days ago
JSON representation
tween.js
- Host: GitHub
- URL: https://github.com/zhangxinxu/Tween
- Owner: zhangxinxu
- Created: 2013-09-29T09:40:19.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2024-03-29T08:00:30.000Z (8 months ago)
- Last Synced: 2024-10-29T21:00:06.708Z (13 days ago)
- Language: JavaScript
- Size: 11.7 KB
- Stars: 1,008
- Watchers: 26
- Forks: 271
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Tween.js
================简介
----------------各类缓动算法,效果演示参见:http://www.zhangxinxu.com/study/201612/how-to-use-tween-js.html
如何使用参见:http://www.zhangxinxu.com/wordpress/?p=5828
其中animation.js是新增,为了更简单的使用这些缓动算法,语法如下:
Math.animation(from, to, duration, easing, callback);其中:
-
from
和to
是必须参数,表示动画起始数值和结束数值; -
duration
,easing
,callback
理论上都是可选参数,但是实际上callback
肯定是要使用的,因为实时变化的数值就是通过callback
返回的。然后,duration
,easing
,callback
这3个参数的顺序是任意的。具体来讲:-
duration
为动画持续时间,默认300
,默认单位是毫秒,建议使用数值,例如600
,也支持带单位,例如600ms
或者0.6s
; -
easing
为缓动的类型,字符串类型,源自Tween.js。例如:'Linear'
,'Quad.easeIn'
,'Bounce.easeInOut'
等等,需要注意大小写。 其中,默认值是'Linear'
; -
callback
为回调函数,支持2个参数(value, isEnding),其中value
表示实时变化的计算值,isEnding
是布尔值,表示动画是否完全停止。
-
Math.animation
返回一个函数,执行这个函数可以返回当前动画使用的请求动画帧,使用cancelAnimationFrame
方法可以停止我们的动画。
例如:
var fnReq = Math.animation(100, 200, 3000);
// 执行下面语句停止动画
cancelAnimationFrame(fnReq());