Add baseline infrastructure for animations in amp-story #11525
Conversation
| */ | ||
|
|
||
| /** @typedef {!Array<!Object<string, *>>} */ | ||
| export let Keyframes; |
There was a problem hiding this comment.
Suffix typedefs with "Def", i.e. KeyFramesDef.
| constructor( | ||
| page, animationDef, webAnimationBuilderPromise, vsync, timer, sequence) { | ||
| /** @private @const */ | ||
| this.page_ = page; |
There was a problem hiding this comment.
Are they needed here? Since they're @const and directly assigned from a typed param, Closure could then do inference, right?
| import {setStyle, resetStyles} from '../../../src/style'; | ||
|
|
||
|
|
||
| const ANIMATE_IN_ATTRIBUTE_NAME = 'animate-in'; |
There was a problem hiding this comment.
/** @const {string} */
IIRC, Closure is pretty dumb about this so we have to do some handholding.
|
|
||
| /** | ||
| * @param {!PlaybackActivity} activity | ||
| * @param {!Promise=} opt_wait |
There was a problem hiding this comment.
@private
IIRC, Closure needs this annotation for obfuscation.
There was a problem hiding this comment.
Oversight on my part, thanks.
| /** | ||
| * Executes playback activity if runner is ready. | ||
| * @param {!PlaybackActivity} activity | ||
| * @param {?Promise} wait |
| */ | ||
| notifyFinish(id) { | ||
| if (id in this.subscriptionPromises_) { | ||
| dev().assert(this.subscriptionResolvers_)[id](); |
There was a problem hiding this comment.
Did you mean dev().assert(this.subscriptionResolvers_[id])()?
| } | ||
|
|
||
| /** | ||
| * @param {string} name |
| */ | ||
| createAnimationBuilderPromise_() { | ||
| return Services.extensionsFor(this.ampdoc_.win) | ||
| .loadExtension('amp-animation') |
There was a problem hiding this comment.
You probably want installExtensionForDoc here which will de-dupe loads. loadExtension was renamed preloadExtension during a refactor for better AmpDoc support.
|
|
||
| // TODO(alanorozco): Looping animations | ||
| /** Manager for animations in story pages. */ | ||
| export class AnimationManager { |
There was a problem hiding this comment.
Minor: This file is large enough to split into two IMO.
|
|
||
|
|
||
| /** Bus for animation sequencing. */ | ||
| class AnimationSequence { |
There was a problem hiding this comment.
signals.js does something pretty similar FYI.
There was a problem hiding this comment.
Oh, that's cool. I'll look into whether the bus can be replaced with this.
General design aspects
amp-animationformat (i.e. more restrictions)animate-inattribute. Other animation properties are configured with the attributesanimate-in-duration,animate-in-delayandanimate-in-after.animation-presets.jsdefines the preset animations that can be used in stories.AnimationRunnerhandles the entrance animation defined for a given element.AnimationManagerhandles the entrance animations for a given story page.AnimationSequenceis a bus shared by allAnimationRunners for sequencing.