AnimationEffect.cpp 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502
  1. /*
  2. * Copyright (c) 2023, Matthew Olsson <mattco@serenityos.org>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <LibJS/Runtime/VM.h>
  7. #include <LibWeb/Animations/Animation.h>
  8. #include <LibWeb/Animations/AnimationEffect.h>
  9. #include <LibWeb/Bindings/Intrinsics.h>
  10. #include <LibWeb/WebIDL/ExceptionOr.h>
  11. namespace Web::Animations {
  12. JS_DEFINE_ALLOCATOR(AnimationEffect);
  13. JS::NonnullGCPtr<AnimationEffect> AnimationEffect::create(JS::Realm& realm)
  14. {
  15. return realm.heap().allocate<AnimationEffect>(realm, realm);
  16. }
  17. OptionalEffectTiming EffectTiming::to_optional_effect_timing() const
  18. {
  19. return {
  20. .delay = delay,
  21. .end_delay = end_delay,
  22. .fill = fill,
  23. .iteration_start = iteration_start,
  24. .iterations = iterations,
  25. .duration = duration,
  26. .direction = direction,
  27. .easing = easing,
  28. };
  29. }
  30. // https://www.w3.org/TR/web-animations-1/#dom-animationeffect-gettiming
  31. EffectTiming AnimationEffect::get_timing() const
  32. {
  33. // 1. Returns the specified timing properties for this animation effect.
  34. return {
  35. .delay = m_start_delay,
  36. .end_delay = m_end_delay,
  37. .fill = m_fill_mode,
  38. .iteration_start = m_iteration_start,
  39. .iterations = m_iteration_count,
  40. .duration = m_iteration_duration,
  41. .direction = m_playback_direction,
  42. .easing = m_easing_function,
  43. };
  44. }
  45. // https://www.w3.org/TR/web-animations-1/#dom-animationeffect-getcomputedtiming
  46. ComputedEffectTiming AnimationEffect::get_computed_timing() const
  47. {
  48. // 1. Returns the calculated timing properties for this animation effect.
  49. // Note: Although some of the attributes of the object returned by getTiming() and getComputedTiming() are common,
  50. // their values may differ in the following ways:
  51. // - duration: while getTiming() may return the string auto, getComputedTiming() must return a number
  52. // corresponding to the calculated value of the iteration duration as defined in the description of the
  53. // duration member of the EffectTiming interface.
  54. //
  55. // In this level of the specification, that simply means that an auto value is replaced by zero.
  56. auto duration = m_iteration_duration.has<String>() ? 0.0 : m_iteration_duration.get<double>();
  57. // - fill: likewise, while getTiming() may return the string auto, getComputedTiming() must return the specific
  58. // FillMode used for timing calculations as defined in the description of the fill member of the EffectTiming
  59. // interface.
  60. //
  61. // In this level of the specification, that simply means that an auto value is replaced by the none FillMode.
  62. auto fill = m_fill_mode == Bindings::FillMode::Auto ? Bindings::FillMode::None : m_fill_mode;
  63. return {
  64. {
  65. .delay = m_start_delay,
  66. .end_delay = m_end_delay,
  67. .fill = fill,
  68. .iteration_start = m_iteration_start,
  69. .iterations = m_iteration_count,
  70. .duration = duration,
  71. .direction = m_playback_direction,
  72. .easing = m_easing_function,
  73. },
  74. end_time(),
  75. active_duration(),
  76. local_time(),
  77. transformed_progress(),
  78. current_iteration(),
  79. };
  80. }
  81. // https://www.w3.org/TR/web-animations-1/#dom-animationeffect-updatetiming
  82. // https://www.w3.org/TR/web-animations-1/#update-the-timing-properties-of-an-animation-effect
  83. WebIDL::ExceptionOr<void> AnimationEffect::update_timing(OptionalEffectTiming timing)
  84. {
  85. // 1. If the iterationStart member of input exists and is less than zero, throw a TypeError and abort this
  86. // procedure.
  87. if (timing.iteration_start.has_value() && timing.iteration_start.value() < 0.0)
  88. return WebIDL::SimpleException { WebIDL::SimpleExceptionType::TypeError, "Invalid iteration start value"sv };
  89. // 2. If the iterations member of input exists, and is less than zero or is the value NaN, throw a TypeError and
  90. // abort this procedure.
  91. if (timing.iterations.has_value() && (timing.iterations.value() < 0.0 || isnan(timing.iterations.value())))
  92. return WebIDL::SimpleException { WebIDL::SimpleExceptionType::TypeError, "Invalid iteration count value"sv };
  93. // 3. If the duration member of input exists, and is less than zero or is the value NaN, throw a TypeError and
  94. // abort this procedure.
  95. // Note: "auto", the only valid string value, is treated as 0.
  96. auto& duration = timing.duration;
  97. if (duration.has_value() && duration->has<double>() && (duration->get<double>() < 0.0 || isnan(duration->get<double>())))
  98. return WebIDL::SimpleException { WebIDL::SimpleExceptionType::TypeError, "Invalid duration value"sv };
  99. // FIXME:
  100. // 4. If the easing member of input exists but cannot be parsed using the <easing-function> production
  101. // [CSS-EASING-1], throw a TypeError and abort this procedure.
  102. // 5. Assign each member that exists in input to the corresponding timing property of effect as follows:
  103. // - delay → start delay
  104. if (timing.delay.has_value())
  105. m_start_delay = timing.delay.value();
  106. // - endDelay → end delay
  107. if (timing.end_delay.has_value())
  108. m_end_delay = timing.end_delay.value();
  109. // - fill → fill mode
  110. if (timing.fill.has_value())
  111. m_fill_mode = timing.fill.value();
  112. // - iterationStart → iteration start
  113. if (timing.iteration_start.has_value())
  114. m_iteration_start = timing.iteration_start.value();
  115. // - iterations → iteration count
  116. if (timing.iterations.has_value())
  117. m_iteration_count = timing.iterations.value();
  118. // - duration → iteration duration
  119. if (timing.duration.has_value())
  120. m_iteration_duration = timing.duration.value();
  121. // - direction → playback direction
  122. if (timing.direction.has_value())
  123. m_playback_direction = timing.direction.value();
  124. // - easing → timing function
  125. if (timing.easing.has_value())
  126. m_easing_function = timing.easing.value();
  127. return {};
  128. }
  129. // https://www.w3.org/TR/web-animations-1/#animation-direction
  130. AnimationDirection AnimationEffect::animation_direction() const
  131. {
  132. // "backwards" if the effect is associated with an animation and the associated animation’s playback rate is less
  133. // than zero; in all other cases, the animation direction is "forwards".
  134. if (m_associated_animation && m_associated_animation->playback_rate() < 0.0)
  135. return AnimationDirection::Backwards;
  136. return AnimationDirection::Forwards;
  137. }
  138. // https://www.w3.org/TR/web-animations-1/#end-time
  139. double AnimationEffect::end_time() const
  140. {
  141. // 1. The end time of an animation effect is the result of evaluating
  142. // max(start delay + active duration + end delay, 0).
  143. return max(m_start_delay + active_duration() + m_end_delay, 0.0);
  144. }
  145. // https://www.w3.org/TR/web-animations-1/#local-time
  146. Optional<double> AnimationEffect::local_time() const
  147. {
  148. // The local time of an animation effect at a given moment is based on the first matching condition from the
  149. // following:
  150. // -> If the animation effect is associated with an animation,
  151. if (m_associated_animation) {
  152. // the local time is the current time of the animation.
  153. return m_associated_animation->current_time();
  154. }
  155. // -> Otherwise,
  156. // the local time is unresolved.
  157. return {};
  158. }
  159. // https://www.w3.org/TR/web-animations-1/#active-duration
  160. double AnimationEffect::active_duration() const
  161. {
  162. // The active duration is calculated as follows:
  163. // active duration = iteration duration × iteration count
  164. // If either the iteration duration or iteration count are zero, the active duration is zero. This clarification is
  165. // needed since the result of infinity multiplied by zero is undefined according to IEEE 754-2008.
  166. if (m_iteration_duration.has<String>() || m_iteration_duration.get<double>() == 0.0 || m_iteration_count == 0.0)
  167. return 0.0;
  168. return m_iteration_duration.get<double>() * m_iteration_count;
  169. }
  170. Optional<double> AnimationEffect::active_time() const
  171. {
  172. return active_time_using_fill(m_fill_mode);
  173. }
  174. // https://www.w3.org/TR/web-animations-1/#calculating-the-active-time
  175. Optional<double> AnimationEffect::active_time_using_fill(Bindings::FillMode fill_mode) const
  176. {
  177. // The active time is based on the local time and start delay. However, it is only defined when the animation effect
  178. // should produce an output and hence depends on its fill mode and phase as follows,
  179. // -> If the animation effect is in the before phase,
  180. if (is_in_the_before_phase()) {
  181. // The result depends on the first matching condition from the following,
  182. // -> If the fill mode is backwards or both,
  183. if (fill_mode == Bindings::FillMode::Backwards || fill_mode == Bindings::FillMode::Both) {
  184. // Return the result of evaluating max(local time - start delay, 0).
  185. return max(local_time().value() - m_start_delay, 0.0);
  186. }
  187. // -> Otherwise,
  188. // Return an unresolved time value.
  189. return {};
  190. }
  191. // -> If the animation effect is in the active phase,
  192. if (is_in_the_active_phase()) {
  193. // Return the result of evaluating local time - start delay.
  194. return local_time().value() - m_start_delay;
  195. }
  196. // -> If the animation effect is in the after phase,
  197. if (is_in_the_after_phase()) {
  198. // The result depends on the first matching condition from the following,
  199. // -> If the fill mode is forwards or both,
  200. if (fill_mode == Bindings::FillMode::Forwards || fill_mode == Bindings::FillMode::Both) {
  201. // Return the result of evaluating max(min(local time - start delay, active duration), 0).
  202. return max(min(local_time().value() - m_start_delay, active_duration()), 0.0);
  203. }
  204. // -> Otherwise,
  205. // Return an unresolved time value.
  206. return {};
  207. }
  208. // -> Otherwise (the local time is unresolved),
  209. // Return an unresolved time value.
  210. return {};
  211. }
  212. // https://www.w3.org/TR/web-animations-1/#before-active-boundary-time
  213. double AnimationEffect::before_active_boundary_time() const
  214. {
  215. // max(min(start delay, end time), 0)
  216. return max(min(m_start_delay, end_time()), 0.0);
  217. }
  218. // https://www.w3.org/TR/web-animations-1/#active-after-boundary-time
  219. double AnimationEffect::after_active_boundary_time() const
  220. {
  221. // max(min(start delay + active duration, end time), 0)
  222. return max(min(m_start_delay + active_duration(), end_time()), 0.0);
  223. }
  224. // https://www.w3.org/TR/web-animations-1/#animation-effect-before-phase
  225. bool AnimationEffect::is_in_the_before_phase() const
  226. {
  227. // An animation effect is in the before phase if the animation effect’s local time is not unresolved and either of
  228. // the following conditions are met:
  229. auto local_time = this->local_time();
  230. if (!local_time.has_value())
  231. return false;
  232. // - the local time is less than the before-active boundary time, or
  233. auto before_active_boundary_time = this->before_active_boundary_time();
  234. if (local_time.value() < before_active_boundary_time)
  235. return true;
  236. // - the animation direction is "backwards" and the local time is equal to the before-active boundary time.
  237. return animation_direction() == AnimationDirection::Backwards && local_time.value() == before_active_boundary_time;
  238. }
  239. // https://www.w3.org/TR/web-animations-1/#animation-effect-after-phase
  240. bool AnimationEffect::is_in_the_after_phase() const
  241. {
  242. // An animation effect is in the after phase if the animation effect’s local time is not unresolved and either of
  243. // the following conditions are met:
  244. auto local_time = this->local_time();
  245. if (!local_time.has_value())
  246. return false;
  247. // - the local time is greater than the active-after boundary time, or
  248. auto after_active_boundary_time = this->after_active_boundary_time();
  249. if (local_time.value() > after_active_boundary_time)
  250. return true;
  251. // - the animation direction is "forwards" and the local time is equal to the active-after boundary time.
  252. return animation_direction() == AnimationDirection::Forwards && local_time.value() == after_active_boundary_time;
  253. }
  254. // https://www.w3.org/TR/web-animations-1/#animation-effect-active-phase
  255. bool AnimationEffect::is_in_the_active_phase() const
  256. {
  257. // An animation effect is in the active phase if the animation effect’s local time is not unresolved and it is not
  258. // in either the before phase nor the after phase.
  259. return local_time().has_value() && !is_in_the_before_phase() && !is_in_the_after_phase();
  260. }
  261. // https://www.w3.org/TR/web-animations-1/#animation-effect-idle-phase
  262. bool AnimationEffect::is_in_the_idle_phase() const
  263. {
  264. // It is often convenient to refer to the case when an animation effect is in none of the above phases as being in
  265. // the idle phase
  266. return !is_in_the_before_phase() && !is_in_the_active_phase() && !is_in_the_after_phase();
  267. }
  268. AnimationEffect::Phase AnimationEffect::phase() const
  269. {
  270. // This is a convenience method that returns the phase of the animation effect, to avoid having to call all of the
  271. // phase functions separately.
  272. // FIXME: There is a lot of duplicated condition checking here which can probably be inlined into this function
  273. if (is_in_the_before_phase())
  274. return Phase::Before;
  275. if (is_in_the_active_phase())
  276. return Phase::Active;
  277. if (is_in_the_after_phase())
  278. return Phase::After;
  279. return Phase::Idle;
  280. }
  281. // https://www.w3.org/TR/web-animations-1/#overall-progress
  282. Optional<double> AnimationEffect::overall_progress() const
  283. {
  284. // 1. If the active time is unresolved, return unresolved.
  285. auto active_time = this->active_time();
  286. if (!active_time.has_value())
  287. return {};
  288. // 2. Calculate an initial value for overall progress based on the first matching condition from below,
  289. double overall_progress;
  290. // -> If the iteration duration is zero,
  291. if (m_iteration_duration.has<String>() || m_iteration_duration.get<double>() == 0.0) {
  292. // If the animation effect is in the before phase, let overall progress be zero, otherwise, let it be equal to
  293. // the iteration count.
  294. if (is_in_the_before_phase())
  295. overall_progress = 0.0;
  296. else
  297. overall_progress = m_iteration_count;
  298. }
  299. // Otherwise,
  300. else {
  301. // Let overall progress be the result of calculating active time / iteration duration.
  302. overall_progress = active_time.value() / m_iteration_duration.get<double>();
  303. }
  304. // 3. Return the result of calculating overall progress + iteration start.
  305. return overall_progress + m_iteration_start;
  306. }
  307. // https://www.w3.org/TR/web-animations-1/#directed-progress
  308. Optional<double> AnimationEffect::directed_progress() const
  309. {
  310. // 1. If the simple iteration progress is unresolved, return unresolved.
  311. auto simple_iteration_progress = this->simple_iteration_progress();
  312. if (!simple_iteration_progress.has_value())
  313. return {};
  314. // 2. Calculate the current direction using the first matching condition from the following list:
  315. auto current_direction = this->current_direction();
  316. // 3. If the current direction is forwards then return the simple iteration progress.
  317. if (current_direction == AnimationDirection::Forwards)
  318. return simple_iteration_progress;
  319. // Otherwise, return 1.0 - simple iteration progress.
  320. return 1.0 - simple_iteration_progress.value();
  321. }
  322. // https://www.w3.org/TR/web-animations-1/#directed-progress
  323. AnimationDirection AnimationEffect::current_direction() const
  324. {
  325. // 2. Calculate the current direction using the first matching condition from the following list:
  326. // -> If playback direction is normal,
  327. if (m_playback_direction == Bindings::PlaybackDirection::Normal) {
  328. // Let the current direction be forwards.
  329. return AnimationDirection::Forwards;
  330. }
  331. // -> If playback direction is reverse,
  332. if (m_playback_direction == Bindings::PlaybackDirection::Reverse) {
  333. // Let the current direction be reverse.
  334. return AnimationDirection::Backwards;
  335. }
  336. // -> Otherwise,
  337. // 1. Let d be the current iteration.
  338. double d = current_iteration().value();
  339. // 2. If playback direction is alternate-reverse increment d by 1.
  340. if (m_playback_direction == Bindings::PlaybackDirection::AlternateReverse)
  341. d += 1.0;
  342. // 3. If d % 2 == 0, let the current direction be forwards, otherwise let the current direction be reverse. If d
  343. // is infinity, let the current direction be forwards.
  344. if (isinf(d))
  345. return AnimationDirection::Forwards;
  346. if (fmod(d, 2.0) == 0.0)
  347. return AnimationDirection::Forwards;
  348. return AnimationDirection::Backwards;
  349. }
  350. // https://www.w3.org/TR/web-animations-1/#simple-iteration-progress
  351. Optional<double> AnimationEffect::simple_iteration_progress() const
  352. {
  353. // 1. If the overall progress is unresolved, return unresolved.
  354. auto overall_progress = this->overall_progress();
  355. if (!overall_progress.has_value())
  356. return {};
  357. // 2. If overall progress is infinity, let the simple iteration progress be iteration start % 1.0, otherwise, let
  358. // the simple iteration progress be overall progress % 1.0.
  359. double simple_iteration_progress = isinf(overall_progress.value()) ? fmod(m_iteration_start, 1.0) : fmod(overall_progress.value(), 1.0);
  360. // 3. If all of the following conditions are true,
  361. // - the simple iteration progress calculated above is zero, and
  362. // - the animation effect is in the active phase or the after phase, and
  363. // - the active time is equal to the active duration, and
  364. // - the iteration count is not equal to zero.
  365. auto active_time = this->active_time();
  366. if (simple_iteration_progress == 0.0 && (is_in_the_active_phase() || is_in_the_after_phase()) && active_time.has_value() && active_time.value() == active_duration() && m_iteration_count != 0.0) {
  367. // let the simple iteration progress be 1.0.
  368. simple_iteration_progress = 1.0;
  369. }
  370. // 4. Return simple iteration progress.
  371. return simple_iteration_progress;
  372. }
  373. // https://www.w3.org/TR/web-animations-1/#current-iteration
  374. Optional<double> AnimationEffect::current_iteration() const
  375. {
  376. // 1. If the active time is unresolved, return unresolved.
  377. auto active_time = this->active_time();
  378. if (!active_time.has_value())
  379. return {};
  380. // 2. If the animation effect is in the after phase and the iteration count is infinity, return infinity.
  381. if (is_in_the_after_phase() && isinf(m_iteration_count))
  382. return m_iteration_count;
  383. // 3. If the simple iteration progress is 1.0, return floor(overall progress) - 1.
  384. auto simple_iteration_progress = this->simple_iteration_progress();
  385. if (simple_iteration_progress.has_value() && simple_iteration_progress.value() == 1.0)
  386. return floor(overall_progress().value()) - 1.0;
  387. // 4. Otherwise, return floor(overall progress).
  388. return floor(overall_progress().value());
  389. }
  390. // https://www.w3.org/TR/web-animations-1/#transformed-progress
  391. Optional<double> AnimationEffect::transformed_progress() const
  392. {
  393. // 1. If the directed progress is unresolved, return unresolved.
  394. auto directed_progress = this->directed_progress();
  395. if (!directed_progress.has_value())
  396. return {};
  397. // 2. Calculate the value of the before flag as follows:
  398. // 1. Determine the current direction using the procedure defined in §4.9.1 Calculating the directed progress.
  399. auto current_direction = this->current_direction();
  400. // 2. If the current direction is forwards, let going forwards be true, otherwise it is false.
  401. auto going_forwards = current_direction == AnimationDirection::Forwards;
  402. // 3. The before flag is set if the animation effect is in the before phase and going forwards is true; or if the animation effect
  403. // is in the after phase and going forwards is false.
  404. auto before_flag = (is_in_the_before_phase() && going_forwards) || (is_in_the_after_phase() && !going_forwards);
  405. // 3. Return the result of evaluating the animation effect’s timing function passing directed progress as the input progress value and
  406. // before flag as the before flag.
  407. return m_timing_function(directed_progress.value(), before_flag);
  408. }
  409. AnimationEffect::AnimationEffect(JS::Realm& realm)
  410. : Bindings::PlatformObject(realm)
  411. {
  412. }
  413. void AnimationEffect::initialize(JS::Realm& realm)
  414. {
  415. Base::initialize(realm);
  416. set_prototype(&Bindings::ensure_web_prototype<Bindings::AnimationEffectPrototype>(realm, "AnimationEffect"_fly_string));
  417. }
  418. }