From fdae4db5397b5d0ec9d9b69434ce271edd0f11a2 Mon Sep 17 00:00:00 2001 From: Alan Orozco Date: Wed, 15 Apr 2020 18:26:41 -0700 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=20(#27597)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Partial for #27420 Later work: 1. Scope `` selectors to its ``. 2. Provide all [`getDims()` values](https://github.com/ampproject/amphtml/blob/b6313e372fdd1298928e2417dcc616b03288e051/extensions/amp-story/1.0/animation.js#L159) as `` config. 3. Support sequencing with `animate-in-after`. 4. Decide on subanimations API: element by id, `subanimations`, or ` + + + + + + + + + rotate with amp-story-animation +
fly-in with animate-in
+
+ fly-in with animate-in, after the previous element +
+ + + + + + + + + + + bounce forward with amp-story-animation + +
fly-in with animate-in
+
+ fly-in with animate-in, after the previous element +
+ + + + + + + + + + + diff --git a/extensions/amp-animation/0.1/amp-animation.js b/extensions/amp-animation/0.1/amp-animation.js index b81dadb450f7..e9c73bfd7d37 100644 --- a/extensions/amp-animation/0.1/amp-animation.js +++ b/extensions/amp-animation/0.1/amp-animation.js @@ -20,16 +20,15 @@ import {Pass} from '../../../src/pass'; import {Services} from '../../../src/services'; import {WebAnimationPlayState} from './web-animation-types'; import {WebAnimationService} from './web-animation-service'; -import {childElementByTag} from '../../../src/dom'; import {clamp} from '../../../src/utils/math'; +import {getChildJsonConfig} from '../../../src/json'; import {getDetail, listen} from '../../../src/event-helper'; import {getFriendlyIframeEmbedOptional} from '../../../src/iframe-helper'; import {getParentWindowFrameElement} from '../../../src/service'; import {installWebAnimationsIfNecessary} from './web-animations-polyfill'; import {isFiniteNumber} from '../../../src/types'; import {setInitialDisplay, setStyles, toggle} from '../../../src/style'; -import {tryParseJson} from '../../../src/json'; -import {user, userAssert} from '../../../src/log'; +import {userAssert} from '../../../src/log'; const TAG = 'amp-animation'; @@ -91,14 +90,7 @@ export class AmpAnimation extends AMP.BaseElement { ); } - // Parse config. - const scriptElement = userAssert( - childElementByTag(this.element, 'script'), - '" + + + + + + `; + + const {spec1holder, spec2holder} = htmlRefs(page); + spec1holder.textContent = JSON.stringify(spec1); + spec2holder.textContent = JSON.stringify(spec2); + + const animationManager = new AnimationManager(page, ampdoc); + await animationManager.applyFirstFrame(); + + expect( + createAnimationRunner.withArgs( + page, + env.sandbox.match(spec1), + webAnimationBuilderPromise, + env.sandbox.match.any, + env.sandbox.match.any, + env.sandbox.match.any + ) + ).to.have.been.calledOnce; + + expect( + createAnimationRunner.withArgs( + page, + env.sandbox.match(spec2), + webAnimationBuilderPromise, + env.sandbox.match.any, + env.sandbox.match.any, + env.sandbox.match.any + ) + ).to.have.been.calledOnce; + }); + it('fails when using unknown presets', () => { const animationManager = new AnimationManager( html`