Skip to content

Commit a7f3d36

Browse files
author
victorsun
committed
upd: lottie动画特效
1 parent 1642dd8 commit a7f3d36

File tree

5 files changed

+381
-0
lines changed

5 files changed

+381
-0
lines changed

‎21-js探索/lottie动画demo/index.html

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Lottie</title>
8+
<style>
9+
#lottie {
10+
width: 300px;
11+
background-color: rgb(236, 165, 165);
12+
}
13+
</style>
14+
15+
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.0/lottie.min.js" type="text/javascript"></script> -->
16+
<script src="lottie.min.js"></script>
17+
</head>
18+
<body>
19+
<div id="lottie"></div>
20+
21+
<button onclick="play()">play</button>
22+
<button onclick="pause()">pause</button>
23+
<button onclick="stop()">stop</button>
24+
<button onclick="destroy()">destroy</button>
25+
<button onclick="setSpeed()">setSpeed</button>
26+
27+
<script>
28+
var lottie = bodymovin.loadAnimation({
29+
container: document.getElementById('lottie'), // Required
30+
path: './lottie/data2.json', // Required
31+
renderer: 'canvas', // Required svg/canvas/html
32+
loop: true, // Optional
33+
autoplay: true, // Optional
34+
});
35+
36+
/**
37+
* 事件监听 on
38+
*/
39+
// onComplete、onLoopComplete、onEnterFrame、onSegmentStart
40+
lottie.onComplete = () => {
41+
console.log("onComplete...");
42+
}
43+
lottie.onLoopComplete = function () {
44+
console.log("onLoopComplete...");
45+
}
46+
47+
/**
48+
* 事件监听 addEventListener
49+
*/
50+
// complete、loopComplete、enterFrame、segmentStart、destroy
51+
// config_ready (when initial config is done)
52+
// data_ready (when all parts of the animation have been loaded)
53+
// DOMLoaded (when elements have been added to the DOM)
54+
lottie.addEventListener("data_ready", () => {
55+
console.log("data_ready...");
56+
});
57+
lottie.addEventListener("DOMLoaded", () => {
58+
console.log("DOMLoaded...");
59+
});
60+
61+
/**
62+
* 常用方法
63+
*/
64+
window.onresize = () => {
65+
console.log("onresize... ");
66+
lottie.resize();
67+
}
68+
function play () {
69+
console.log("getDuration: " + lottie.getDuration());
70+
lottie.play();
71+
}
72+
function pause () {
73+
lottie.pause();
74+
}
75+
function stop () {
76+
lottie.stop();
77+
}
78+
function destroy () {
79+
lottie.destroy();
80+
}
81+
function setSpeed () {
82+
lottie.setSpeed(10);
83+
}
84+
</script>
85+
</body>
86+
</html>

‎21-js探索/lottie动画demo/lottie.min.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎21-js探索/lottie动画demo/lottie/data.json

+292
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,292 @@
1+
{
2+
"v": "5.7.8",
3+
"fr": 29.9700012207031,
4+
"ip": 0,
5+
"op": 38.0000015477717,
6+
"w": 128,
7+
"h": 128,
8+
"nm": "合成 1",
9+
"ddd": 0,
10+
"assets": [],
11+
"layers": [
12+
{
13+
"ddd": 0,
14+
"ind": 1,
15+
"ty": 4,
16+
"nm": "形状图层 1",
17+
"sr": 1,
18+
"ks": {
19+
"o": {
20+
"a": 0,
21+
"k": 100,
22+
"ix": 11
23+
},
24+
"r": {
25+
"a": 0,
26+
"k": 0,
27+
"ix": 10
28+
},
29+
"p": {
30+
"a": 0,
31+
"k": [
32+
69,
33+
60,
34+
0
35+
],
36+
"ix": 2,
37+
"l": 2
38+
},
39+
"a": {
40+
"a": 0,
41+
"k": [
42+
0,
43+
0,
44+
0
45+
],
46+
"ix": 1,
47+
"l": 2
48+
},
49+
"s": {
50+
"a": 0,
51+
"k": [
52+
100,
53+
100,
54+
100
55+
],
56+
"ix": 6,
57+
"l": 2
58+
}
59+
},
60+
"ao": 0,
61+
"shapes": [
62+
{
63+
"ty": "gr",
64+
"it": [
65+
{
66+
"d": 1,
67+
"ty": "el",
68+
"s": {
69+
"a": 1,
70+
"k": [
71+
{
72+
"i": {
73+
"x": [
74+
0.667,
75+
0.667
76+
],
77+
"y": [
78+
1,
79+
1
80+
]
81+
},
82+
"o": {
83+
"x": [
84+
0.333,
85+
0.333
86+
],
87+
"y": [
88+
0,
89+
0
90+
]
91+
},
92+
"t": 0,
93+
"s": [
94+
0,
95+
0
96+
]
97+
},
98+
{
99+
"i": {
100+
"x": [
101+
0.667,
102+
0.667
103+
],
104+
"y": [
105+
1,
106+
1
107+
]
108+
},
109+
"o": {
110+
"x": [
111+
0.333,
112+
0.333
113+
],
114+
"y": [
115+
0,
116+
0
117+
]
118+
},
119+
"t": 22,
120+
"s": [
121+
37,
122+
37
123+
]
124+
},
125+
{
126+
"i": {
127+
"x": [
128+
0.667,
129+
0.667
130+
],
131+
"y": [
132+
1,
133+
1
134+
]
135+
},
136+
"o": {
137+
"x": [
138+
0.333,
139+
0.333
140+
],
141+
"y": [
142+
0,
143+
0
144+
]
145+
},
146+
"t": 30,
147+
"s": [
148+
29.6,
149+
29.6
150+
]
151+
},
152+
{
153+
"t": 36.0000014663101,
154+
"s": [
155+
36.3,
156+
36.3
157+
]
158+
}
159+
],
160+
"ix": 2
161+
},
162+
"p": {
163+
"a": 0,
164+
"k": [
165+
0,
166+
0
167+
],
168+
"ix": 3
169+
},
170+
"nm": "椭圆路径 1",
171+
"mn": "ADBE Vector Shape - Ellipse",
172+
"hd": false
173+
},
174+
{
175+
"ty": "st",
176+
"c": {
177+
"a": 0,
178+
"k": [
179+
1,
180+
1,
181+
1,
182+
1
183+
],
184+
"ix": 3
185+
},
186+
"o": {
187+
"a": 0,
188+
"k": 100,
189+
"ix": 4
190+
},
191+
"w": {
192+
"a": 0,
193+
"k": 2,
194+
"ix": 5
195+
},
196+
"lc": 1,
197+
"lj": 1,
198+
"ml": 4,
199+
"bm": 0,
200+
"nm": "描边 1",
201+
"mn": "ADBE Vector Graphic - Stroke",
202+
"hd": false
203+
},
204+
{
205+
"ty": "fl",
206+
"c": {
207+
"a": 0,
208+
"k": [
209+
1,
210+
0,
211+
0,
212+
1
213+
],
214+
"ix": 4
215+
},
216+
"o": {
217+
"a": 0,
218+
"k": 100,
219+
"ix": 5
220+
},
221+
"r": 1,
222+
"bm": 0,
223+
"nm": "填充 1",
224+
"mn": "ADBE Vector Graphic - Fill",
225+
"hd": false
226+
},
227+
{
228+
"ty": "tr",
229+
"p": {
230+
"a": 0,
231+
"k": [
232+
-3.5,
233+
2
234+
],
235+
"ix": 2
236+
},
237+
"a": {
238+
"a": 0,
239+
"k": [
240+
0,
241+
0
242+
],
243+
"ix": 1
244+
},
245+
"s": {
246+
"a": 0,
247+
"k": [
248+
100,
249+
100
250+
],
251+
"ix": 3
252+
},
253+
"r": {
254+
"a": 0,
255+
"k": 0,
256+
"ix": 6
257+
},
258+
"o": {
259+
"a": 0,
260+
"k": 100,
261+
"ix": 7
262+
},
263+
"sk": {
264+
"a": 0,
265+
"k": 0,
266+
"ix": 4
267+
},
268+
"sa": {
269+
"a": 0,
270+
"k": 0,
271+
"ix": 5
272+
},
273+
"nm": "变换"
274+
}
275+
],
276+
"nm": "椭圆 1",
277+
"np": 3,
278+
"cix": 2,
279+
"bm": 0,
280+
"ix": 1,
281+
"mn": "ADBE Vector Group",
282+
"hd": false
283+
}
284+
],
285+
"ip": 0,
286+
"op": 14924.000607867,
287+
"st": 0,
288+
"bm": 0
289+
}
290+
],
291+
"markers": []
292+
}

‎21-js探索/lottie动画demo/lottie/data2.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"v":"5.6.10","fr":25,"ip":0,"op":74,"w":1920,"h":1080,"nm":"合成 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"形状图层 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[960,540,0],"to":[115.667,-0.333,0],"ti":[-115.667,0.333,0]},{"t":74,"s":[1654,538,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[685.688,388.594],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"矩形路径 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"描边 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-239.156,-153.703],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"矩形 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":750,"st":0,"bm":0}],"markers":[]}

‎21-js探索/lottie动画demo/lottie/test.lottie

+1
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)