Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

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

Lines changed: 86 additions & 0 deletions
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

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Lines changed: 292 additions & 0 deletions
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+
}
Lines changed: 1 addition & 0 deletions
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

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /