https://github.com/zhangxinxu/Tween

tween.js
https://github.com/zhangxinxu/Tween

Last synced: 9 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 (15 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());