JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
var animContainer = document.getElementById('bodymovin');
var animationData = {
"assets": [],
"v": "4.3.0",
"ddd": 0,
"layers": [{
"ddd": 0,
"ind": 0,
"ty": 1,
"nm": "blob__yellow",
"ks": {
"o": {
"k": 100
},
"r": {
"k": 0
},
"p": {
"k": [540, 540, 0]
},
"a": {
"k": [540, 540, 0]
},
"s": {
"k": [{
"i": {
"x": [0.222, 0.222, 0.667],
"y": [1, 1, 0.667]
},
"o": {
"x": [0.167, 0.167, 0.167],
"y": [0.167, 0.167, 0.167]
},
"n": ["0p222_1_0p167_0p167", "0p222_1_0p167_0p167", "0p667_0p667_0p167_0p167"],
"t": 4,
"s": [0, 0, 100],
"e": [100, 100, 100]
}, {
"t": 15
}]
}
},
"hasMask": true,
"masksProperties": [{
"cl": true,
"inv": false,
"mode": "a",
"pt": {
"k": [{
"i": {
"x": 0.833,
"y": 0.833
},
"o": {
"x": 0.167,
"y": 0.167
},
"n": "0p833_0p833_0p167_0p167",
"t": 4,
"s": [{
"i": [
[26.858, -3.247],
[25.249, -14.754],
[-5.297, -33],
[-16.249, -9.037],
[-28.885, -3.379],
[-21, -2.703],
[-40.627, 14.108],
[-1.297, 12],
[7.283, 17.874],
[17.465, 10.855]
],
"o": [
[-19, 2.297],
[-25.249, 14.754],
[5.297, 33],
[14.667, 8.157],
[28.885, 3.379],
[21, 2.703],
[17.679, -6.139],
[3.22, -29.802],
[-8.734, -21.435],
[-22.887, -14.224]
],
"v": [
[476, 432.703],
[431.249, 460.246],
[379.703, 490],
[426.333, 512.843],
[462.115, 534.621],
[501, 518.297],
[551.321, 547.139],
[565.297, 516],
[575.717, 473.126],
[521.887, 477.224]
]
}],
"e": [{
"i": [
[145.748, 0],
[141.126, -140.618],
[22.297, -160],
[-7.41, -117.525],
[-128.115, -71.621],
[-127.399, 0],
[-141.321, 102.861],
[0, 194.556],
[64.283, 87.874],
[138.363, 82.457]
],
"o": [
[-214.963, 0],
[-141.795, 141.284],
[-17.361, 124.581],
[3.667, 58.158],
[116.055, 64.879],
[236.39, 0],
[145.858, -106.163],
[0, -112.43],
[-95.835, -131.005],
[-116.724, -69.561]
],
"v": [
[506, 3.703],
[219.249, 247.246],
[9.703, 488],
[92.333, 749.842],
[72.115, 1023.621],
[526, 936.297],
[953.321, 953.139],
[978.297, 592],
[1063.717, 236.126],
[768.887, 177.224]
]
}]
}, {
"i": {
"x": 0.833,
"y": 0.833
},
"o": {
"x": 0.167,
"y": 0.167
},
"n": "0p833_0p833_0p167_0p167",
"t": 21,
"s": [{
"i": [
[145.748, 0],
[141.126, -140.618],
[22.297, -160],
[-7.41, -117.525],
[-128.115, -71.621],
[-127.399, 0],
[-141.321, 102.861],
[0, 194.556],
[64.283, 87.874],
[138.363, 82.457]
],
"o": [
[-214.963, 0],
[-141.795, 141.284],
[-17.361, 124.581],
[3.667, 58.158],
[116.055, 64.879],
[236.39, 0],
[145.858, -106.163],
[0, -112.43],
[-95.835, -131.005],
[-116.724, -69.561]
],
"v": [
[506, 3.703],
[219.249, 247.246],
[9.703, 488],
[92.333, 749.842],
[72.115, 1023.621],
[526, 936.297],
[953.321, 953.139],
[978.297, 592],
[1063.717, 236.126],
[768.887, 177.224]
]
}],
"e": [{
"i": [
[281.812, 0],
[0, 0],
[0, -256],
[0, -126.158],
[0, 0],
[-271.5, 0],
[0, 0],
[0, 148.875],
[0, 156.126],
[0, 0]
],
"o": [
[-281.812, 0],
[0, 0],
[0, 256],
[0, 126.158],
[0, 0],
[271.5, 0],
[0, 0],
[0, -148.875],
[0, -156.126],
[0, 0]
],
"v": [
[501.812, 0.016],
[-0.001, -0.004],
[-0.297, 416],
[0, 845.842],
[0.115, 1079.621],
[532.5, 1080.297],
[1080.036, 1079.997],
[1080.047, 652.875],
[1079.967, 268.126],
[1080.012, -0.026]
]
}]
}, {
"t": 32
}]
},
"o": {
"k": 100
},
"x": {
"k": 0
},
"nm": "Mask 1"
}],
"sw": 1080,
"sh": 1080,
"sc": "#f4e097",
"ip": 4,
"op": 33,
"st": 4,
"bm": 0,
"sr": 1
}, {
"ddd": 0,
"ind": 1,
"ty": 1,
"nm": "blob__white",
"ks": {
"o": {
"k": 100
},
"r": {
"k": 0
},
"p": {
"k": [540, 540, 0]
},
"a": {
"k": [540, 540, 0]
},
"s": {
"k": [{
"i": {
"x": [0.222, 0.222, 0.667],
"y": [1, 1, 0.667]
},
"o": {
"x": [0.167, 0.167, 0.167],
"y": [0.167, 0.167, 0.167]
},
"n": ["0p222_1_0p167_0p167", "0p222_1_0p167_0p167", "0p667_0p667_0p167_0p167"],
"t": 0,
"s": [0, 0, 100],
"e": [100, 100, 100]
}, {
"t": 11
}]
}
},
"hasMask": true,
"masksProperties": [{
"cl": true,
"inv": false,
"mode": "a",
"pt": {
"k": [{
"i": {
"x": 0.833,
"y": 0.833
},
"o": {
"x": 0.167,
"y": 0.167
},
"n": "0p833_0p833_0p167_0p167",
"t": 0,
"s": [{
"i": [
[26.858, -3.247],
[25.249, -14.754],
[-5.297, -33],
[-16.249, -9.037],
[-28.885, -3.379],
[-21, -2.703],
[-40.627, 14.108],
[-1.297, 12],
[7.283, 17.874],
[17.465, 10.855]
],
"o": [
[-19, 2.297],
[-25.249, 14.754],
[5.297, 33],
[14.667, 8.157],
[28.885, 3.379],
[21, 2.703],
[17.679, -6.139],
[3.22, -29.802],
[-8.734, -21.435],
[-22.887, -14.224]
],
"v": [
[476, 432.703],
[431.249, 460.246],
[379.703, 490],
[426.333, 512.843],
[462.115, 534.621],
[501, 518.297],
[551.321, 547.139],
[565.297, 516],
[575.717, 473.126],
[521.887, 477.224]
]
}],
"e": [{
"i": [
[145.748, 0],
[141.126, -140.618],
[22.297, -160],
[-7.41, -117.525],
[-128.115, -71.621],
[-127.399, 0],
[-141.321, 102.861],
[0, 194.556],
[64.283, 87.874],
[138.363, 82.457]
],
"o": [
[-214.963, 0],
[-141.795, 141.284],
[-17.361, 124.581],
[3.667, 58.158],
[116.055, 64.879],
[236.39, 0],
[145.858, -106.163],
[0, -112.43],
[-95.835, -131.005],
[-116.724, -69.561]
],
"v": [
[506, 3.703],
[219.249, 247.246],
[9.703, 488],
[92.333, 749.842],
[72.115, 1023.621],
[526, 936.297],
[953.321, 953.139],
[978.297, 592],
[1063.717, 236.126],
[768.887, 177.224]
]
}]
}, {
"i": {
"x": 0.833,
"y": 0.833
},
"o": {
"x": 0.167,
"y": 0.167
},
"n": "0p833_0p833_0p167_0p167",
"t": 17,
"s": [{
"i": [
[145.748, 0],
[141.126, -140.618],
[22.297, -160],
[-7.41, -117.525],
[-128.115, -71.621],
[-127.399, 0],
[-141.321, 102.861],
[0, 194.556],
[64.283, 87.874],
[138.363, 82.457]
],
"o": [
[-214.963, 0],
[-141.795, 141.284],
[-17.361, 124.581],
[3.667, 58.158],
[116.055, 64.879],
[236.39, 0],
[145.858, -106.163],
[0, -112.43],
[-95.835, -131.005],
[-116.724, -69.561]
],
"v": [
[506, 3.703],
[219.249, 247.246],
[9.703, 488],
[92.333, 749.842],
[72.115, 1023.621],
[526, 936.297],
[953.321, 953.139],
[978.297, 592],
[1063.717, 236.126],
[768.887, 177.224]
]
}],
"e": [{
"i": [
[281.812, 0],
[0, 0],
[0, -256],
[0, -126.158],
[0, 0],
[-271.5, 0],
[0, 0],
[0, 148.875],
[0, 156.126],
[0, 0]
],
"o": [
[-281.812, 0],
[0, 0],
[0, 256],
[0, 126.158],
[0, 0],
[271.5, 0],
[0, 0],
[0, -148.875],
[0, -156.126],
[0, 0]
],
"v": [
[501.812, 0.016],
[-0.001, -0.004],
[-0.297, 416],
[0, 845.842],
[0.115, 1079.621],
[532.5, 1080.297],
[1080.036, 1079.997],
[1080.047, 652.875],
[1079.967, 268.126],
[1080.012, -0.026]
]
}]
}, {
"t": 28
}]
},
"o": {
"k": 100
},
"x": {
"k": 0
},
"nm": "Mask 1"
}],
"sw": 1080,
"sh": 1080,
"sc": "#ffffff",
"ip": 0,
"op": 33,
"st": 0,
"bm": 0,
"sr": 1
}],
"ip": 0,
"op": 33,
"fr": 60,
"w": 1080,
"h": 1080
};
var params = {
container: animContainer,
renderer: 'svg',
loop: false,
autoplay: true,
animationData: animationData,
rendererSettings: {
preserveAspectRatio: 'none'
}
};
var anim;
anim = bodymovin.loadAnimation(params);
// Close / reverse the animation
var body = document.body;
var close = document.getElementById('close');
body.classList.add("open");
// event listeners
anim.addEventListener("complete", function() {
if (anim.playDirection == -1) {
anim.setDirection(1);
anim.play();
body.classList.remove("completed");
} else {
body.classList.add("open");
body.classList.add("completed");
}
});
close.addEventListener("click", function() {
anim.setDirection(-1);
anim.play();
body.classList.remove("open");
})