API Docs for: 1.10.1 最后更新日期：2016年03月28日
Google搜索   
Show:

File: transitions/LTweenLite.js

  1. var LTweenLiteTimeline;
  2. var LTweenLite = (function () {
  3. 	/** @language chinese
  4. 	 * <p>LTweenLite用来控制动画的一个单位。</p>
  5. 	 * @class LTweenLiteChild
  6. 	 * @constructor
  7. 	 * @since 1.4.0
  8. 	 * @public
  9. 	 */
  10. 	function LTweenLiteChild ($target, $duration, $vars) {
  11. 		var s = this;
  12. 		LExtends (s, LObject, []);
  13. 		s.type = "LTweenLiteChild";
  14. 		s.toNew = [];
  15. 		s.init($target, $duration, $vars);
  16. 	}
  17. 	var p = {
  18. 		init : function($target, $duration, $vars) {
  19. 			var s = this, k = null;
  20. 			if (typeof $vars["tweenTimeline"] == UNDEFINED) {
  21. 				$vars["tweenTimeline"] = LTweenLite.TYPE_FRAME;
  22. 			}
  23. 			s.target = $target;
  24. 			s.duration = $duration || 0.001;
  25. 			s.vars = $vars;
  26. 			s.delay = s.vars.delay || 0;
  27. 			if(s.vars["tweenTimeline"] == LTweenLite.TYPE_TIMER){
  28. 				s.currentTime = (new Date()).getTime() / 1000;
  29. 				s.initTime = s.currentTime;
  30. 				s.startTime = s.initTime + s.delay;
  31. 			}else{
  32. 				s.currentTime = 0;
  33. 				s.duration *= 1000;
  34. 				s.currentTime -= s.delay * 1000;
  35. 			}
  36. 			s.combinedTimeScale = s.vars.timeScale || 1;
  37. 			s.active = s.duration == 0 && s.delay == 0;
  38. 			s.varsto = {};
  39. 			s.varsfrom = {};
  40. 			s.varsDiff = {};
  41. 			s.varsListIndex = {};
  42. 			s.varsListCurr = {};
  43. 			s.varsListTo = {};
  44. 			s.varsListLength = {};
  45. 			s.stop = false;
  46. 			if (typeof(s.vars.ease) != "function") {
  47. 				s.vars.ease = LEasing.None.easeIn;
  48. 			}
  49. 			s.ease = s.vars.ease;
  50. 			delete s.vars.ease;
  51. 			if (s.vars.onComplete) {
  52. 				s.onComplete = s.vars.onComplete;
  53. 				delete s.vars.onComplete;
  54. 			}
  55. 			if (s.vars.onUpdate) {
  56. 				s.onUpdate = s.vars.onUpdate;
  57. 				delete s.vars.onUpdate;
  58. 			}
  59. 			if (s.vars.onStart) {
  60. 				s.onStart = s.vars.onStart;
  61. 				delete s.vars.onStart;
  62. 			}
  63. 			for (k in s.vars) {
  64. 				if (k == "coordinate" && Array.isArray(s.vars[k])) {
  65. 					var diff = 0, curr = {x:s.target.x,y:s.target.y};
  66. 					for (var i = 0, l = s.vars[k].length; i < l; i++) {
  67. 						var p = s.vars[k][i];
  68. 						diff += LPoint.distance(p,curr);
  69. 						curr = p;
  70. 					}
  71. 					s.varsListIndex[k] = 0;
  72. 					s.varsListCurr[k] = 0;
  73. 					s.varsListTo[k] = diff;
  74. 					s.varsto[k] = s.vars[k];
  75. 					s.varsfrom[k] = {x:s.target.x,y:s.target.y};
  76. 					continue;
  77. 				} else if (typeof s.vars[k] != "number") {
  78. 					continue;
  79. 				}
  80. 				s.varsto[k] = s.vars[k];
  81. 				s.varsfrom[k] = s.target[k];
  82. 				s.varsDiff[k] = s.vars[k] - s.target[k];
  83. 			}
  84. 		},
  85. 		/** @language chinese
  86. 		 * 将动画暂停。
  87. 		 * @method pause
  88. 		 * @example
  89. 		 * 	var tween = LTweenLite.to(rect,1,{x:500,loop:true,ease:LEasing.Sine.easeInOut,tweenTimeline:LTweenLite.TYPE_FRAME})
  90. 		 * 	.to(rect,1,{x:50,ease:LEasing.Quad.easeInOut});
  91. 		 * 	tween.pause();
  92. 		 * @examplelink <p><a href="../../../api/LTweenLite/pause_resume.html" target="_blank">测试链接</a></p>
  93. 		 * @public
  94. 		 * @since 1.9.1
  95. 		 */
  96. 		pause : function () {
  97. 			this.stop = true;
  98. 		},
  99. 		/** @language chinese
  100. 		 * 将暂停的动画重新播放。
  101. 		 * @method resume
  102. 		 * @example
  103. 		 * 	var tween = LTweenLite.to(rect,1,{x:500,loop:true,ease:LEasing.Sine.easeInOut,tweenTimeline:LTweenLite.TYPE_FRAME})
  104. 		 * 	.to(rect,1,{x:50,ease:LEasing.Quad.easeInOut});
  105. 		 * 	tween.pause();
  106. 		 * 	tween.resume();
  107. 		 * @examplelink <p><a href="../../../api/LTweenLite/pause_resume.html" target="_blank">测试链接</a></p>
  108. 		 * @public
  109. 		 * @since 1.9.1
  110. 		 */
  111. 		resume : function () {
  112. 			this.stop = false;
  113. 		},
  114. 		tween : function () {
  115. 			var s = this, tweentype;
  116. 			var type_timer = (s.vars["tweenTimeline"] == LTweenLite.TYPE_TIMER);
  117. 			if (type_timer) {
  118. 				var time = (new Date()).getTime() / 1000, etime = time - s.startTime;
  119. 				if (etime < 0) {
  120. 					return;
  121. 				}
  122. 			} else {
  123. 				if (s.stop) {
  124. 					return;
  125. 				}
  126. 				s.currentTime += LGlobal.speed;
  127. 				if (s.currentTime < 0) {
  128. 					return;
  129. 				}
  130. 			}
  131. 			for (k in s.varsto) {
  132. 				if (typeof s.varsListTo[k] != UNDEFINED){
  133. 					var curr = s.ease(type_timer ? etime : s.currentTime, 0, s.varsListTo[k], s.duration);
  134. 					if(curr > s.varsListTo[k]){
  135. 						curr = s.varsListTo[k];
  136. 					}
  137. 					var c = s.varsListIndex[k] > 0 ? s.vars[k][s.varsListIndex[k] - 1] : s.varsfrom[k];
  138. 					var v = s.vars[k][s.varsListIndex[k]];
  139. 					var d = LPoint.distance(c,v);
  140. 					while(s.varsListCurr[k] + d < curr){
  141. 						s.varsListCurr[k] += d;
  142. 						c = v;
  143. 						s.varsListIndex[k]++;
  144. 						v = s.vars[k][s.varsListIndex[k]];
  145. 						d = LPoint.distance(c,v);
  146. 					}
  147. 					s.target.x = c.x;
  148. 					s.target.y = c.y;
  149. 					if(d != 0 && v.x - c.x != 0){
  150. 						s.target.x += (v.x - c.x)*(curr - s.varsListCurr[k])/d;
  151. 					}
  152. 					if(d != 0 && v.y - c.y != 0){
  153. 						s.target.y += (v.y - c.y)*(curr - s.varsListCurr[k])/d;
  154. 					}
  155. 					continue;
  156. 				}
  157. 				s.target[k] = s.ease(type_timer ? etime : s.currentTime, s.varsfrom[k], s.varsDiff[k], s.duration);
  158. 			}
  159. 			if (s.onStart) {
  160. 				s._dispatchEvent(s.onStart);
  161. 				delete s.onStart;
  162. 			}
  163. 			var e;
  164. 			if (type_timer) {
  165. 				e = (etime >= s.duration);
  166. 			} else {
  167. 				e = (s.currentTime >= s.duration);
  168. 			}
  169. 			if (e) {
  170. 				for (tweentype in s.varsto) {
  171. 					if (typeof s.varsListTo[tweentype] != UNDEFINED){
  172. 						var p = s.varsto[tweentype][s.vars[tweentype].length - 1];
  173. 						s.target.x = p.x;
  174. 						s.target.y = p.y;
  175. 						continue;
  176. 					}
  177. 					s.target[tweentype] = s.varsto[tweentype];
  178. 				}
  179. 				if (s.onComplete) {
  180. 					s._dispatchEvent(s.onComplete);
  181. 				}
  182. 				return true;
  183. 			} else if (s.onUpdate) {
  184. 				s._dispatchEvent(s.onUpdate);
  185. 			}
  186. 			return false;
  187. 		},
  188. 		_dispatchEvent : function (f) {
  189. 			var s = this;
  190. 			s.target.target = s.target;
  191. 			s.target.currentTarget = s;
  192. 			f(s.target);
  193. 			delete s.target.currentTarget;
  194. 			delete s.target.target;
  195. 		},
  196. 		to : function ($target, $duration, $vars, $data) {
  197. 			var s = this;
  198. 			s.toNew.push({target : $target, duration : $duration, vars : $vars, data : $data});
  199. 			return s;
  200. 		},
  201. 		keep : function () {
  202. 			var s = this, t, vs, k, d;
  203. 			if (s.toNew.length > 0) {
  204. 				t = s.toNew.shift();
  205. 				if (t.vars.loop) {
  206. 					s.loop = true;
  207. 				}
  208. 				if (s.loop) {
  209. 					d = {};
  210. 					vs = {};
  211. 					for (k in t.vars) {
  212. 						vs[k] = t.vars[k];
  213. 						if(typeof t.target[k] == UNDEFINED || t.vars.playStyle != LTweenLite.PlayStyle.Init){
  214. 							continue;
  215. 						}
  216. 						if(t.data){
  217. 							t.target[k] = t.data[k];
  218. 							continue;
  219. 						}
  220. 						d[k] = t.target[k];
  221. 					}
  222. 					if(!t.data){
  223. 						t.data = d;
  224. 					}
  225. 					s.to(t.target, t.duration, vs, t.data);
  226. 				}
  227. 				s.init(t.target, t.duration, t.vars);
  228. 				return true;
  229. 			}
  230. 			return false;
  231. 		}
  232. 	};
  233. 	for (var k in p) {
  234. 		LTweenLiteChild.prototype[k] = p[k];
  235. 	}
  236. 	/** @language chinese
  237. 	 * <p>LTweenLite是比较常用的一个动画库，包含各种缓动效果，使用LTweenLite能够简化动画制作的代码编写工作。</p>
  238. 	 * @class LTweenLite
  239. 	 * @constructor
  240. 	 * @since 1.4.0
  241. 	 * @public
  242. 	 */
  243. 	function LTweenLite () {
  244. 		var s = this;
  245. 		LExtends (s, LObject, []);
  246. 		s.type = "LTweenLite";
  247. 		s.tweens = [];
  248. 	}
  249. 	/** @language chinese
  250. 	 * <p>缓动动画循环的类型</p>
  251. 	 * <table>
  252. 	 * <tr><th>属性</th><th>说明</th></tr>
  253. 	 * <tr><td>LTweenLite.PlayStyle.None</td><td>无效果</td></tr>
  254. 	 * <tr><td>LTweenLite.PlayStyle.Init</td><td>每次缓动都从第一次缓动开始时的值开始进行。</td></tr>
  255. 	 * </table>
  256. 	 * @property LTweenLite.PlayStyle
  257. 	 * @type Object
  258. 	 * @static
  259. 	 * @since 1.10.0
  260. 	 * @public
  261. 	 * @examplelink <p><a href="../../../api/LTweenLite/playStyle.html" target="_blank">测试链接</a></p>
  262. 	 */
  263. 	LTweenLite.PlayStyle = {
  264. 		None : "none",
  265. 		Init : "init"
  266. 	};
  267. 	LTweenLite.TYPE_FRAME = "type_frame";
  268. 	LTweenLite.TYPE_TIMER = "type_timer";
  269. 	p = {
  270. 		count : function(){
  271. 			return this.tweens.length;
  272. 		},
  273. 		ll_show : function(){
  274. 			var s = this;
  275. 			var i, length = s.tweens.length, t;
  276. 			for (i = 0; i < length; i++) {
  277. 				t = s.tweens[i];
  278. 				if (t && t.tween && t.tween()) {
  279. 					s.tweens.splice(i, 1);
  280. 					i--;
  281. 					length = s.tweens.length;
  282. 					if (t.keep()) {
  283. 						s.add(t);
  284. 					}
  285. 				}
  286. 			}
  287. 		},
  288. 		/** @language chinese
  289. 		 * ［静态方法］用于创建一个LTweenLiteChild实例动画，让某对象的某些属性缓动到指定的目标的值（从当前值）。
  290. 		 * @method LTweenLite.to
  291. 		 * @static
  292. 		 * @param {Object} target 要缓动的对象(这里注意类型是Object,并不仅仅是LSprite,LBitmap).
  293. 		 * @param {float} duration 持续的时间(单位是秒)
  294. 		 * @param {Object} vars <p>一个Object,包含你想要缓动的所有属性，比如 onComplete, ease, etc。举例, 将一个 对象mc.x 缓动到 100 ，将 mc.y 缓动到 200 ，缓动结束后执行一个函数 myFunction, 这时候，你可以这么写: TweenLite.to(mc, 1, {x:100, y:200, onComplete:myFunction});</p>
  295. 		 * <p>除了使用对象的属性之外，你也可以使用一些特殊的值:</p>
  296. 		 * <table>
  297. 		 * <tr><th>属性</th><th>类型</th><th>说明</th></tr>
  298. 		 * <tr><td>tweenTimeline</td><td>float</td><td><p>动画播放的类型，默认值为LTweenLite.TYPE_FRAME。</p><p>LTweenLite.TYPE_FRAME:用桢来播放动画。</p><p>LTweenLite.TYPE_TIMER：用时间来播放动画。</p><p>为了测试两者的区别，接下来的demo在进行缓动时首先延迟2秒钟，使用LTweenLite.TYPE_FRAME播放是无间断，而使用LTweenLite.TYPE_TIMER播放则会直接跳到结束。<a href="../../../api/LTweenLite/to2.html" target="_blank">测试链接</a></p></td></tr>
  299. 		 * <tr><td>delay</td><td>float</td><td>延时几秒后开始缓动，这在有先后顺序的缓动效果中很有用</td></tr>
  300. 		 * <tr><td>ease</td><td>LEasing (or Function)</td><td>应用在variables上的缓动函数，比如LEasing.Quad.easeIn or LEasing.Cubic.easeOut。默认值是LEasing.None.easeIn.</td></tr>
  301. 		 * <tr><td>onComplete</td><td>Function</td><td>在缓动效果结束时触发此方法。回调函数是有参数的，使用方法同下面的例子。</td></tr>
  302. 		 * <tr><td>onStart</td><td>Function</td><td>在缓动开始时触发此方法.回调函数是有参数的，使用方法同下面的例子。</td></tr>
  303. 		 * <tr><td>onUpdate</td><td>Function</td><td>当属性值发生改变时(缓动进行中的每一帧，每一秒)触发此方法。回调函数是有参数的，使用方法同下面的例子。</td></tr>
  304. 		 * <tr><td>loop</td><td>Boolean</td><td>如果设定为 true, 缓动就会持续循环.</td></tr>
  305. 		 * <tr><td>playStyle</td><td>LTweenLite.PlayStyle</td><td>只有设定loop为true, playStyle才会有效。<a href="../../../api/LTweenLite/playStyle.html" target="_blank">测试链接</a></td></tr>
  306. 		 * <tr><td>coordinate</td><td>Array</td><td>你可以自定义缓动路径，路径的每个点必须是LPoint对象,或者类似于{x:1,y:2}的形式，<a href="../../../api/LTweenLite/toList.html" target="_blank">测试链接</a></td></tr>
  307. 		 * </table>
  308. 		 * @return {LTweenLiteChild} 一个LTweenLiteChild的实例
  309. 		 * @example
  310. 		 * 	LInit(1000/50,"legend",800,450,main);
  311. 		 * 	function main(){
  312. 		 * 		LGlobal.setDebug(true);
  313. 		 * 		var circle = new LSprite();
  314. 		 * 		circle.x = 50;
  315. 		 * 		circle.y = 50;
  316. 		 * 		circle.graphics.drawArc("#FF0000",1,[0,0,20,0,Math.PI*2],true,"#FF0000");
  317. 		 * 		addChild(circle);
  318. 		 * 		var rect = new LSprite();
  319. 		 * 		rect.x = 50;
  320. 		 * 		rect.y = 100;
  321. 		 * 		rect.graphics.drawRect("#FF00FF",1,[0,0,20,20],true,"#FF00FF");
  322. 		 * 		addChild(rect);
  323. 		 * 		LTweenLite.to(circle,2,{x:500,y:400,scaleX:3,scaleY:3,ease:LEasing.Strong.easeInOut})
  324. 		 * 		.to(circle,2,{x:700,y:50,scaleX:1,scaleY:1,ease:LEasing.Quint.easeIn,onComplete:function(e){
  325. 		 * 			trace(e.currentTarget);
  326. 		 * 			trace(e.target);//circle
  327. 		 * 		}});
  328. 		 * 		LTweenLite.to(rect,1,{x:500,loop:true,ease:LEasing.Sine.easeInOut})
  329. 		 * 		.to(rect,1,{x:50,ease:LEasing.Quad.easeInOut});
  330. 		 * 	}
  331. 		 * @examplelink <p><a href="../../../api/LTweenLite/to.html" target="_blank">测试链接</a></p>
  332. 		 * @public
  333. 		 * @since 1.4.0
  334. 		 */
  335. 		to : function ($target, $duration, $vars) {
  336. 			if (!$target) {
  337. 				return;
  338. 			}
  339. 			var s = this;
  340. 			var tween = new LTweenLiteChild({}, 0, {});
  341. 			s.tweens.push(tween);
  342. 			tween.to($target, $duration, $vars);
  343. 			return tween;
  344. 		},
  345. 		add : function (tween) {
  346. 			this.tweens.push(tween);
  347. 		},
  348. 		/** @language chinese
  349. 		 * ［静态方法］停止当前的缓动动画。
  350. 		 * @method LTweenLite.remove
  351. 		 * @static
  352. 		 * @param {LTweenLiteChild} tween 当前正在进行缓动的对象.
  353. 		 * @example
  354. 		 * 	LInit(1000/50,"legend",800,450,main);
  355. 		 * 	var tween;
  356. 		 * 	function main(){
  357. 		 * 		LGlobal.setDebug(true);
  358. 		 * 		var rect = new LSprite();
  359. 		 * 		rect.x = 50;
  360. 		 * 		rect.y = 50;
  361. 		 * 		rect.graphics.drawRect("#FF00FF",1,[0,0,20,20],true,"#FF00FF");
  362. 		 * 		addChild(rect);
  363. 		 * 		tween = LTweenLite.to(rect,1,{x:500,loop:true,ease:LEasing.Sine.easeInOut})
  364. 		 * 		.to(rect,1,{x:50,ease:LEasing.Quad.easeInOut});
  365. 		 * 		var stopButton = new LButtonSample1("stop");
  366. 		 * 		stopButton.x = 50;
  367. 		 * 		circle.y = 50;
  368. 		 * 		stopButton.y = 100;
  369. 		 * 		addChild(stopButton);
  370. 		 * 		stopButton.addEventListener(LMouseEvent.MOUSE_UP,stopTween);
  371. 		 * 	}
  372. 		 * 	function stopTween(e){
  373. 		 * 		LTweenLite.remove(tween);
  374. 		 * 	}
  375. 		 * @examplelink <p><a href="../../../api/LTweenLite/remove.html" target="_blank">测试链接</a></p>
  376. 		 * @public
  377. 		 * @since 1.8.0
  378. 		 */
  379. 		remove : function (tween) {
  380. 			var s = this;
  381. 			if (typeof tween == UNDEFINED) {
  382. 				return;
  383. 			}
  384. 			for (var i = 0, l = s.tweens.length; i < l; i++) {
  385. 				if (tween.objectIndex == s.tweens[i].objectIndex) {
  386. 					s.tweens.splice(i, 1);
  387. 					break;
  388. 				}
  389. 			}
  390. 		},
  391. 		/** @language chinese
  392. 		 * ［静态方法］停止所有正在进行的缓动动画。
  393. 		 * @method LTweenLite.removeAll
  394. 		 * @static
  395. 		 * @example
  396. 		 * 	LInit(1000/50,"legend",800,450,main);
  397. 		 * 	function main(){
  398. 		 * 		LGlobal.setDebug(true);
  399. 		 * 		var circle = new LSprite();
  400. 		 * 		circle.x = 50;
  401. 		 * 		circle.y = 50;
  402. 		 * 		circle.graphics.drawArc("#FF0000",1,[0,0,20,0,Math.PI*2],true,"#FF0000");
  403. 		 * 		addChild(circle);
  404. 		 * 		var rect = new LSprite();
  405. 		 * 		rect.x = 50;
  406. 		 * 		rect.y = 50;
  407. 		 * 		rect.graphics.drawRect("#FF00FF",1,[0,0,20,20],true,"#FF00FF");
  408. 		 * 		addChild(rect);
  409. 		 * 		LTweenLite.to(circle,1,{x:500,y:400,scaleX:3,scaleY:3,loop:true,ease:LEasing.Strong.easeInOut})
  410. 		 * 		.to(circle,1,{x:700,y:50,scaleX:1,scaleY:1,ease:LEasing.Quint.easeIn})
  411. 		 * 		.to(circle,1,{x:50,y:50,ease:LEasing.Quint.easeIn});
  412. 		 * 		LTweenLite.to(rect,1,{x:500,loop:true,ease:LEasing.Sine.easeInOut})
  413. 		 * 		.to(rect,1,{x:50,ease:LEasing.Quad.easeInOut});
  414. 		 * 		var stopButton = new LButtonSample1("stopAll");
  415. 		 * 		stopButton.x = 50;
  416. 		 * 		circle.y = 50;
  417. 		 * 		stopButton.y = 100;
  418. 		 * 		addChild(stopButton);
  419. 		 * 		stopButton.addEventListener(LMouseEvent.MOUSE_UP,stopTween);
  420. 		 * 	}
  421. 		 * 	function stopTween(e){
  422. 		 * 		LTweenLite.removeAll();
  423. 		 * 	}
  424. 		 * @examplelink <p><a href="../../../api/LTweenLite/removeAll.html" target="_blank">测试链接</a></p>
  425. 		 * @public
  426. 		 * @since 1.8.0
  427. 		 */
  428. 		removeAll : function () {
  429. 			this.tweens.splice(0, this.tweens.length);
  430. 		},
  431. 		/** @language chinese
  432. 		 * ［静态方法］暂停所有正在进行的缓动动画。
  433. 		 * @method LTweenLite.pauseAll
  434. 		 * @static
  435. 		 * @example
  436. 		 * 	LTweenLite.pauseAll();
  437. 		 * @examplelink <p><a href="../../../api/LTweenLite/pauseAll_resumeAll.html" target="_blank">测试链接</a></p>
  438. 		 * @public
  439. 		 * @since 1.8.0
  440. 		 */
  441. 		pauseAll : function () {
  442. 			for(var i = 0, l = this.tweens.length; i < l; i++){
  443. 				this.tweens[i].pause();
  444. 			}
  445. 		},
  446. 		/** @language chinese
  447. 		 * ［静态方法］重新播放被暂停的所有缓动动画。
  448. 		 * @method LTweenLite.resumeAll
  449. 		 * @static
  450. 		 * @example
  451. 		 * 	LTweenLite.pauseAll();
  452. 		 * 	LTweenLite.resumeAll();
  453. 		 * @examplelink <p><a href="../../../api/LTweenLite/pauseAll_resumeAll.html" target="_blank">测试链接</a></p>
  454. 		 * @public
  455. 		 * @since 1.8.0
  456. 		 */
  457. 		resumeAll : function () {
  458. 			for(var i = 0, l = this.tweens.length; i < l; i++){
  459. 				this.tweens[i].resume();
  460. 			}
  461. 		}
  462. 	};
  463. 	for (var k in p) {
  464. 		LTweenLite.prototype[k] = p[k];
  465. 	}
  466. 	LTweenLiteTimeline = new LTweenLite();
  467. 	LGlobal.childList.push(LTweenLiteTimeline);
  468. 	var tween = new LTweenLite();
  469. 	tween.TYPE_FRAME = LTweenLite.TYPE_FRAME;
  470. 	tween.TYPE_TIMER = LTweenLite.TYPE_TIMER;
  471. 	tween.PlayStyle = LTweenLite.PlayStyle;
  472. 	LGlobal.childList.push(tween);
  473. 	return tween;
  474. })();
  475.