index.esm.js 61 KB

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