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. })();