-
Notifications
You must be signed in to change notification settings - Fork 3.9k
/
bodymovinanimation.js
92 lines (83 loc) · 2.63 KB
/
bodymovinanimation.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import {setStyles} from '#core/dom/style';
import {tryPlay} from '#core/dom/video';
import {parseJson} from '#core/types/object/json';
import {getData} from '#utils/event-helper';
import {loadScript} from './3p';
const libSourceUrl = {
'canvas':
'https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.6/lottie_canvas.min.js',
'html':
'https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.6/lottie_html.min.js',
'svg':
'https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.6/lottie_svg.min.js',
};
/**
* Produces the AirBnB Bodymovin Player SDK object for the passed in callback.
* @param {!Window} global
* @param {function(!Object)} cb
*/
let animationHandler;
/**
* @param {!Window} global
* @param {string} renderer
* @param {!Function} cb
*/
function getBodymovinAnimationSdk(global, renderer, cb) {
const scriptToLoad = libSourceUrl[renderer] ?? libSourceUrl['svg'];
loadScript(global, scriptToLoad, function () {
cb(global.bodymovin);
});
}
/**
* @param {!Event} event
*/
function parseMessage(event) {
const eventMessage = parseJson(getData(event));
const action = eventMessage['action'];
if (action == 'play') {
tryPlay(animationHandler);
} else if (action == 'pause') {
animationHandler.pause();
} else if (action == 'stop') {
animationHandler.stop();
} else if (action == 'seekTo') {
if (eventMessage['valueType'] === 'time') {
animationHandler.goToAndStop(eventMessage['value']);
} else {
const frameNumber = Math.round(
eventMessage['value'] * animationHandler.totalFrames
);
animationHandler.goToAndStop(frameNumber, true);
}
}
}
/**
* @param {!Window} global
*/
export function bodymovinanimation(global) {
const dataReceived = parseJson(global.name)['attributes']._context;
const dataLoop = dataReceived['loop'];
const animatingContainer = global.document.createElement('div');
setStyles(animatingContainer, {
width: '100%',
height: '100%',
});
global.document.getElementById('c').appendChild(animatingContainer);
const shouldLoop = dataLoop != 'false';
const loop = !isNaN(dataLoop) ? dataLoop : shouldLoop;
const renderer = dataReceived['renderer'];
getBodymovinAnimationSdk(global, renderer, function (bodymovin) {
animationHandler = bodymovin.loadAnimation({
container: animatingContainer,
renderer,
loop,
autoplay: dataReceived['autoplay'],
animationData: dataReceived['animationData'],
});
const message = JSON.stringify({
'action': 'ready',
});
global.addEventListener('message', parseMessage, false);
global.parent./*OK*/ postMessage(message, '*');
});
}