Skip to content

Commit 2595cf2

Browse files
mszylkowskimszylkowski
authored
✨ [Story bodymoving] Support amp-bodymovin-animation on amp-story-grid-layer (#38239)
* Added tasts * Undo * Added support for bodymovin * Rename to BodymovinAnimationRunner * Simplified executeAction params
1 parent b103b61 commit 2595cf2

4 files changed

Lines changed: 95 additions & 20 deletions

File tree

‎examples/amp-story/amp-story-animation.html‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,13 @@
44
<meta charset="utf-8" />
55
<title>amp-animation inside amp-story</title>
66
<link rel="canonical" href="." />
7-
<meta
8-
name="viewport"
9-
content="width=device-width,minimum-scale=1,initial-scale=1"
10-
/>
7+
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>
118
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
129
<script async src="https://cdn.ampproject.org/v0.js"></script>
13-
<script
14-
async
15-
custom-element="amp-story"
16-
src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
17-
></script>
18-
<script
19-
async
20-
custom-element="amp-video"
21-
src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
22-
></script>
23-
<script
24-
async
25-
custom-element="amp-animation"
26-
src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"
27-
></script>
10+
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
11+
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
12+
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
13+
<script async custom-element="amp-bodymovin-animation" src="https://cdn.ampproject.org/v0/amp-bodymovin-animation-0.1.js"></script>
2814
<style amp-custom>
2915
body {
3016
font-family: sans-serif;
@@ -160,6 +146,12 @@
160146
</div>
161147
</amp-story-grid-layer>
162148
</amp-story-page>
149+
<amp-story-page id="bodymovin">
150+
<amp-story-grid-layer template="vertical">
151+
<amp-bodymovin-animation layout="responsive" width="200" height="200" src="https://nainar.github.io/loader.json" loop>
152+
</amp-bodymovin-animation>
153+
</amp-story-grid-layer>
154+
</amp-story-page>
163155
</amp-story>
164156
</body>
165157
</html>

‎extensions/amp-story/1.0/amp-story.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -728,3 +728,7 @@ amp-story .amp-video-eq,
728728
.i-amphtml-story-page-play-icon {
729729
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48" fill="#FFF"><path d="M0 0h48v48H0z" fill="none"/><path d="M24 4a20 20 0 1 0 0 40 20 20 0 0 0 0-40zm-4 29V15l12 9-12 9z"/></svg>') !important;
730730
}
731+
732+
amp-bodymovin-animation, amp-bodymovin-animation * {
733+
pointer-events: none !important;
734+
}

‎extensions/amp-story/1.0/animation.js‎

Lines changed: 79 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ const DEFAULT_EASING = 'cubic-bezier(0.4, 0.0, 0.2, 1)';
5959
* TODO(alanorozco): maybe memoize?
6060
*/
6161
export function hasAnimations(element) {
62-
const selector = `${ANIMATABLE_ELEMENTS_SELECTOR},>amp-story-animation`;
62+
const selector = `${ANIMATABLE_ELEMENTS_SELECTOR},>amp-story-animation,amp-bodymovin-animation`;
6363
return !!scopedQuerySelector(element, selector);
6464
}
6565

@@ -700,6 +700,12 @@ export class AnimationManager {
700700
})
701701
)
702702
)
703+
.concat(
704+
Array.prototype.map.call(
705+
this.page_.querySelectorAll('amp-bodymovin-animation'),
706+
(el) => new BodymovinAnimationRunner(el)
707+
)
708+
)
703709
.filter(Boolean);
704710
}
705711
return devAssert(this.runners_);
@@ -881,3 +887,75 @@ export class AnimationSequence {
881887
return this.subscriptionPromises_[id];
882888
}
883889
}
890+
891+
export class BodymovinAnimationRunner {
892+
/**
893+
* @param {!Element} bodymovinAnimationEl
894+
*/
895+
constructor(bodymovinAnimationEl) {
896+
this.bodymovinAnimationEl_ = bodymovinAnimationEl;
897+
this.pause();
898+
}
899+
900+
/**
901+
* Pauses the bodymovin animation.
902+
*/
903+
pause() {
904+
this.executeAction_('pause');
905+
}
906+
907+
/**
908+
* Plays the bodymovin animation.
909+
*/
910+
resume() {
911+
this.executeAction_('play');
912+
}
913+
914+
/**
915+
* Starts the bodymovin animation.
916+
*/
917+
start() {
918+
this.applyFirstFrame();
919+
this.resume();
920+
}
921+
922+
/**
923+
* Seeks the bodymovin animation to the first frame.
924+
*/
925+
applyFirstFrame() {
926+
this.executeAction_('seekTo', {
927+
percent: 0,
928+
});
929+
}
930+
931+
/**
932+
* Seeks the bodymovin animation to the last frame.
933+
*/
934+
applyLastFrame() {
935+
this.executeAction_('seekTo', {
936+
percent: 1,
937+
});
938+
}
939+
940+
/**
941+
* Cancels the bodymovin animation by pausing it.
942+
*/
943+
cancel() {
944+
this.pause();
945+
}
946+
947+
/**
948+
* @param {string} method
949+
* @param {=any} args
950+
* @private
951+
*/
952+
executeAction_(method, args = null) {
953+
this.bodymovinAnimationEl_.getImpl().then((impl) => {
954+
impl.executeAction({
955+
method,
956+
args,
957+
satisfiesTrust: () => true,
958+
});
959+
});
960+
}
961+
}

‎extensions/amp-story/validator-amp-story.protoascii‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -711,6 +711,7 @@ descendant_tag_list: {
711711
tag: "ADDRESS"
712712
tag: "AMP-ANALYTICS"
713713
tag: "AMP-AUDIO"
714+
tag: "AMP-BODYMOVIN-ANIMATION"
714715
tag: "AMP-DATE-COUNTDOWN"
715716
tag: "AMP-DATE-DISPLAY"
716717
tag: "AMP-EXPERIMENT"

0 commit comments

Comments
 (0)