TweenCollection.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588
  1. import clone from "../Core/clone.js";
  2. import defaultValue from "../Core/defaultValue.js";
  3. import defined from "../Core/defined.js";
  4. import DeveloperError from "../Core/DeveloperError.js";
  5. import EasingFunction from "../Core/EasingFunction.js";
  6. import getTimestamp from "../Core/getTimestamp.js";
  7. import TimeConstants from "../Core/TimeConstants.js";
  8. import TweenJS from "../ThirdParty/Tween.js";
  9. /**
  10. * A tween is an animation that interpolates the properties of two objects using an {@link EasingFunction}. Create
  11. * one using {@link Scene#tweens} and {@link TweenCollection#add} and related add functions.
  12. *
  13. * @alias Tween
  14. * @constructor
  15. *
  16. * @private
  17. */
  18. function Tween(
  19. tweens,
  20. tweenjs,
  21. startObject,
  22. stopObject,
  23. duration,
  24. delay,
  25. easingFunction,
  26. update,
  27. complete,
  28. cancel
  29. ) {
  30. this._tweens = tweens;
  31. this._tweenjs = tweenjs;
  32. this._startObject = clone(startObject);
  33. this._stopObject = clone(stopObject);
  34. this._duration = duration;
  35. this._delay = delay;
  36. this._easingFunction = easingFunction;
  37. this._update = update;
  38. this._complete = complete;
  39. /**
  40. * The callback to call if the tween is canceled either because {@link Tween#cancelTween}
  41. * was called or because the tween was removed from the collection.
  42. *
  43. * @type {TweenCollection.TweenCancelledCallback}
  44. */
  45. this.cancel = cancel;
  46. /**
  47. * @private
  48. */
  49. this.needsStart = true;
  50. }
  51. Object.defineProperties(Tween.prototype, {
  52. /**
  53. * An object with properties for initial values of the tween. The properties of this object are changed during the tween's animation.
  54. * @memberof Tween.prototype
  55. *
  56. * @type {Object}
  57. * @readonly
  58. */
  59. startObject: {
  60. get: function () {
  61. return this._startObject;
  62. },
  63. },
  64. /**
  65. * An object with properties for the final values of the tween.
  66. * @memberof Tween.prototype
  67. *
  68. * @type {Object}
  69. * @readonly
  70. */
  71. stopObject: {
  72. get: function () {
  73. return this._stopObject;
  74. },
  75. },
  76. /**
  77. * The duration, in seconds, for the tween. The tween is automatically removed from the collection when it stops.
  78. * @memberof Tween.prototype
  79. *
  80. * @type {Number}
  81. * @readonly
  82. */
  83. duration: {
  84. get: function () {
  85. return this._duration;
  86. },
  87. },
  88. /**
  89. * The delay, in seconds, before the tween starts animating.
  90. * @memberof Tween.prototype
  91. *
  92. * @type {Number}
  93. * @readonly
  94. */
  95. delay: {
  96. get: function () {
  97. return this._delay;
  98. },
  99. },
  100. /**
  101. * Determines the curve for animtion.
  102. * @memberof Tween.prototype
  103. *
  104. * @type {EasingFunction}
  105. * @readonly
  106. */
  107. easingFunction: {
  108. get: function () {
  109. return this._easingFunction;
  110. },
  111. },
  112. /**
  113. * The callback to call at each animation update (usually tied to the a rendered frame).
  114. * @memberof Tween.prototype
  115. *
  116. * @type {TweenCollection.TweenUpdateCallback}
  117. * @readonly
  118. */
  119. update: {
  120. get: function () {
  121. return this._update;
  122. },
  123. },
  124. /**
  125. * The callback to call when the tween finishes animating.
  126. * @memberof Tween.prototype
  127. *
  128. * @type {TweenCollection.TweenCompleteCallback}
  129. * @readonly
  130. */
  131. complete: {
  132. get: function () {
  133. return this._complete;
  134. },
  135. },
  136. /**
  137. * @memberof Tween.prototype
  138. *
  139. * @private
  140. */
  141. tweenjs: {
  142. get: function () {
  143. return this._tweenjs;
  144. },
  145. },
  146. });
  147. /**
  148. * Cancels the tween calling the {@link Tween#cancel} callback if one exists. This
  149. * has no effect if the tween finished or was already canceled.
  150. */
  151. Tween.prototype.cancelTween = function () {
  152. this._tweens.remove(this);
  153. };
  154. /**
  155. * A collection of tweens for animating properties. Commonly accessed using {@link Scene#tweens}.
  156. *
  157. * @alias TweenCollection
  158. * @constructor
  159. *
  160. * @private
  161. */
  162. function TweenCollection() {
  163. this._tweens = [];
  164. }
  165. Object.defineProperties(TweenCollection.prototype, {
  166. /**
  167. * The number of tweens in the collection.
  168. * @memberof TweenCollection.prototype
  169. *
  170. * @type {Number}
  171. * @readonly
  172. */
  173. length: {
  174. get: function () {
  175. return this._tweens.length;
  176. },
  177. },
  178. });
  179. /**
  180. * Creates a tween for animating between two sets of properties. The tween starts animating at the next call to {@link TweenCollection#update}, which
  181. * is implicit when {@link Viewer} or {@link CesiumWidget} render the scene.
  182. *
  183. * @param {Object} [options] Object with the following properties:
  184. * @param {Object} options.startObject An object with properties for initial values of the tween. The properties of this object are changed during the tween's animation.
  185. * @param {Object} options.stopObject An object with properties for the final values of the tween.
  186. * @param {Number} options.duration The duration, in seconds, for the tween. The tween is automatically removed from the collection when it stops.
  187. * @param {Number} [options.delay=0.0] The delay, in seconds, before the tween starts animating.
  188. * @param {EasingFunction} [options.easingFunction=EasingFunction.LINEAR_NONE] Determines the curve for animtion.
  189. * @param {TweenCollection.TweenUpdateCallback} [options.update] The callback to call at each animation update (usually tied to the a rendered frame).
  190. * @param {TweenCollection.TweenCompleteCallback} [options.complete] The callback to call when the tween finishes animating.
  191. * @param {TweenCollection.TweenCancelledCallback} [options.cancel] The callback to call if the tween is canceled either because {@link Tween#cancelTween} was called or because the tween was removed from the collection.
  192. * @returns {Tween} The tween.
  193. *
  194. * @exception {DeveloperError} options.duration must be positive.
  195. */
  196. TweenCollection.prototype.add = function (options) {
  197. options = defaultValue(options, defaultValue.EMPTY_OBJECT);
  198. //>>includeStart('debug', pragmas.debug);
  199. if (!defined(options.startObject) || !defined(options.stopObject)) {
  200. throw new DeveloperError(
  201. "options.startObject and options.stopObject are required."
  202. );
  203. }
  204. if (!defined(options.duration) || options.duration < 0.0) {
  205. throw new DeveloperError(
  206. "options.duration is required and must be positive."
  207. );
  208. }
  209. //>>includeEnd('debug');
  210. if (options.duration === 0.0) {
  211. if (defined(options.complete)) {
  212. options.complete();
  213. }
  214. return new Tween(this);
  215. }
  216. const duration = options.duration / TimeConstants.SECONDS_PER_MILLISECOND;
  217. const delayInSeconds = defaultValue(options.delay, 0.0);
  218. const delay = delayInSeconds / TimeConstants.SECONDS_PER_MILLISECOND;
  219. const easingFunction = defaultValue(
  220. options.easingFunction,
  221. EasingFunction.LINEAR_NONE
  222. );
  223. const value = options.startObject;
  224. const tweenjs = new TweenJS.Tween(value);
  225. tweenjs.to(clone(options.stopObject), duration);
  226. tweenjs.delay(delay);
  227. tweenjs.easing(easingFunction);
  228. if (defined(options.update)) {
  229. tweenjs.onUpdate(function () {
  230. options.update(value);
  231. });
  232. }
  233. tweenjs.onComplete(defaultValue(options.complete, null));
  234. tweenjs.repeat(defaultValue(options._repeat, 0.0));
  235. const tween = new Tween(
  236. this,
  237. tweenjs,
  238. options.startObject,
  239. options.stopObject,
  240. options.duration,
  241. delayInSeconds,
  242. easingFunction,
  243. options.update,
  244. options.complete,
  245. options.cancel
  246. );
  247. this._tweens.push(tween);
  248. return tween;
  249. };
  250. /**
  251. * Creates a tween for animating a scalar property on the given object. The tween starts animating at the next call to {@link TweenCollection#update}, which
  252. * is implicit when {@link Viewer} or {@link CesiumWidget} render the scene.
  253. *
  254. * @param {Object} [options] Object with the following properties:
  255. * @param {Object} options.object The object containing the property to animate.
  256. * @param {String} options.property The name of the property to animate.
  257. * @param {Number} options.startValue The initial value.
  258. * @param {Number} options.stopValue The final value.
  259. * @param {Number} [options.duration=3.0] The duration, in seconds, for the tween. The tween is automatically removed from the collection when it stops.
  260. * @param {Number} [options.delay=0.0] The delay, in seconds, before the tween starts animating.
  261. * @param {EasingFunction} [options.easingFunction=EasingFunction.LINEAR_NONE] Determines the curve for animtion.
  262. * @param {TweenCollection.TweenUpdateCallback} [options.update] The callback to call at each animation update (usually tied to the a rendered frame).
  263. * @param {TweenCollection.TweenCompleteCallback} [options.complete] The callback to call when the tween finishes animating.
  264. * @param {TweenCollection.TweenCancelledCallback} [options.cancel] The callback to call if the tween is canceled either because {@link Tween#cancelTween} was called or because the tween was removed from the collection.
  265. * @returns {Tween} The tween.
  266. *
  267. * @exception {DeveloperError} options.object must have the specified property.
  268. * @exception {DeveloperError} options.duration must be positive.
  269. */
  270. TweenCollection.prototype.addProperty = function (options) {
  271. options = defaultValue(options, defaultValue.EMPTY_OBJECT);
  272. const object = options.object;
  273. const property = options.property;
  274. const startValue = options.startValue;
  275. const stopValue = options.stopValue;
  276. //>>includeStart('debug', pragmas.debug);
  277. if (!defined(object) || !defined(options.property)) {
  278. throw new DeveloperError(
  279. "options.object and options.property are required."
  280. );
  281. }
  282. if (!defined(object[property])) {
  283. throw new DeveloperError(
  284. "options.object must have the specified property."
  285. );
  286. }
  287. if (!defined(startValue) || !defined(stopValue)) {
  288. throw new DeveloperError(
  289. "options.startValue and options.stopValue are required."
  290. );
  291. }
  292. //>>includeEnd('debug');
  293. function update(value) {
  294. object[property] = value.value;
  295. }
  296. return this.add({
  297. startObject: {
  298. value: startValue,
  299. },
  300. stopObject: {
  301. value: stopValue,
  302. },
  303. duration: defaultValue(options.duration, 3.0),
  304. delay: options.delay,
  305. easingFunction: options.easingFunction,
  306. update: update,
  307. complete: options.complete,
  308. cancel: options.cancel,
  309. _repeat: options._repeat,
  310. });
  311. };
  312. /**
  313. * Creates a tween for animating the alpha of all color uniforms on a {@link Material}. The tween starts animating at the next call to {@link TweenCollection#update}, which
  314. * is implicit when {@link Viewer} or {@link CesiumWidget} render the scene.
  315. *
  316. * @param {Object} [options] Object with the following properties:
  317. * @param {Material} options.material The material to animate.
  318. * @param {Number} [options.startValue=0.0] The initial alpha value.
  319. * @param {Number} [options.stopValue=1.0] The final alpha value.
  320. * @param {Number} [options.duration=3.0] The duration, in seconds, for the tween. The tween is automatically removed from the collection when it stops.
  321. * @param {Number} [options.delay=0.0] The delay, in seconds, before the tween starts animating.
  322. * @param {EasingFunction} [options.easingFunction=EasingFunction.LINEAR_NONE] Determines the curve for animtion.
  323. * @param {TweenCollection.TweenUpdateCallback} [options.update] The callback to call at each animation update (usually tied to the a rendered frame).
  324. * @param {TweenCollection.TweenCompleteCallback} [options.complete] The callback to call when the tween finishes animating.
  325. * @param {TweenCollection.TweenCancelledCallback} [options.cancel] The callback to call if the tween is canceled either because {@link Tween#cancelTween} was called or because the tween was removed from the collection.
  326. * @returns {Tween} The tween.
  327. *
  328. * @exception {DeveloperError} material has no properties with alpha components.
  329. * @exception {DeveloperError} options.duration must be positive.
  330. */
  331. TweenCollection.prototype.addAlpha = function (options) {
  332. options = defaultValue(options, defaultValue.EMPTY_OBJECT);
  333. const material = options.material;
  334. //>>includeStart('debug', pragmas.debug);
  335. if (!defined(material)) {
  336. throw new DeveloperError("options.material is required.");
  337. }
  338. //>>includeEnd('debug');
  339. const properties = [];
  340. for (const property in material.uniforms) {
  341. if (
  342. material.uniforms.hasOwnProperty(property) &&
  343. defined(material.uniforms[property]) &&
  344. defined(material.uniforms[property].alpha)
  345. ) {
  346. properties.push(property);
  347. }
  348. }
  349. //>>includeStart('debug', pragmas.debug);
  350. if (properties.length === 0) {
  351. throw new DeveloperError(
  352. "material has no properties with alpha components."
  353. );
  354. }
  355. //>>includeEnd('debug');
  356. function update(value) {
  357. const length = properties.length;
  358. for (let i = 0; i < length; ++i) {
  359. material.uniforms[properties[i]].alpha = value.alpha;
  360. }
  361. }
  362. return this.add({
  363. startObject: {
  364. alpha: defaultValue(options.startValue, 0.0), // Default to fade in
  365. },
  366. stopObject: {
  367. alpha: defaultValue(options.stopValue, 1.0),
  368. },
  369. duration: defaultValue(options.duration, 3.0),
  370. delay: options.delay,
  371. easingFunction: options.easingFunction,
  372. update: update,
  373. complete: options.complete,
  374. cancel: options.cancel,
  375. });
  376. };
  377. /**
  378. * Creates a tween for animating the offset uniform of a {@link Material}. The tween starts animating at the next call to {@link TweenCollection#update}, which
  379. * is implicit when {@link Viewer} or {@link CesiumWidget} render the scene.
  380. *
  381. * @param {Object} [options] Object with the following properties:
  382. * @param {Material} options.material The material to animate.
  383. * @param {Number} options.startValue The initial alpha value.
  384. * @param {Number} options.stopValue The final alpha value.
  385. * @param {Number} [options.duration=3.0] The duration, in seconds, for the tween. The tween is automatically removed from the collection when it stops.
  386. * @param {Number} [options.delay=0.0] The delay, in seconds, before the tween starts animating.
  387. * @param {EasingFunction} [options.easingFunction=EasingFunction.LINEAR_NONE] Determines the curve for animtion.
  388. * @param {TweenCollection.TweenUpdateCallback} [options.update] The callback to call at each animation update (usually tied to the a rendered frame).
  389. * @param {TweenCollection.TweenCancelledCallback} [options.cancel] The callback to call if the tween is canceled either because {@link Tween#cancelTween} was called or because the tween was removed from the collection.
  390. * @returns {Tween} The tween.
  391. *
  392. * @exception {DeveloperError} material.uniforms must have an offset property.
  393. * @exception {DeveloperError} options.duration must be positive.
  394. */
  395. TweenCollection.prototype.addOffsetIncrement = function (options) {
  396. options = defaultValue(options, defaultValue.EMPTY_OBJECT);
  397. const material = options.material;
  398. //>>includeStart('debug', pragmas.debug);
  399. if (!defined(material)) {
  400. throw new DeveloperError("material is required.");
  401. }
  402. if (!defined(material.uniforms.offset)) {
  403. throw new DeveloperError("material.uniforms must have an offset property.");
  404. }
  405. //>>includeEnd('debug');
  406. const uniforms = material.uniforms;
  407. return this.addProperty({
  408. object: uniforms,
  409. property: "offset",
  410. startValue: uniforms.offset,
  411. stopValue: uniforms.offset + 1,
  412. duration: options.duration,
  413. delay: options.delay,
  414. easingFunction: options.easingFunction,
  415. update: options.update,
  416. cancel: options.cancel,
  417. _repeat: Infinity,
  418. });
  419. };
  420. /**
  421. * Removes a tween from the collection.
  422. * <p>
  423. * This calls the {@link Tween#cancel} callback if the tween has one.
  424. * </p>
  425. *
  426. * @param {Tween} tween The tween to remove.
  427. * @returns {Boolean} <code>true</code> if the tween was removed; <code>false</code> if the tween was not found in the collection.
  428. */
  429. TweenCollection.prototype.remove = function (tween) {
  430. if (!defined(tween)) {
  431. return false;
  432. }
  433. const index = this._tweens.indexOf(tween);
  434. if (index !== -1) {
  435. tween.tweenjs.stop();
  436. if (defined(tween.cancel)) {
  437. tween.cancel();
  438. }
  439. this._tweens.splice(index, 1);
  440. return true;
  441. }
  442. return false;
  443. };
  444. /**
  445. * Removes all tweens from the collection.
  446. * <p>
  447. * This calls the {@link Tween#cancel} callback for each tween that has one.
  448. * </p>
  449. */
  450. TweenCollection.prototype.removeAll = function () {
  451. const tweens = this._tweens;
  452. for (let i = 0; i < tweens.length; ++i) {
  453. const tween = tweens[i];
  454. tween.tweenjs.stop();
  455. if (defined(tween.cancel)) {
  456. tween.cancel();
  457. }
  458. }
  459. tweens.length = 0;
  460. };
  461. /**
  462. * Determines whether this collection contains a given tween.
  463. *
  464. * @param {Tween} tween The tween to check for.
  465. * @returns {Boolean} <code>true</code> if this collection contains the tween, <code>false</code> otherwise.
  466. */
  467. TweenCollection.prototype.contains = function (tween) {
  468. return defined(tween) && this._tweens.indexOf(tween) !== -1;
  469. };
  470. /**
  471. * Returns the tween in the collection at the specified index. Indices are zero-based
  472. * and increase as tweens are added. Removing a tween shifts all tweens after
  473. * it to the left, changing their indices. This function is commonly used to iterate over
  474. * all the tween in the collection.
  475. *
  476. * @param {Number} index The zero-based index of the tween.
  477. * @returns {Tween} The tween at the specified index.
  478. *
  479. * @example
  480. * // Output the duration of all the tweens in the collection.
  481. * const tweens = scene.tweens;
  482. * const length = tweens.length;
  483. * for (let i = 0; i < length; ++i) {
  484. * console.log(tweens.get(i).duration);
  485. * }
  486. */
  487. TweenCollection.prototype.get = function (index) {
  488. //>>includeStart('debug', pragmas.debug);
  489. if (!defined(index)) {
  490. throw new DeveloperError("index is required.");
  491. }
  492. //>>includeEnd('debug');
  493. return this._tweens[index];
  494. };
  495. /**
  496. * Updates the tweens in the collection to be at the provide time. When a tween finishes, it is removed
  497. * from the collection.
  498. *
  499. * @param {Number} [time=getTimestamp()] The time in seconds. By default tweens are synced to the system clock.
  500. */
  501. TweenCollection.prototype.update = function (time) {
  502. const tweens = this._tweens;
  503. let i = 0;
  504. time = defined(time)
  505. ? time / TimeConstants.SECONDS_PER_MILLISECOND
  506. : getTimestamp();
  507. while (i < tweens.length) {
  508. const tween = tweens[i];
  509. const tweenjs = tween.tweenjs;
  510. if (tween.needsStart) {
  511. tween.needsStart = false;
  512. tweenjs.start(time);
  513. } else if (tweenjs.update(time)) {
  514. i++;
  515. } else {
  516. tweenjs.stop();
  517. tweens.splice(i, 1);
  518. }
  519. }
  520. };
  521. /**
  522. * A function that will execute when a tween completes.
  523. * @callback TweenCollection.TweenCompleteCallback
  524. */
  525. /**
  526. * A function that will execute when a tween updates.
  527. * @callback TweenCollection.TweenUpdateCallback
  528. */
  529. /**
  530. * A function that will execute when a tween is cancelled.
  531. * @callback TweenCollection.TweenCancelledCallback
  532. */
  533. export default TweenCollection;