index.js 61 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var gLite = require('@antv/g-lite');
  4. var util = require('@antv/util');
  5. function _defineProperties(target, props) {
  6. for (var i = 0; i < props.length; i++) {
  7. var descriptor = props[i];
  8. descriptor.enumerable = descriptor.enumerable || false;
  9. descriptor.configurable = true;
  10. if ("value" in descriptor) descriptor.writable = true;
  11. Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
  12. }
  13. }
  14. function _createClass(Constructor, protoProps, staticProps) {
  15. if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  16. if (staticProps) _defineProperties(Constructor, staticProps);
  17. Object.defineProperty(Constructor, "prototype", {
  18. writable: false
  19. });
  20. return Constructor;
  21. }
  22. function _inheritsLoose(subClass, superClass) {
  23. subClass.prototype = Object.create(superClass.prototype);
  24. subClass.prototype.constructor = subClass;
  25. _setPrototypeOf(subClass, superClass);
  26. }
  27. function _setPrototypeOf(o, p) {
  28. _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
  29. o.__proto__ = p;
  30. return o;
  31. };
  32. return _setPrototypeOf(o, p);
  33. }
  34. function _toPrimitive(input, hint) {
  35. if (typeof input !== "object" || input === null) return input;
  36. var prim = input[Symbol.toPrimitive];
  37. if (prim !== undefined) {
  38. var res = prim.call(input, hint || "default");
  39. if (typeof res !== "object") return res;
  40. throw new TypeError("@@toPrimitive must return a primitive value.");
  41. }
  42. return (hint === "string" ? String : Number)(input);
  43. }
  44. function _toPropertyKey(arg) {
  45. var key = _toPrimitive(arg, "string");
  46. return typeof key === "symbol" ? key : String(key);
  47. }
  48. /**
  49. * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationPlaybackEvent
  50. */
  51. var AnimationEvent = /*#__PURE__*/function (_FederatedEvent) {
  52. _inheritsLoose(AnimationEvent, _FederatedEvent);
  53. function AnimationEvent(manager, target, currentTime, timelineTime) {
  54. var _this;
  55. _this = _FederatedEvent.call(this, manager) || this;
  56. _this.currentTime = void 0;
  57. _this.timelineTime = void 0;
  58. _this.currentTime = currentTime;
  59. _this.timelineTime = timelineTime;
  60. // @ts-ignore
  61. _this.target = target;
  62. _this.type = 'finish';
  63. _this.bubbles = false;
  64. // @ts-ignore
  65. _this.currentTarget = target;
  66. _this.defaultPrevented = false;
  67. _this.eventPhase = _this.AT_TARGET;
  68. _this.timeStamp = Date.now();
  69. _this.currentTime = currentTime;
  70. _this.timelineTime = timelineTime;
  71. return _this;
  72. }
  73. return AnimationEvent;
  74. }(gLite.FederatedEvent);
  75. var sequenceNumber = 0;
  76. /**
  77. * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/Animation
  78. */
  79. var Animation = /*#__PURE__*/function () {
  80. function Animation(effect, timeline) {
  81. var _this$effect;
  82. /**
  83. * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/effect
  84. */
  85. this.effect = void 0;
  86. /**
  87. * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/timeline
  88. */
  89. this.timeline = void 0;
  90. /**
  91. * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/id
  92. */
  93. this.id = void 0;
  94. this.currentTimePending = false;
  95. /**
  96. * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/playState
  97. */
  98. // playState: AnimationPlayState;
  99. this._idle = true;
  100. this._paused = false;
  101. this._finishedFlag = true;
  102. /**
  103. * record previos state
  104. */
  105. this.oldPlayState = void 0;
  106. this._holdTime = void 0;
  107. this.readyPromise = void 0;
  108. this.finishedPromise = void 0;
  109. // eslint-disable-next-line @typescript-eslint/ban-types
  110. this.resolveReadyPromise = void 0;
  111. // eslint-disable-next-line @typescript-eslint/ban-types
  112. this.rejectReadyPromise = void 0;
  113. // eslint-disable-next-line @typescript-eslint/ban-types
  114. this.resolveFinishedPromise = void 0;
  115. // eslint-disable-next-line @typescript-eslint/ban-types
  116. this.rejectFinishedPromise = void 0;
  117. /**
  118. * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/onfinish
  119. */
  120. this.onfinish = void 0;
  121. /**
  122. * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/oncancel
  123. */
  124. this.oncancel = void 0;
  125. /**
  126. * get called after each frame when running
  127. */
  128. this.onframe = void 0;
  129. /**
  130. * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/currentTime
  131. */
  132. this._currentTime = 0;
  133. /**
  134. * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/startTime
  135. */
  136. this._startTime = void 0;
  137. this._playbackRate = 1;
  138. this._totalDuration = void 0;
  139. this._inEffect = void 0;
  140. this._inTimeline = true;
  141. this.onremove = void 0;
  142. this.effect = effect;
  143. effect.animation = this;
  144. this.timeline = timeline;
  145. this.id = "" + sequenceNumber++;
  146. this._inEffect = !!this.effect.update(0);
  147. this._totalDuration = Number((_this$effect = this.effect) === null || _this$effect === void 0 ? void 0 : _this$effect.getComputedTiming().endTime);
  148. this._holdTime = 0;
  149. this._paused = false;
  150. this.oldPlayState = 'idle';
  151. this.updatePromises();
  152. }
  153. /**
  154. * state machine,
  155. * resolve/reject ready/finished Promise according to current state
  156. */
  157. var _proto = Animation.prototype;
  158. _proto.updatePromises = function updatePromises() {
  159. var oldPlayState = this.oldPlayState;
  160. var newPlayState = this.pending ? 'pending' : this.playState;
  161. if (this.readyPromise && newPlayState !== oldPlayState) {
  162. if (newPlayState === 'idle') {
  163. this.rejectReadyPromise();
  164. this.readyPromise = undefined;
  165. } else if (oldPlayState === 'pending') {
  166. this.resolveReadyPromise();
  167. } else if (newPlayState === 'pending') {
  168. this.readyPromise = undefined;
  169. }
  170. }
  171. if (this.finishedPromise && newPlayState !== oldPlayState) {
  172. if (newPlayState === 'idle') {
  173. this.rejectFinishedPromise();
  174. this.finishedPromise = undefined;
  175. } else if (newPlayState === 'finished') {
  176. this.resolveFinishedPromise();
  177. } else if (oldPlayState === 'finished') {
  178. this.finishedPromise = undefined;
  179. }
  180. }
  181. this.oldPlayState = newPlayState;
  182. return this.readyPromise || this.finishedPromise;
  183. };
  184. _proto.play = function play() {
  185. this.updatePromises();
  186. this._paused = false;
  187. if (this._isFinished || this._idle) {
  188. this.rewind();
  189. this._startTime = null;
  190. }
  191. this._finishedFlag = false;
  192. this._idle = false;
  193. this.ensureAlive();
  194. this.timeline.applyDirtiedAnimation(this);
  195. if (this.timeline.animations.indexOf(this) === -1) {
  196. this.timeline.animations.push(this);
  197. }
  198. this.updatePromises();
  199. };
  200. _proto.pause = function pause() {
  201. this.updatePromises();
  202. if (this.currentTime) {
  203. this._holdTime = this.currentTime;
  204. }
  205. if (!this._isFinished && !this._paused && !this._idle) {
  206. this.currentTimePending = true;
  207. } else if (this._idle) {
  208. this.rewind();
  209. this._idle = false;
  210. }
  211. this._startTime = null;
  212. this._paused = true;
  213. this.updatePromises();
  214. };
  215. _proto.finish = function finish() {
  216. this.updatePromises();
  217. if (this._idle) return;
  218. this.currentTime = this._playbackRate > 0 ? this._totalDuration : 0;
  219. this._startTime = this._totalDuration - this.currentTime;
  220. this.currentTimePending = false;
  221. this.timeline.applyDirtiedAnimation(this);
  222. this.updatePromises();
  223. };
  224. _proto.cancel = function cancel() {
  225. var _this = this;
  226. this.updatePromises();
  227. if (!this._inEffect) return;
  228. this._inEffect = false;
  229. this._idle = true;
  230. this._paused = false;
  231. this._finishedFlag = true;
  232. this._currentTime = 0;
  233. this._startTime = null;
  234. this.effect.update(null);
  235. // effects are invalid after cancellation as the animation state
  236. // needs to un-apply.
  237. this.timeline.applyDirtiedAnimation(this);
  238. this.updatePromises();
  239. /**
  240. * 1. Reject the current finished promise with a DOMException named "AbortError".
  241. * 2. Let current finished promise be a new promise
  242. * @see https://w3c.github.io/csswg-drafts/web-animations-1/#canceling-an-animation-section
  243. */
  244. // if (this.finishedPromise) {
  245. // this.rejectFinishedPromise();
  246. // this.finishedPromise = undefined;
  247. // }
  248. if (this.oncancel) {
  249. var event = new AnimationEvent(null, this, this.currentTime, null);
  250. setTimeout(function () {
  251. _this.oncancel(event);
  252. });
  253. }
  254. };
  255. _proto.reverse = function reverse() {
  256. this.updatePromises();
  257. var oldCurrentTime = this.currentTime;
  258. this.playbackRate *= -1;
  259. this.play();
  260. if (oldCurrentTime !== null) {
  261. this.currentTime = oldCurrentTime;
  262. }
  263. this.updatePromises();
  264. }
  265. /**
  266. * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/updatePlaybackRate
  267. */;
  268. _proto.updatePlaybackRate = function updatePlaybackRate(playbackRate) {
  269. this.playbackRate = playbackRate;
  270. };
  271. _proto.targetAnimations = function targetAnimations() {
  272. var _this$effect2;
  273. var target = (_this$effect2 = this.effect) === null || _this$effect2 === void 0 ? void 0 : _this$effect2.target;
  274. return target.getAnimations();
  275. };
  276. _proto.markTarget = function markTarget() {
  277. var animations = this.targetAnimations();
  278. if (animations.indexOf(this) === -1) {
  279. animations.push(this);
  280. }
  281. };
  282. _proto.unmarkTarget = function unmarkTarget() {
  283. var animations = this.targetAnimations();
  284. var index = animations.indexOf(this);
  285. if (index !== -1) {
  286. animations.splice(index, 1);
  287. }
  288. };
  289. _proto.tick = function tick(timelineTime, isAnimationFrame) {
  290. if (!this._idle && !this._paused) {
  291. if (this._startTime === null) {
  292. if (isAnimationFrame) {
  293. this.startTime = timelineTime - this._currentTime / this.playbackRate;
  294. }
  295. } else if (!this._isFinished) {
  296. this.tickCurrentTime((timelineTime - this._startTime) * this.playbackRate);
  297. }
  298. }
  299. if (isAnimationFrame) {
  300. this.currentTimePending = false;
  301. this.fireEvents(timelineTime);
  302. }
  303. };
  304. _proto.rewind = function rewind() {
  305. if (this.playbackRate >= 0) {
  306. this.currentTime = 0;
  307. } else if (this._totalDuration < Infinity) {
  308. this.currentTime = this._totalDuration;
  309. } else {
  310. throw new Error('Unable to rewind negative playback rate animation with infinite duration');
  311. }
  312. };
  313. _proto.persist = function persist() {
  314. throw new Error(gLite.ERROR_MSG_METHOD_NOT_IMPLEMENTED);
  315. };
  316. _proto.addEventListener = function addEventListener(type, listener, options) {
  317. throw new Error(gLite.ERROR_MSG_METHOD_NOT_IMPLEMENTED);
  318. };
  319. _proto.removeEventListener = function removeEventListener(type, listener, options) {
  320. throw new Error(gLite.ERROR_MSG_METHOD_NOT_IMPLEMENTED);
  321. };
  322. _proto.dispatchEvent = function dispatchEvent(event) {
  323. throw new Error(gLite.ERROR_MSG_METHOD_NOT_IMPLEMENTED);
  324. };
  325. // replaceState: AnimationReplaceState;
  326. _proto.commitStyles = function commitStyles() {
  327. throw new Error(gLite.ERROR_MSG_METHOD_NOT_IMPLEMENTED);
  328. };
  329. _proto.ensureAlive = function ensureAlive() {
  330. // If an animation is playing backwards and is not fill backwards/both
  331. // then it should go out of effect when it reaches the start of its
  332. // active interval (currentTime === 0).
  333. if (this.playbackRate < 0 && this.currentTime === 0) {
  334. var _this$effect3;
  335. this._inEffect = !!((_this$effect3 = this.effect) === null || _this$effect3 === void 0 ? void 0 : _this$effect3.update(-1));
  336. } else {
  337. var _this$effect4;
  338. this._inEffect = !!((_this$effect4 = this.effect) === null || _this$effect4 === void 0 ? void 0 : _this$effect4.update(this.currentTime));
  339. }
  340. if (!this._inTimeline && (this._inEffect || !this._finishedFlag)) {
  341. this._inTimeline = true;
  342. this.timeline.animations.push(this);
  343. }
  344. };
  345. _proto.tickCurrentTime = function tickCurrentTime(newTime, ignoreLimit) {
  346. if (newTime !== this._currentTime) {
  347. this._currentTime = newTime;
  348. if (this._isFinished && !ignoreLimit) {
  349. this._currentTime = this._playbackRate > 0 ? this._totalDuration : 0;
  350. }
  351. this.ensureAlive();
  352. }
  353. };
  354. _proto.fireEvents = function fireEvents(baseTime) {
  355. var _this2 = this;
  356. if (this._isFinished) {
  357. if (!this._finishedFlag) {
  358. if (this.onfinish) {
  359. var event = new AnimationEvent(null, this, this.currentTime, baseTime);
  360. setTimeout(function () {
  361. if (_this2.onfinish) {
  362. _this2.onfinish(event);
  363. }
  364. });
  365. }
  366. this._finishedFlag = true;
  367. }
  368. } else {
  369. if (this.onframe && this.playState === 'running') {
  370. var _event = new AnimationEvent(null, this, this.currentTime, baseTime);
  371. this.onframe(_event);
  372. }
  373. this._finishedFlag = false;
  374. }
  375. };
  376. _createClass(Animation, [{
  377. key: "pending",
  378. get:
  379. // animation: InternalAnimation | null;
  380. /**
  381. * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/pending
  382. */
  383. function get() {
  384. return this._startTime === null && !this._paused && this.playbackRate !== 0 || this.currentTimePending;
  385. }
  386. }, {
  387. key: "playState",
  388. get: function get() {
  389. if (this._idle) return 'idle';
  390. if (this._isFinished) return 'finished';
  391. if (this._paused) return 'paused';
  392. return 'running';
  393. }
  394. }, {
  395. key: "ready",
  396. get:
  397. /**
  398. * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/ready
  399. * @example
  400. animation.pause();
  401. animation.ready.then(function() {
  402. // Displays 'running'
  403. alert(animation.playState);
  404. });
  405. animation.play();
  406. */
  407. function get() {
  408. var _this3 = this;
  409. if (!this.readyPromise) {
  410. if (this.timeline.animationsWithPromises.indexOf(this) === -1) {
  411. this.timeline.animationsWithPromises.push(this);
  412. }
  413. this.readyPromise = new Promise(function (resolve, reject) {
  414. _this3.resolveReadyPromise = function () {
  415. resolve(_this3);
  416. };
  417. _this3.rejectReadyPromise = function () {
  418. reject(new Error());
  419. };
  420. });
  421. if (!this.pending) {
  422. this.resolveReadyPromise();
  423. }
  424. }
  425. return this.readyPromise;
  426. }
  427. /**
  428. * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/finished
  429. * @example
  430. Promise.all(
  431. elem.getAnimations().map(
  432. function(animation) {
  433. return animation.finished
  434. }
  435. )
  436. ).then(
  437. function() {
  438. return elem.remove();
  439. }
  440. );
  441. */
  442. }, {
  443. key: "finished",
  444. get: function get() {
  445. var _this4 = this;
  446. if (!this.finishedPromise) {
  447. if (this.timeline.animationsWithPromises.indexOf(this) === -1) {
  448. this.timeline.animationsWithPromises.push(this);
  449. }
  450. this.finishedPromise = new Promise(function (resolve, reject) {
  451. _this4.resolveFinishedPromise = function () {
  452. resolve(_this4);
  453. };
  454. _this4.rejectFinishedPromise = function () {
  455. reject(new Error());
  456. };
  457. });
  458. if (this.playState === 'finished') {
  459. this.resolveFinishedPromise();
  460. }
  461. }
  462. return this.finishedPromise;
  463. }
  464. }, {
  465. key: "currentTime",
  466. get: function get() {
  467. this.updatePromises();
  468. return this._idle || this.currentTimePending ? null : this._currentTime;
  469. },
  470. set: function set(newTime) {
  471. newTime = Number(newTime);
  472. if (isNaN(newTime)) return;
  473. this.timeline.restart();
  474. if (!this._paused && this._startTime !== null) {
  475. var _this$timeline;
  476. this._startTime = Number((_this$timeline = this.timeline) === null || _this$timeline === void 0 ? void 0 : _this$timeline.currentTime) - newTime / this.playbackRate;
  477. }
  478. this.currentTimePending = false;
  479. if (this._currentTime === newTime) {
  480. return;
  481. }
  482. if (this._idle) {
  483. this._idle = false;
  484. this._paused = true;
  485. }
  486. this.tickCurrentTime(newTime, true);
  487. this.timeline.applyDirtiedAnimation(this);
  488. }
  489. }, {
  490. key: "startTime",
  491. get: function get() {
  492. return this._startTime;
  493. },
  494. set: function set(newTime) {
  495. if (newTime !== null) {
  496. this.updatePromises();
  497. newTime = Number(newTime);
  498. if (isNaN(newTime)) return;
  499. if (this._paused || this._idle) return;
  500. this._startTime = newTime;
  501. this.tickCurrentTime((Number(this.timeline.currentTime) - this._startTime) * this.playbackRate);
  502. this.timeline.applyDirtiedAnimation(this);
  503. this.updatePromises();
  504. }
  505. }
  506. }, {
  507. key: "playbackRate",
  508. get: function get() {
  509. return this._playbackRate;
  510. },
  511. set: function set(value) {
  512. if (value === this._playbackRate) {
  513. return;
  514. }
  515. this.updatePromises();
  516. var oldCurrentTime = this.currentTime;
  517. this._playbackRate = value;
  518. this.startTime = null;
  519. if (this.playState !== 'paused' && this.playState !== 'idle') {
  520. this._finishedFlag = false;
  521. this._idle = false;
  522. this.ensureAlive();
  523. this.timeline.applyDirtiedAnimation(this);
  524. }
  525. if (oldCurrentTime !== null) {
  526. this.currentTime = oldCurrentTime;
  527. }
  528. this.updatePromises();
  529. }
  530. }, {
  531. key: "_isFinished",
  532. get: function get() {
  533. return !this._idle && (this._playbackRate > 0 && Number(this._currentTime) >= this._totalDuration || this._playbackRate < 0 && Number(this._currentTime) <= 0);
  534. }
  535. }, {
  536. key: "totalDuration",
  537. get: function get() {
  538. return this._totalDuration;
  539. }
  540. }, {
  541. key: "_needsTick",
  542. get: function get() {
  543. return this.pending || this.playState === 'running' || !this._finishedFlag;
  544. }
  545. }]);
  546. return Animation;
  547. }();
  548. /**
  549. * https://github.com/gre/bezier-easing
  550. * BezierEasing - use bezier curve for transition easing function
  551. * by Gaëtan Renaudeau 2014 - 2015 – MIT License
  552. */
  553. // These values are established by empiricism with tests (tradeoff: performance VS precision)
  554. var NEWTON_ITERATIONS = 4;
  555. var NEWTON_MIN_SLOPE = 0.001;
  556. var SUBDIVISION_PRECISION = 0.0000001;
  557. var SUBDIVISION_MAX_ITERATIONS = 10;
  558. var kSplineTableSize = 11;
  559. var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
  560. var float32ArraySupported = typeof Float32Array === 'function';
  561. var A = function A(aA1, aA2) {
  562. return 1.0 - 3.0 * aA2 + 3.0 * aA1;
  563. };
  564. var B = function B(aA1, aA2) {
  565. return 3.0 * aA2 - 6.0 * aA1;
  566. };
  567. var C = function C(aA1) {
  568. return 3.0 * aA1;
  569. };
  570. // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
  571. var calcBezier = function calcBezier(aT, aA1, aA2) {
  572. return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
  573. };
  574. // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
  575. var getSlope = function getSlope(aT, aA1, aA2) {
  576. return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
  577. };
  578. var binarySubdivide = function binarySubdivide(aX, aA, aB, mX1, mX2) {
  579. var currentX,
  580. currentT,
  581. i = 0;
  582. do {
  583. currentT = aA + (aB - aA) / 2.0;
  584. currentX = calcBezier(currentT, mX1, mX2) - aX;
  585. if (currentX > 0.0) aB = currentT;else aA = currentT;
  586. } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
  587. return currentT;
  588. };
  589. var newtonRaphsonIterate = function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
  590. for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
  591. var currentSlope = getSlope(aGuessT, mX1, mX2);
  592. if (currentSlope === 0.0) return aGuessT;
  593. var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
  594. aGuessT -= currentX / currentSlope;
  595. }
  596. return aGuessT;
  597. };
  598. var bezier = function bezier(mX1, mY1, mX2, mY2) {
  599. if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) throw new Error('bezier x values must be in [0, 1] range');
  600. if (mX1 === mY1 && mX2 === mY2) return function (t) {
  601. return t;
  602. };
  603. // Precompute samples table
  604. var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
  605. for (var i = 0; i < kSplineTableSize; ++i) {
  606. sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
  607. }
  608. var getTForX = function getTForX(aX) {
  609. var intervalStart = 0.0;
  610. var currentSample = 1;
  611. var lastSample = kSplineTableSize - 1;
  612. for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) intervalStart += kSampleStepSize;
  613. --currentSample;
  614. // Interpolate to provide an initial guess for t
  615. var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
  616. var guessForT = intervalStart + dist * kSampleStepSize;
  617. var initialSlope = getSlope(guessForT, mX1, mX2);
  618. if (initialSlope >= NEWTON_MIN_SLOPE) return newtonRaphsonIterate(aX, guessForT, mX1, mX2);else if (initialSlope === 0.0) return guessForT;else {
  619. return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
  620. }
  621. };
  622. return function (t) {
  623. // Because JavaScript number are imprecise, we should guarantee the extremes are right.
  624. if (t === 0 || t === 1) return t;
  625. return calcBezier(getTForX(t), mY1, mY2);
  626. };
  627. };
  628. var convertToDash = function convertToDash(str) {
  629. str = str.replace(/([A-Z])/g, function (letter) {
  630. return "-" + letter.toLowerCase();
  631. });
  632. // Remove first dash
  633. return str.charAt(0) === '-' ? str.substring(1) : str;
  634. };
  635. /**
  636. Easing Functions from anime.js, they are tried and true, so, its better to use them instead of other alternatives
  637. */
  638. var Quad = function Quad(t) {
  639. return Math.pow(t, 2);
  640. };
  641. var Cubic = function Cubic(t) {
  642. return Math.pow(t, 3);
  643. };
  644. var Quart = function Quart(t) {
  645. return Math.pow(t, 4);
  646. };
  647. var Quint = function Quint(t) {
  648. return Math.pow(t, 5);
  649. };
  650. var Expo = function Expo(t) {
  651. return Math.pow(t, 6);
  652. };
  653. var Sine = function Sine(t) {
  654. return 1 - Math.cos(t * Math.PI / 2);
  655. };
  656. var Circ = function Circ(t) {
  657. return 1 - Math.sqrt(1 - t * t);
  658. };
  659. var Back = function Back(t) {
  660. return t * t * (3 * t - 2);
  661. };
  662. var Bounce = function Bounce(t) {
  663. var pow2,
  664. b = 4;
  665. while (t < ((pow2 = Math.pow(2, --b)) - 1) / 11) {}
  666. return 1 / Math.pow(4, 3 - b) - 7.5625 * Math.pow((pow2 * 3 - 2) / 22 - t, 2);
  667. };
  668. var Elastic = function Elastic(t, params) {
  669. if (params === void 0) {
  670. params = [];
  671. }
  672. var _params = params,
  673. _params$ = _params[0],
  674. amplitude = _params$ === void 0 ? 1 : _params$,
  675. _params$2 = _params[1],
  676. period = _params$2 === void 0 ? 0.5 : _params$2;
  677. var a = util.clamp(Number(amplitude), 1, 10);
  678. var p = util.clamp(Number(period), 0.1, 2);
  679. if (t === 0 || t === 1) return t;
  680. return -a * Math.pow(2, 10 * (t - 1)) * Math.sin((t - 1 - p / (Math.PI * 2) * Math.asin(1 / a)) * (Math.PI * 2) / p);
  681. };
  682. var Spring = function Spring(t, params, duration) {
  683. if (params === void 0) {
  684. params = [];
  685. }
  686. var _params2 = params,
  687. _params2$ = _params2[0],
  688. mass = _params2$ === void 0 ? 1 : _params2$,
  689. _params2$2 = _params2[1],
  690. stiffness = _params2$2 === void 0 ? 100 : _params2$2,
  691. _params2$3 = _params2[2],
  692. damping = _params2$3 === void 0 ? 10 : _params2$3,
  693. _params2$4 = _params2[3],
  694. velocity = _params2$4 === void 0 ? 0 : _params2$4;
  695. mass = util.clamp(mass, 0.1, 1000);
  696. stiffness = util.clamp(stiffness, 0.1, 1000);
  697. damping = util.clamp(damping, 0.1, 1000);
  698. velocity = util.clamp(velocity, 0.1, 1000);
  699. var w0 = Math.sqrt(stiffness / mass);
  700. var zeta = damping / (2 * Math.sqrt(stiffness * mass));
  701. var wd = zeta < 1 ? w0 * Math.sqrt(1 - zeta * zeta) : 0;
  702. var a = 1;
  703. var b = zeta < 1 ? (zeta * w0 + -velocity) / wd : -velocity + w0;
  704. var progress = duration ? duration * t / 1000 : t;
  705. if (zeta < 1) {
  706. progress = Math.exp(-progress * zeta * w0) * (a * Math.cos(wd * progress) + b * Math.sin(wd * progress));
  707. } else {
  708. progress = (a + b * progress) * Math.exp(-progress * w0);
  709. }
  710. if (t === 0 || t === 1) return t;
  711. return 1 - progress;
  712. };
  713. /**
  714. * Cache the durations at set easing parameters
  715. */
  716. // export const EasingDurationCache: Map<string | TypeEasingFunction, number> = new Map();
  717. /**
  718. * The threshold for an infinite loop
  719. */
  720. // const INTINITE_LOOP_LIMIT = 10000;
  721. /** Convert easing parameters to Array of numbers, e.g. "spring(2, 500)" to [2, 500] */
  722. // export const parseEasingParameters = (str: string) => {
  723. // const match = /(\(|\s)([^)]+)\)?/.exec(str);
  724. // return match
  725. // ? match[2].split(',').map((value) => {
  726. // const num = parseFloat(value);
  727. // return !Number.isNaN(num) ? num : value.trim();
  728. // })
  729. // : [];
  730. // };
  731. /**
  732. * The spring easing function will only look smooth at certain durations, with certain parameters.
  733. * This functions returns the optimal duration to create a smooth springy animation based on physics
  734. *
  735. * Note: it can also be used to determine the optimal duration of other types of easing function, but be careful of 'in-'
  736. * easing functions, because of the nature of the function it can sometimes create an infinite loop, I suggest only using
  737. * `getEasingDuration` for `spring`, specifically 'out-spring' and 'spring'
  738. */
  739. // export const getEasingDuration = (easing: string | TypeEasingFunction = 'spring') => {
  740. // if (EasingDurationCache.has(easing)) return EasingDurationCache.get(easing);
  741. // // eslint-disable-next-line @typescript-eslint/no-use-before-define
  742. // const easingFunction = typeof easing == 'function' ? easing : getEasingFunction(easing as string);
  743. // const params = typeof easing == 'function' ? [] : parseEasingParameters(easing);
  744. // const frame = 1 / 6;
  745. // let elapsed = 0;
  746. // let rest = 0;
  747. // let count = 0;
  748. // while (++count < INTINITE_LOOP_LIMIT) {
  749. // elapsed += frame;
  750. // if (easingFunction(elapsed, params, undefined) === 1) {
  751. // rest++;
  752. // if (rest >= 16) break;
  753. // } else {
  754. // rest = 0;
  755. // }
  756. // }
  757. // const duration = elapsed * frame * 1000;
  758. // EasingDurationCache.set(easing, duration);
  759. // return duration;
  760. // };
  761. /**
  762. These Easing Functions are based off of the Sozi Project's easing functions
  763. https://github.com/sozi-projects/Sozi/blob/d72e44ebd580dc7579d1e177406ad41e632f961d/src/js/player/Timing.js
  764. */
  765. var Steps = function Steps(t, params) {
  766. if (params === void 0) {
  767. params = [];
  768. }
  769. var _params3 = params,
  770. _params3$ = _params3[0],
  771. steps = _params3$ === void 0 ? 10 : _params3$,
  772. type = _params3[1];
  773. var trunc = type == 'start' ? Math.ceil : Math.floor;
  774. return trunc(util.clamp(t, 0, 1) * steps) / steps;
  775. };
  776. // @ts-ignore
  777. var Bezier = function Bezier(t, params) {
  778. if (params === void 0) {
  779. params = [];
  780. }
  781. var _params4 = params,
  782. mX1 = _params4[0],
  783. mY1 = _params4[1],
  784. mX2 = _params4[2],
  785. mY2 = _params4[3];
  786. return bezier(mX1, mY1, mX2, mY2)(t);
  787. };
  788. /** The default `ease-in` easing function */
  789. var easein = bezier(0.42, 0.0, 1.0, 1.0);
  790. /** Converts easing functions to their `out`counter parts */
  791. var EaseOut = function EaseOut(ease) {
  792. return function (t, params, duration) {
  793. if (params === void 0) {
  794. params = [];
  795. }
  796. return 1 - ease(1 - t, params, duration);
  797. };
  798. };
  799. /** Converts easing functions to their `in-out` counter parts */
  800. var EaseInOut = function EaseInOut(ease) {
  801. return function (t, params, duration) {
  802. if (params === void 0) {
  803. params = [];
  804. }
  805. return t < 0.5 ? ease(t * 2, params, duration) / 2 : 1 - ease(t * -2 + 2, params, duration) / 2;
  806. };
  807. };
  808. /** Converts easing functions to their `out-in` counter parts */
  809. var EaseOutIn = function EaseOutIn(ease) {
  810. return function (t, params, duration) {
  811. if (params === void 0) {
  812. params = [];
  813. }
  814. return t < 0.5 ? (1 - ease(1 - t * 2, params, duration)) / 2 : (ease(t * 2 - 1, params, duration) + 1) / 2;
  815. };
  816. };
  817. var EasingFunctions = {
  818. steps: Steps,
  819. 'step-start': function stepStart(t) {
  820. return Steps(t, [1, 'start']);
  821. },
  822. 'step-end': function stepEnd(t) {
  823. return Steps(t, [1, 'end']);
  824. },
  825. linear: function linear(t) {
  826. return t;
  827. },
  828. 'cubic-bezier': Bezier,
  829. ease: function ease(t) {
  830. return Bezier(t, [0.25, 0.1, 0.25, 1.0]);
  831. },
  832. in: easein,
  833. out: EaseOut(easein),
  834. 'in-out': EaseInOut(easein),
  835. 'out-in': EaseOutIn(easein),
  836. 'in-quad': Quad,
  837. 'out-quad': EaseOut(Quad),
  838. 'in-out-quad': EaseInOut(Quad),
  839. 'out-in-quad': EaseOutIn(Quad),
  840. 'in-cubic': Cubic,
  841. 'out-cubic': EaseOut(Cubic),
  842. 'in-out-cubic': EaseInOut(Cubic),
  843. 'out-in-cubic': EaseOutIn(Cubic),
  844. 'in-quart': Quart,
  845. 'out-quart': EaseOut(Quart),
  846. 'in-out-quart': EaseInOut(Quart),
  847. 'out-in-quart': EaseOutIn(Quart),
  848. 'in-quint': Quint,
  849. 'out-quint': EaseOut(Quint),
  850. 'in-out-quint': EaseInOut(Quint),
  851. 'out-in-quint': EaseOutIn(Quint),
  852. 'in-expo': Expo,
  853. 'out-expo': EaseOut(Expo),
  854. 'in-out-expo': EaseInOut(Expo),
  855. 'out-in-expo': EaseOutIn(Expo),
  856. 'in-sine': Sine,
  857. 'out-sine': EaseOut(Sine),
  858. 'in-out-sine': EaseInOut(Sine),
  859. 'out-in-sine': EaseOutIn(Sine),
  860. 'in-circ': Circ,
  861. 'out-circ': EaseOut(Circ),
  862. 'in-out-circ': EaseInOut(Circ),
  863. 'out-in-circ': EaseOutIn(Circ),
  864. 'in-back': Back,
  865. 'out-back': EaseOut(Back),
  866. 'in-out-back': EaseInOut(Back),
  867. 'out-in-back': EaseOutIn(Back),
  868. 'in-bounce': Bounce,
  869. 'out-bounce': EaseOut(Bounce),
  870. 'in-out-bounce': EaseInOut(Bounce),
  871. 'out-in-bounce': EaseOutIn(Bounce),
  872. 'in-elastic': Elastic,
  873. 'out-elastic': EaseOut(Elastic),
  874. 'in-out-elastic': EaseInOut(Elastic),
  875. 'out-in-elastic': EaseOutIn(Elastic),
  876. spring: Spring,
  877. 'spring-in': Spring,
  878. 'spring-out': EaseOut(Spring),
  879. 'spring-in-out': EaseInOut(Spring),
  880. 'spring-out-in': EaseOutIn(Spring)
  881. };
  882. /**
  883. * Convert string easing to their proper form
  884. */
  885. var complexEasingSyntax = function complexEasingSyntax(ease) {
  886. return convertToDash(ease).replace(/^ease-/, '') // Remove the "ease-" keyword
  887. .replace(/(\(|\s).+/, '') // Remove the function brackets and parameters
  888. .toLowerCase().trim();
  889. };
  890. /** Re-maps a number from one range to another. Numbers outside the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful. */
  891. var getEasingFunction = function getEasingFunction(ease) {
  892. return EasingFunctions[complexEasingSyntax(ease)] || EasingFunctions.linear;
  893. };
  894. // /**
  895. // * Allows you to register new easing functions
  896. // */
  897. // export const registerEasingFunction = (key: string, fn: TypeEasingFunction) => {
  898. // Object.assign(EasingFunctions, {
  899. // [key]: fn,
  900. // });
  901. // };
  902. // /**
  903. // * Allows you to register multiple new easing functions
  904. // */
  905. // export const registerEasingFunctions = (...obj: typeof EasingFunctions[]) => {
  906. // Object.assign(EasingFunctions, ...obj);
  907. // };
  908. var linear = function linear(x) {
  909. return x;
  910. };
  911. var Start = 1;
  912. var Middle = 0.5;
  913. var End = 0;
  914. function step(count, pos) {
  915. return function (x) {
  916. if (x >= 1) {
  917. return 1;
  918. }
  919. var stepSize = 1 / count;
  920. x += pos * stepSize;
  921. return x - x % stepSize;
  922. };
  923. }
  924. var numberString = '\\s*(-?\\d+\\.?\\d*|-?\\.\\d+)\\s*';
  925. var cubicBezierRe = new RegExp('cubic-bezier\\(' + numberString + ',' + numberString + ',' + numberString + ',' + numberString + '\\)');
  926. var step1Re = /steps\(\s*(\d+)\s*\)/;
  927. var step2Re = /steps\(\s*(\d+)\s*,\s*(start|middle|end)\s*\)/;
  928. function parseEasingFunction(normalizedEasing) {
  929. var cubicData = cubicBezierRe.exec(normalizedEasing);
  930. if (cubicData) {
  931. // @ts-ignore
  932. return bezier.apply(void 0, cubicData.slice(1).map(Number));
  933. }
  934. var step1Data = step1Re.exec(normalizedEasing);
  935. if (step1Data) {
  936. return step(Number(step1Data[1]), End);
  937. }
  938. var step2Data = step2Re.exec(normalizedEasing);
  939. if (step2Data) {
  940. // @ts-ignore
  941. return step(Number(step2Data[1]), {
  942. start: Start,
  943. middle: Middle,
  944. end: End
  945. }[step2Data[2]]);
  946. }
  947. return getEasingFunction(normalizedEasing);
  948. }
  949. function calculateActiveDuration(timing) {
  950. // @ts-ignore
  951. return Math.abs(repeatedDuration(timing) / (timing.playbackRate || 1));
  952. }
  953. function repeatedDuration(timing) {
  954. var _timing$iterations;
  955. // https://drafts.csswg.org/web-animations/#calculating-the-active-duration
  956. if (timing.duration === 0 || timing.iterations === 0) {
  957. return 0;
  958. }
  959. // @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/duration#value
  960. // if (timing.duration === 'auto') {
  961. // timing.duration = 0;
  962. // }
  963. return (timing.duration === 'auto' ? 0 : Number(timing.duration)) * ((_timing$iterations = timing.iterations) !== null && _timing$iterations !== void 0 ? _timing$iterations : 1);
  964. }
  965. var PhaseNone = 0;
  966. var PhaseBefore = 1;
  967. var PhaseAfter = 2;
  968. var PhaseActive = 3;
  969. function calculatePhase(activeDuration, localTime, timing) {
  970. // https://drafts.csswg.org/web-animations/#animation-effect-phases-and-states
  971. if (localTime === null) {
  972. return PhaseNone;
  973. }
  974. var endTime = timing.endTime;
  975. if (localTime < Math.min(timing.delay, endTime)) {
  976. return PhaseBefore;
  977. }
  978. if (localTime >= Math.min(timing.delay + activeDuration + timing.endDelay, endTime)) {
  979. return PhaseAfter;
  980. }
  981. return PhaseActive;
  982. }
  983. function calculateActiveTime(activeDuration, fillMode, localTime, phase, delay) {
  984. // https://drafts.csswg.org/web-animations/#calculating-the-active-time
  985. switch (phase) {
  986. case PhaseBefore:
  987. if (fillMode === 'backwards' || fillMode === 'both') return 0;
  988. return null;
  989. case PhaseActive:
  990. return localTime - delay;
  991. case PhaseAfter:
  992. if (fillMode === 'forwards' || fillMode === 'both') return activeDuration;
  993. return null;
  994. case PhaseNone:
  995. return null;
  996. }
  997. }
  998. function calculateOverallProgress(iterationDuration, phase, iterations, activeTime, iterationStart) {
  999. // https://drafts.csswg.org/web-animations/#calculating-the-overall-progress
  1000. var overallProgress = iterationStart;
  1001. if (iterationDuration === 0) {
  1002. if (phase !== PhaseBefore) {
  1003. overallProgress += iterations;
  1004. }
  1005. } else {
  1006. overallProgress += activeTime / iterationDuration;
  1007. }
  1008. return overallProgress;
  1009. }
  1010. function calculateSimpleIterationProgress(overallProgress, iterationStart, phase, iterations, activeTime, iterationDuration) {
  1011. // https://drafts.csswg.org/web-animations/#calculating-the-simple-iteration-progress
  1012. var simpleIterationProgress = overallProgress === Infinity ? iterationStart % 1 : overallProgress % 1;
  1013. if (simpleIterationProgress === 0 && phase === PhaseAfter && iterations !== 0 && (activeTime !== 0 || iterationDuration === 0)) {
  1014. simpleIterationProgress = 1;
  1015. }
  1016. return simpleIterationProgress;
  1017. }
  1018. function calculateCurrentIteration(phase, iterations, simpleIterationProgress, overallProgress) {
  1019. // https://drafts.csswg.org/web-animations/#calculating-the-current-iteration
  1020. if (phase === PhaseAfter && iterations === Infinity) {
  1021. return Infinity;
  1022. }
  1023. if (simpleIterationProgress === 1) {
  1024. return Math.floor(overallProgress) - 1;
  1025. }
  1026. return Math.floor(overallProgress);
  1027. }
  1028. function calculateDirectedProgress(playbackDirection, currentIteration, simpleIterationProgress) {
  1029. // https://drafts.csswg.org/web-animations/#calculating-the-directed-progress
  1030. var currentDirection = playbackDirection;
  1031. if (playbackDirection !== 'normal' && playbackDirection !== 'reverse') {
  1032. var d = currentIteration;
  1033. if (playbackDirection === 'alternate-reverse') {
  1034. d += 1;
  1035. }
  1036. currentDirection = 'normal';
  1037. if (d !== Infinity && d % 2 !== 0) {
  1038. currentDirection = 'reverse';
  1039. }
  1040. }
  1041. if (currentDirection === 'normal') {
  1042. return simpleIterationProgress;
  1043. }
  1044. return 1 - simpleIterationProgress;
  1045. }
  1046. function calculateIterationProgress(activeDuration, localTime, timing) {
  1047. var phase = calculatePhase(activeDuration, localTime, timing);
  1048. var activeTime = calculateActiveTime(activeDuration, timing.fill, localTime, phase, timing.delay);
  1049. if (activeTime === null) return null;
  1050. var duration = timing.duration === 'auto' ? 0 : timing.duration;
  1051. var overallProgress = calculateOverallProgress(duration, phase, timing.iterations, activeTime, timing.iterationStart);
  1052. var simpleIterationProgress = calculateSimpleIterationProgress(overallProgress, timing.iterationStart, phase, timing.iterations, activeTime, duration);
  1053. var currentIteration = calculateCurrentIteration(phase, timing.iterations, simpleIterationProgress, overallProgress);
  1054. var directedProgress = calculateDirectedProgress(timing.direction, currentIteration, simpleIterationProgress);
  1055. timing.currentIteration = currentIteration;
  1056. timing.progress = directedProgress;
  1057. // https://drafts.csswg.org/web-animations/#calculating-the-transformed-progress
  1058. // https://drafts.csswg.org/web-animations/#calculating-the-iteration-progress
  1059. return timing.easingFunction(directedProgress);
  1060. }
  1061. function convertEffectInput(keyframes, timing, target) {
  1062. var propertySpecificKeyframeGroups = makePropertySpecificKeyframeGroups(keyframes, timing);
  1063. var interpolations = makeInterpolations(propertySpecificKeyframeGroups, target);
  1064. return function (target, fraction) {
  1065. if (fraction !== null) {
  1066. interpolations.filter(function (interpolation) {
  1067. return fraction >= interpolation.applyFrom && fraction < interpolation.applyTo;
  1068. }).forEach(function (interpolation) {
  1069. var offsetFraction = fraction - interpolation.startOffset;
  1070. var localDuration = interpolation.endOffset - interpolation.startOffset;
  1071. var scaledLocalTime = localDuration === 0 ? 0 : interpolation.easingFunction(offsetFraction / localDuration);
  1072. // apply updated attribute
  1073. target.setAttribute(interpolation.property, interpolation.interpolation(scaledLocalTime));
  1074. // if (interpolation.property === 'visibility') {
  1075. // console.log(
  1076. // scaledLocalTime,
  1077. // interpolation.interpolation(scaledLocalTime),
  1078. // );
  1079. // }
  1080. });
  1081. } else {
  1082. for (var property in propertySpecificKeyframeGroups) if (isNotReservedWord(property)) {
  1083. // clear attribute
  1084. target.setAttribute(property, null);
  1085. }
  1086. }
  1087. };
  1088. }
  1089. function isNotReservedWord(member) {
  1090. return member !== 'offset' && member !== 'easing' && member !== 'composite' && member !== 'computedOffset';
  1091. }
  1092. function makePropertySpecificKeyframeGroups(keyframes, timing) {
  1093. var propertySpecificKeyframeGroups = {};
  1094. for (var i = 0; i < keyframes.length; i++) {
  1095. for (var member in keyframes[i]) {
  1096. if (isNotReservedWord(member)) {
  1097. var propertySpecificKeyframe = {
  1098. offset: keyframes[i].offset,
  1099. computedOffset: keyframes[i].computedOffset,
  1100. easing: keyframes[i].easing,
  1101. easingFunction: parseEasingFunction(keyframes[i].easing) || timing.easingFunction,
  1102. value: keyframes[i][member]
  1103. };
  1104. propertySpecificKeyframeGroups[member] = propertySpecificKeyframeGroups[member] || [];
  1105. propertySpecificKeyframeGroups[member].push(propertySpecificKeyframe);
  1106. }
  1107. }
  1108. }
  1109. return propertySpecificKeyframeGroups;
  1110. }
  1111. function makeInterpolations(propertySpecificKeyframeGroups, target) {
  1112. var interpolations = [];
  1113. for (var groupName in propertySpecificKeyframeGroups) {
  1114. var keyframes = propertySpecificKeyframeGroups[groupName];
  1115. for (var i = 0; i < keyframes.length - 1; i++) {
  1116. var startIndex = i;
  1117. var endIndex = i + 1;
  1118. var startOffset = keyframes[startIndex].computedOffset;
  1119. var endOffset = keyframes[endIndex].computedOffset;
  1120. var applyFrom = startOffset;
  1121. var applyTo = endOffset;
  1122. if (i === 0) {
  1123. applyFrom = -Infinity;
  1124. if (endOffset === 0) {
  1125. endIndex = startIndex;
  1126. }
  1127. }
  1128. if (i === keyframes.length - 2) {
  1129. applyTo = Infinity;
  1130. if (startOffset === 1) {
  1131. startIndex = endIndex;
  1132. }
  1133. }
  1134. interpolations.push({
  1135. applyFrom: applyFrom,
  1136. applyTo: applyTo,
  1137. startOffset: keyframes[startIndex].computedOffset,
  1138. endOffset: keyframes[endIndex].computedOffset,
  1139. easingFunction: keyframes[startIndex].easingFunction,
  1140. property: groupName,
  1141. interpolation: propertyInterpolation(groupName, keyframes[startIndex].value, keyframes[endIndex].value, target)
  1142. });
  1143. }
  1144. }
  1145. interpolations.sort(function (leftInterpolation, rightInterpolation) {
  1146. return leftInterpolation.startOffset - rightInterpolation.startOffset;
  1147. });
  1148. return interpolations;
  1149. }
  1150. var InterpolationFactory = function InterpolationFactory(from, to,
  1151. // eslint-disable-next-line @typescript-eslint/ban-types
  1152. convertToString) {
  1153. return function (f) {
  1154. var interpolated = interpolate(from, to, f);
  1155. return !gLite.runtime.enableCSSParsing && util.isNumber(interpolated) ? interpolated : convertToString(interpolated);
  1156. };
  1157. };
  1158. function propertyInterpolation(property, left, right, target) {
  1159. var metadata = gLite.propertyMetadataCache[property];
  1160. // discrete step
  1161. // if (property === 'visibility') {
  1162. // return function (t: number) {
  1163. // if (t === 0) return left;
  1164. // if (t === 1) return right;
  1165. // debugger;
  1166. // return t < 0.5 ? left : right;
  1167. // };
  1168. // }
  1169. if (metadata && metadata.syntax && metadata.int) {
  1170. var propertyHandler = gLite.runtime.styleValueRegistry.getPropertySyntax(metadata.syntax);
  1171. if (propertyHandler) {
  1172. var usedLeft;
  1173. var usedRight;
  1174. if (gLite.runtime.enableCSSParsing) {
  1175. var computedLeft = gLite.runtime.styleValueRegistry.parseProperty(property, left, target);
  1176. var computedRight = gLite.runtime.styleValueRegistry.parseProperty(property, right, target);
  1177. usedLeft = gLite.runtime.styleValueRegistry.computeProperty(property, computedLeft, target);
  1178. usedRight = gLite.runtime.styleValueRegistry.computeProperty(property, computedRight, target);
  1179. } else {
  1180. var parser = propertyHandler.parserWithCSSDisabled;
  1181. usedLeft = parser ? parser(left, target) : left;
  1182. usedRight = parser ? parser(right, target) : right;
  1183. }
  1184. // merger [left, right, n2string()]
  1185. var interpolationArgs = propertyHandler.mixer(usedLeft, usedRight, target);
  1186. if (interpolationArgs) {
  1187. var interp = InterpolationFactory.apply(void 0, interpolationArgs);
  1188. return function (t) {
  1189. if (t === 0) return left;
  1190. if (t === 1) return right;
  1191. return interp(t);
  1192. };
  1193. }
  1194. }
  1195. }
  1196. // eslint-disable-next-line @typescript-eslint/no-use-before-define
  1197. return InterpolationFactory(false, true, function (bool) {
  1198. return bool ? right : left;
  1199. });
  1200. }
  1201. /**
  1202. * interpolate with number, boolean, number[], boolean[]
  1203. */
  1204. function interpolate(from, to, f) {
  1205. if (typeof from === 'number' && typeof to === 'number') {
  1206. return from * (1 - f) + to * f;
  1207. }
  1208. if (typeof from === 'boolean' && typeof to === 'boolean' || typeof from === 'string' && typeof to === 'string' // skip string, eg. path ['M', 10, 10]
  1209. ) {
  1210. return f < 0.5 ? from : to;
  1211. }
  1212. if (Array.isArray(from) && Array.isArray(to)) {
  1213. // interpolate arrays/matrix
  1214. var fromLength = from.length;
  1215. var toLength = to.length;
  1216. var length = Math.max(fromLength, toLength);
  1217. var r = [];
  1218. for (var i = 0; i < length; i++) {
  1219. r.push(interpolate(from[i < fromLength ? i : fromLength - 1], to[i < toLength ? i : toLength - 1], f));
  1220. }
  1221. return r;
  1222. }
  1223. throw new Error('Mismatched interpolation arguments ' + from + ':' + to);
  1224. }
  1225. /**
  1226. * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming
  1227. */
  1228. var AnimationEffectTiming = /*#__PURE__*/function () {
  1229. function AnimationEffectTiming() {
  1230. /**
  1231. * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/delay
  1232. */
  1233. this.delay = 0;
  1234. /**
  1235. * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/direction
  1236. */
  1237. this.direction = 'normal';
  1238. /**
  1239. * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/duration
  1240. */
  1241. this.duration = 'auto';
  1242. /**
  1243. * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/easing
  1244. */
  1245. this._easing = 'linear';
  1246. this.easingFunction = linear;
  1247. /**
  1248. * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/endDelay
  1249. */
  1250. this.endDelay = 0;
  1251. /**
  1252. * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/fill
  1253. */
  1254. this.fill = 'auto';
  1255. /**
  1256. * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/iterationStart
  1257. */
  1258. this.iterationStart = 0;
  1259. /**
  1260. * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/iterations
  1261. */
  1262. this.iterations = 1;
  1263. /**
  1264. * @deprecated
  1265. */
  1266. this.playbackRate = void 0;
  1267. /**
  1268. * ref to effect
  1269. */
  1270. this.effect = void 0;
  1271. this.composite = void 0;
  1272. /**
  1273. * ComputedEffectTiming
  1274. * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getComputedTiming
  1275. */
  1276. this.activeDuration = void 0;
  1277. this.endTime = void 0;
  1278. this.currentIteration = null;
  1279. this.progress = null;
  1280. }
  1281. _createClass(AnimationEffectTiming, [{
  1282. key: "easing",
  1283. get: function get() {
  1284. return this._easing;
  1285. },
  1286. set: function set(value) {
  1287. this.easingFunction = parseEasingFunction(value);
  1288. this._easing = value;
  1289. }
  1290. }]);
  1291. return AnimationEffectTiming;
  1292. }();
  1293. /**
  1294. * @example
  1295. {
  1296. translateY: [200, 300],
  1297. scale: [1, 10],
  1298. }
  1299. * groups' length can be different, the following config should generate 3 frames:
  1300. @example
  1301. {
  1302. translateY: [200, 300, 400],
  1303. scale: [1, 10],
  1304. }
  1305. */
  1306. function convertToArrayForm(effectInput) {
  1307. var normalizedEffectInput = [];
  1308. for (var property in effectInput) {
  1309. // skip reserved props
  1310. if (property in ['easing', 'offset', 'composite']) {
  1311. continue;
  1312. }
  1313. // @ts-ignore
  1314. var values = effectInput[property];
  1315. if (!Array.isArray(values)) {
  1316. values = [values];
  1317. }
  1318. var numKeyframes = values.length;
  1319. for (var i = 0; i < numKeyframes; i++) {
  1320. if (!normalizedEffectInput[i]) {
  1321. var keyframe = {};
  1322. if ('offset' in effectInput) {
  1323. keyframe.offset = Number(effectInput.offset);
  1324. }
  1325. if ('easing' in effectInput) {
  1326. // @ts-ignore
  1327. keyframe.easing = effectInput.easing;
  1328. }
  1329. if ('composite' in effectInput) {
  1330. // @ts-ignore
  1331. keyframe.composite = effectInput.composite;
  1332. }
  1333. normalizedEffectInput[i] = keyframe;
  1334. }
  1335. if (values[i] !== undefined && values[i] !== null) {
  1336. normalizedEffectInput[i][property] = values[i];
  1337. }
  1338. }
  1339. }
  1340. normalizedEffectInput.sort(function (a, b) {
  1341. return (a.computedOffset || 0) - (b.computedOffset || 0);
  1342. });
  1343. return normalizedEffectInput;
  1344. }
  1345. function normalizeKeyframes(effectInput, timing) {
  1346. if (effectInput === null) {
  1347. return [];
  1348. }
  1349. if (!Array.isArray(effectInput)) {
  1350. effectInput = convertToArrayForm(effectInput);
  1351. }
  1352. var keyframes = effectInput.map(function (originalKeyframe) {
  1353. var keyframe = {};
  1354. if (timing === null || timing === void 0 ? void 0 : timing.composite) {
  1355. // This will be auto if the composite operation specified on the effect is being used.
  1356. // @see https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats
  1357. keyframe.composite = 'auto';
  1358. }
  1359. for (var member in originalKeyframe) {
  1360. var memberValue = originalKeyframe[member];
  1361. if (member === 'offset') {
  1362. if (memberValue !== null) {
  1363. memberValue = Number(memberValue);
  1364. if (!isFinite(memberValue)) throw new Error('Keyframe offsets must be numbers.');
  1365. if (memberValue < 0 || memberValue > 1) throw new Error('Keyframe offsets must be between 0 and 1.');
  1366. keyframe.computedOffset = memberValue;
  1367. }
  1368. } else if (member === 'composite') {
  1369. // TODO: Support add & accumulate in KeyframeEffect.composite
  1370. // @see https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/composite
  1371. if (['replace', 'add', 'accumulate', 'auto'].indexOf(memberValue) === -1) {
  1372. throw new Error(memberValue + " compositing is not supported");
  1373. }
  1374. } else ;
  1375. // assign to keyframe, no need to parse shorthand value
  1376. keyframe[member] = memberValue;
  1377. }
  1378. if (keyframe.offset === undefined) {
  1379. keyframe.offset = null;
  1380. }
  1381. if (keyframe.easing === undefined) {
  1382. // override with timing.easing
  1383. keyframe.easing = (timing === null || timing === void 0 ? void 0 : timing.easing) || 'linear';
  1384. }
  1385. if (keyframe.composite === undefined) {
  1386. keyframe.composite = 'auto';
  1387. }
  1388. return keyframe;
  1389. });
  1390. var everyFrameHasOffset = true;
  1391. var previousOffset = -Infinity;
  1392. for (var i = 0; i < keyframes.length; i++) {
  1393. var offset = keyframes[i].offset;
  1394. if (!util.isNil(offset)) {
  1395. if (offset < previousOffset) {
  1396. throw new TypeError('Keyframes are not loosely sorted by offset. Sort or specify offsets.');
  1397. }
  1398. previousOffset = offset;
  1399. } else {
  1400. everyFrameHasOffset = false;
  1401. }
  1402. }
  1403. keyframes = keyframes.filter(function (keyframe) {
  1404. return Number(keyframe.offset) >= 0 && Number(keyframe.offset) <= 1;
  1405. });
  1406. function spaceKeyframes() {
  1407. var _keyframes$offset;
  1408. var length = keyframes.length;
  1409. keyframes[length - 1].computedOffset = Number((_keyframes$offset = keyframes[length - 1].offset) !== null && _keyframes$offset !== void 0 ? _keyframes$offset : 1);
  1410. if (length > 1) {
  1411. var _keyframes$0$offset;
  1412. keyframes[0].computedOffset = Number((_keyframes$0$offset = keyframes[0].offset) !== null && _keyframes$0$offset !== void 0 ? _keyframes$0$offset : 0);
  1413. }
  1414. var previousIndex = 0;
  1415. var previousOffset = Number(keyframes[0].computedOffset);
  1416. for (var _i = 1; _i < length; _i++) {
  1417. var _offset = keyframes[_i].computedOffset;
  1418. if (!util.isNil(_offset) && !util.isNil(previousOffset)) {
  1419. for (var j = 1; j < _i - previousIndex; j++) keyframes[previousIndex + j].computedOffset = previousOffset + (Number(_offset) - previousOffset) * j / (_i - previousIndex);
  1420. previousIndex = _i;
  1421. previousOffset = Number(_offset);
  1422. }
  1423. }
  1424. }
  1425. if (!everyFrameHasOffset) spaceKeyframes();
  1426. return keyframes;
  1427. }
  1428. var fills = 'backwards|forwards|both|none'.split('|');
  1429. var directions = 'reverse|alternate|alternate-reverse'.split('|');
  1430. function makeTiming(timingInput, forGroup) {
  1431. var timing = new AnimationEffectTiming();
  1432. if (forGroup) {
  1433. timing.fill = 'both';
  1434. timing.duration = 'auto';
  1435. }
  1436. if (typeof timingInput === 'number' && !isNaN(timingInput)) {
  1437. timing.duration = timingInput;
  1438. } else if (timingInput !== undefined) {
  1439. Object.keys(timingInput).forEach(function (property) {
  1440. if (timingInput[property] !== undefined && timingInput[property] !== null && timingInput[property] !== 'auto') {
  1441. if (typeof timing[property] === 'number' || property === 'duration') {
  1442. if (typeof timingInput[property] !== 'number' || isNaN(timingInput[property])) {
  1443. return;
  1444. }
  1445. }
  1446. if (property === 'fill' && fills.indexOf(timingInput[property]) === -1) {
  1447. return;
  1448. }
  1449. if (property === 'direction' && directions.indexOf(timingInput[property]) === -1) {
  1450. return;
  1451. }
  1452. // @ts-ignore
  1453. timing[property] = timingInput[property];
  1454. }
  1455. });
  1456. }
  1457. return timing;
  1458. }
  1459. function normalizeTimingInput(timingInput, forGroup) {
  1460. var _timingInput;
  1461. timingInput = numericTimingToObject((_timingInput = timingInput) !== null && _timingInput !== void 0 ? _timingInput : {
  1462. duration: 'auto'
  1463. });
  1464. return makeTiming(timingInput, forGroup);
  1465. }
  1466. function numericTimingToObject(timingInput) {
  1467. if (typeof timingInput === 'number') {
  1468. if (isNaN(timingInput)) {
  1469. timingInput = {
  1470. duration: 'auto'
  1471. };
  1472. } else {
  1473. timingInput = {
  1474. duration: timingInput
  1475. };
  1476. }
  1477. }
  1478. return timingInput;
  1479. }
  1480. /**
  1481. * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect
  1482. * @example
  1483. const circleDownKeyframes = new KeyframeEffect(
  1484. circle, // element to animate
  1485. [
  1486. { transform: 'translateY(0)' }, // keyframe
  1487. { transform: 'translateY(100)' } // keyframe
  1488. ],
  1489. { duration: 3000, fill: 'forwards' } // keyframe options
  1490. );
  1491. *
  1492. */
  1493. var KeyframeEffect = /*#__PURE__*/function () {
  1494. function KeyframeEffect(target, effectInput, timingInput) {
  1495. var _this = this;
  1496. this.composite = 'replace';
  1497. this.iterationComposite = 'replace';
  1498. // pseudoElement: string | null;
  1499. this.target = void 0;
  1500. this.animation = void 0;
  1501. this.timing = void 0;
  1502. this.computedTiming = void 0;
  1503. this.normalizedKeyframes = void 0;
  1504. this.timeFraction = void 0;
  1505. this.interpolations = void 0;
  1506. this.target = target;
  1507. this.timing = normalizeTimingInput(timingInput, false);
  1508. this.timing.effect = this;
  1509. this.timing.activeDuration = calculateActiveDuration(this.timing);
  1510. this.timing.endTime = Math.max(0, this.timing.delay + this.timing.activeDuration + this.timing.endDelay);
  1511. this.normalizedKeyframes = normalizeKeyframes(effectInput, this.timing);
  1512. this.interpolations = convertEffectInput(this.normalizedKeyframes, this.timing, this.target);
  1513. // 不支持 proxy 时降级成 this.timing
  1514. var Proxy = gLite.runtime.globalThis.Proxy;
  1515. this.computedTiming = Proxy ? new Proxy(this.timing, {
  1516. get: function get(target, prop) {
  1517. if (prop === 'duration') {
  1518. return target.duration === 'auto' ? 0 : target.duration;
  1519. } else if (prop === 'fill') {
  1520. return target.fill === 'auto' ? 'none' : target.fill;
  1521. } else if (prop === 'localTime') {
  1522. return _this.animation && _this.animation.currentTime || null;
  1523. } else if (prop === 'currentIteration') {
  1524. if (!_this.animation || _this.animation.playState !== 'running') {
  1525. return null;
  1526. }
  1527. return target.currentIteration || 0;
  1528. } else if (prop === 'progress') {
  1529. if (!_this.animation || _this.animation.playState !== 'running') {
  1530. return null;
  1531. }
  1532. return target.progress || 0;
  1533. }
  1534. return target[prop];
  1535. },
  1536. set: function set() {
  1537. return true;
  1538. }
  1539. }) : this.timing;
  1540. }
  1541. var _proto = KeyframeEffect.prototype;
  1542. _proto.applyInterpolations = function applyInterpolations() {
  1543. this.interpolations(this.target, Number(this.timeFraction));
  1544. };
  1545. _proto.update = function update(localTime) {
  1546. if (localTime === null) {
  1547. return false;
  1548. }
  1549. this.timeFraction = calculateIterationProgress(this.timing.activeDuration, localTime, this.timing);
  1550. return this.timeFraction !== null;
  1551. };
  1552. _proto.getKeyframes = function getKeyframes() {
  1553. return this.normalizedKeyframes;
  1554. };
  1555. _proto.setKeyframes = function setKeyframes(keyframes) {
  1556. this.normalizedKeyframes = normalizeKeyframes(keyframes);
  1557. }
  1558. /**
  1559. * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getComputedTiming
  1560. */;
  1561. _proto.getComputedTiming = function getComputedTiming() {
  1562. return this.computedTiming;
  1563. }
  1564. /**
  1565. * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getTiming
  1566. */;
  1567. _proto.getTiming = function getTiming() {
  1568. return this.timing;
  1569. }
  1570. /**
  1571. * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/updateTiming
  1572. */;
  1573. _proto.updateTiming = function updateTiming(timing) {
  1574. var _this2 = this;
  1575. Object.keys(timing || {}).forEach(function (name) {
  1576. _this2.timing[name] = timing[name];
  1577. });
  1578. };
  1579. return KeyframeEffect;
  1580. }();
  1581. function compareAnimations(leftAnimation, rightAnimation) {
  1582. return Number(leftAnimation.id) - Number(rightAnimation.id);
  1583. }
  1584. /**
  1585. * @see https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/web-animations-js/index.d.ts
  1586. */
  1587. var AnimationTimeline = /*#__PURE__*/function () {
  1588. function AnimationTimeline(document) {
  1589. var _this = this;
  1590. this.document = void 0;
  1591. /**
  1592. * all active animations
  1593. */
  1594. this.animations = [];
  1595. this.ticking = false;
  1596. this.timelineTicking = false;
  1597. this.hasRestartedThisFrame = false;
  1598. this.animationsWithPromises = [];
  1599. this.inTick = false;
  1600. this.pendingEffects = [];
  1601. this.currentTime = null;
  1602. this.rafId = 0;
  1603. this.rafCallbacks = [];
  1604. this.frameId = void 0;
  1605. this.webAnimationsNextTick = function (t) {
  1606. _this.currentTime = t;
  1607. _this.discardAnimations();
  1608. if (_this.animations.length === 0) {
  1609. _this.timelineTicking = false;
  1610. } else {
  1611. _this.requestAnimationFrame(_this.webAnimationsNextTick);
  1612. }
  1613. };
  1614. this.processRafCallbacks = function (t) {
  1615. var processing = _this.rafCallbacks;
  1616. _this.rafCallbacks = [];
  1617. if (t < Number(_this.currentTime)) t = Number(_this.currentTime);
  1618. _this.animations.sort(compareAnimations);
  1619. _this.animations = _this.tick(t, true, _this.animations)[0];
  1620. processing.forEach(function (entry) {
  1621. entry[1](t);
  1622. });
  1623. _this.applyPendingEffects();
  1624. };
  1625. this.document = document;
  1626. }
  1627. var _proto = AnimationTimeline.prototype;
  1628. _proto.getAnimations = function getAnimations() {
  1629. this.discardAnimations();
  1630. return this.animations.slice();
  1631. };
  1632. _proto.isTicking = function isTicking() {
  1633. return this.inTick;
  1634. };
  1635. _proto.play = function play(target, keyframes, options) {
  1636. var effect = new KeyframeEffect(target, keyframes, options);
  1637. var animation = new Animation(effect, this);
  1638. this.animations.push(animation);
  1639. this.restartWebAnimationsNextTick();
  1640. animation.updatePromises();
  1641. animation.play();
  1642. animation.updatePromises();
  1643. return animation;
  1644. }
  1645. // RAF is supposed to be the last script to occur before frame rendering but not
  1646. // all browsers behave like this. This function is for synchonously updating an
  1647. // animation's effects whenever its state is mutated by script to work around
  1648. // incorrect script execution ordering by the browser.
  1649. ;
  1650. _proto.applyDirtiedAnimation = function applyDirtiedAnimation(animation) {
  1651. var _this2 = this;
  1652. if (this.inTick) {
  1653. return;
  1654. }
  1655. // update active animations in displayobject
  1656. animation.markTarget();
  1657. var animations = animation.targetAnimations();
  1658. animations.sort(compareAnimations);
  1659. // clear inactive animations
  1660. var inactiveAnimations = this.tick(Number(this.currentTime), false, animations.slice())[1];
  1661. inactiveAnimations.forEach(function (animation) {
  1662. var index = _this2.animations.indexOf(animation);
  1663. if (index !== -1) {
  1664. _this2.animations.splice(index, 1);
  1665. }
  1666. });
  1667. this.applyPendingEffects();
  1668. };
  1669. _proto.restart = function restart() {
  1670. if (!this.ticking) {
  1671. this.ticking = true;
  1672. this.requestAnimationFrame(function () {});
  1673. this.hasRestartedThisFrame = true;
  1674. }
  1675. return this.hasRestartedThisFrame;
  1676. };
  1677. _proto.destroy = function destroy() {
  1678. this.document.defaultView.cancelAnimationFrame(this.frameId);
  1679. };
  1680. _proto.applyPendingEffects = function applyPendingEffects() {
  1681. this.pendingEffects.forEach(function (effect) {
  1682. effect === null || effect === void 0 ? void 0 : effect.applyInterpolations();
  1683. });
  1684. this.pendingEffects = [];
  1685. };
  1686. _proto.updateAnimationsPromises = function updateAnimationsPromises() {
  1687. this.animationsWithPromises = this.animationsWithPromises.filter(function (animation) {
  1688. return animation.updatePromises();
  1689. });
  1690. };
  1691. _proto.discardAnimations = function discardAnimations() {
  1692. this.updateAnimationsPromises();
  1693. this.animations = this.animations.filter(function (animation) {
  1694. return animation.playState !== 'finished' && animation.playState !== 'idle';
  1695. });
  1696. };
  1697. _proto.restartWebAnimationsNextTick = function restartWebAnimationsNextTick() {
  1698. if (!this.timelineTicking) {
  1699. this.timelineTicking = true;
  1700. this.requestAnimationFrame(this.webAnimationsNextTick);
  1701. }
  1702. };
  1703. _proto.rAF = function rAF(f) {
  1704. var id = this.rafId++;
  1705. if (this.rafCallbacks.length === 0) {
  1706. this.frameId = this.document.defaultView.requestAnimationFrame(this.processRafCallbacks);
  1707. }
  1708. this.rafCallbacks.push([id, f]);
  1709. return id;
  1710. };
  1711. _proto.requestAnimationFrame = function requestAnimationFrame(f) {
  1712. var _this3 = this;
  1713. return this.rAF(function (x) {
  1714. _this3.updateAnimationsPromises();
  1715. f(x);
  1716. _this3.updateAnimationsPromises();
  1717. });
  1718. };
  1719. _proto.tick = function tick(t, isAnimationFrame, updatingAnimations) {
  1720. var _this4 = this,
  1721. _this$pendingEffects,
  1722. _this$pendingEffects2;
  1723. this.inTick = true;
  1724. this.hasRestartedThisFrame = false;
  1725. this.currentTime = t;
  1726. this.ticking = false;
  1727. var newPendingClears = [];
  1728. var newPendingEffects = [];
  1729. var activeAnimations = [];
  1730. var inactiveAnimations = [];
  1731. updatingAnimations.forEach(function (animation) {
  1732. animation.tick(t, isAnimationFrame);
  1733. if (!animation._inEffect) {
  1734. newPendingClears.push(animation.effect);
  1735. animation.unmarkTarget();
  1736. } else {
  1737. newPendingEffects.push(animation.effect);
  1738. animation.markTarget();
  1739. }
  1740. if (animation._needsTick) _this4.ticking = true;
  1741. var alive = animation._inEffect || animation._needsTick;
  1742. animation._inTimeline = alive;
  1743. if (alive) {
  1744. activeAnimations.push(animation);
  1745. } else {
  1746. inactiveAnimations.push(animation);
  1747. }
  1748. });
  1749. (_this$pendingEffects = this.pendingEffects).push.apply(_this$pendingEffects, newPendingClears);
  1750. (_this$pendingEffects2 = this.pendingEffects).push.apply(_this$pendingEffects2, newPendingEffects);
  1751. if (this.ticking) this.requestAnimationFrame(function () {});
  1752. this.inTick = false;
  1753. return [activeAnimations, inactiveAnimations];
  1754. };
  1755. return AnimationTimeline;
  1756. }();
  1757. gLite.runtime.EasingFunction = parseEasingFunction;
  1758. gLite.runtime.AnimationTimeline = AnimationTimeline;
  1759. exports.Animation = Animation;
  1760. exports.AnimationEvent = AnimationEvent;
  1761. exports.AnimationTimeline = AnimationTimeline;
  1762. exports.KeyframeEffect = KeyframeEffect;
  1763. exports.compareAnimations = compareAnimations;
  1764. exports.makeTiming = makeTiming;
  1765. exports.normalizeKeyframes = normalizeKeyframes;
  1766. exports.normalizeTimingInput = normalizeTimingInput;
  1767. exports.numericTimingToObject = numericTimingToObject;