@idealyst/lottie 1.2.37 → 1.2.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/examples/LottieExamples.tsx +417 -0
- package/src/examples/index.ts +1 -0
package/package.json
CHANGED
|
@@ -0,0 +1,417 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Lottie Package Examples
|
|
3
|
+
*
|
|
4
|
+
* Demonstrates the @idealyst/lottie component:
|
|
5
|
+
* - Basic Lottie animation playback
|
|
6
|
+
* - Playback controls (play, pause, stop)
|
|
7
|
+
* - Speed and direction controls
|
|
8
|
+
* - Progress control
|
|
9
|
+
* - Loop configuration
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
import React, { useState, useRef } from 'react';
|
|
13
|
+
import { Screen, View, Text, Button, Card, Slider, Divider, Switch } from '@idealyst/components';
|
|
14
|
+
import { Lottie, LottieRef } from '../index';
|
|
15
|
+
|
|
16
|
+
// Sample Lottie animation URLs (from LottieFiles)
|
|
17
|
+
const SAMPLE_ANIMATIONS = {
|
|
18
|
+
loading: 'https://assets2.lottiefiles.com/packages/lf20_p8bfn5to.json',
|
|
19
|
+
success: 'https://assets4.lottiefiles.com/packages/lf20_jbrw3hcz.json',
|
|
20
|
+
rocket: 'https://assets9.lottiefiles.com/packages/lf20_vPnn3K.json',
|
|
21
|
+
heart: 'https://assets2.lottiefiles.com/packages/lf20_k86wxpgr.json',
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
// =============================================================================
|
|
25
|
+
// Basic Lottie Demo
|
|
26
|
+
// =============================================================================
|
|
27
|
+
|
|
28
|
+
const BasicLottieDemo: React.FC = () => {
|
|
29
|
+
const [autoPlay, setAutoPlay] = useState(true);
|
|
30
|
+
const [loop, setLoop] = useState(true);
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<Card padding="md" gap="md">
|
|
34
|
+
<Text typography="h4" weight="semibold">Basic Usage</Text>
|
|
35
|
+
<Text color="secondary">
|
|
36
|
+
Simple Lottie animation with autoPlay and loop options.
|
|
37
|
+
</Text>
|
|
38
|
+
|
|
39
|
+
<View style={{ alignItems: 'center' }}>
|
|
40
|
+
<Lottie
|
|
41
|
+
source={SAMPLE_ANIMATIONS.loading}
|
|
42
|
+
autoPlay={autoPlay}
|
|
43
|
+
loop={loop}
|
|
44
|
+
style={{ width: 200, height: 200 }}
|
|
45
|
+
/>
|
|
46
|
+
</View>
|
|
47
|
+
|
|
48
|
+
<View direction="row" gap="lg" style={{ justifyContent: 'center' }}>
|
|
49
|
+
<View direction="row" gap="sm" style={{ alignItems: 'center' }}>
|
|
50
|
+
<Text typography="caption">Auto Play:</Text>
|
|
51
|
+
<Switch value={autoPlay} onValueChange={setAutoPlay} />
|
|
52
|
+
</View>
|
|
53
|
+
<View direction="row" gap="sm" style={{ alignItems: 'center' }}>
|
|
54
|
+
<Text typography="caption">Loop:</Text>
|
|
55
|
+
<Switch value={loop} onValueChange={setLoop} />
|
|
56
|
+
</View>
|
|
57
|
+
</View>
|
|
58
|
+
|
|
59
|
+
<View background="secondary" padding="sm" radius="sm">
|
|
60
|
+
<Text typography="caption" style={{ fontFamily: 'monospace' }}>
|
|
61
|
+
{`<Lottie
|
|
62
|
+
source="https://...animation.json"
|
|
63
|
+
autoPlay={${autoPlay}}
|
|
64
|
+
loop={${loop}}
|
|
65
|
+
style={{ width: 200, height: 200 }}
|
|
66
|
+
/>`}
|
|
67
|
+
</Text>
|
|
68
|
+
</View>
|
|
69
|
+
</Card>
|
|
70
|
+
);
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
// =============================================================================
|
|
74
|
+
// Playback Controls Demo
|
|
75
|
+
// =============================================================================
|
|
76
|
+
|
|
77
|
+
const PlaybackControlsDemo: React.FC = () => {
|
|
78
|
+
const lottieRef = useRef<LottieRef>(null);
|
|
79
|
+
const [isPlaying, setIsPlaying] = useState(false);
|
|
80
|
+
|
|
81
|
+
const handlePlay = () => {
|
|
82
|
+
lottieRef.current?.play();
|
|
83
|
+
setIsPlaying(true);
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
const handlePause = () => {
|
|
87
|
+
lottieRef.current?.pause();
|
|
88
|
+
setIsPlaying(false);
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
const handleStop = () => {
|
|
92
|
+
lottieRef.current?.stop();
|
|
93
|
+
setIsPlaying(false);
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
const handleReset = () => {
|
|
97
|
+
lottieRef.current?.reset();
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
return (
|
|
101
|
+
<Card padding="md" gap="md">
|
|
102
|
+
<Text typography="h4" weight="semibold">Playback Controls</Text>
|
|
103
|
+
<Text color="secondary">
|
|
104
|
+
Use ref methods to control animation playback imperatively.
|
|
105
|
+
</Text>
|
|
106
|
+
|
|
107
|
+
<View style={{ alignItems: 'center' }}>
|
|
108
|
+
<Lottie
|
|
109
|
+
ref={lottieRef}
|
|
110
|
+
source={SAMPLE_ANIMATIONS.rocket}
|
|
111
|
+
autoPlay={false}
|
|
112
|
+
loop
|
|
113
|
+
style={{ width: 200, height: 200 }}
|
|
114
|
+
onComplete={() => setIsPlaying(false)}
|
|
115
|
+
/>
|
|
116
|
+
</View>
|
|
117
|
+
|
|
118
|
+
<View direction="row" gap="sm" style={{ justifyContent: 'center', flexWrap: 'wrap' }}>
|
|
119
|
+
<Button
|
|
120
|
+
type={isPlaying ? 'outlined' : 'contained'}
|
|
121
|
+
onPress={handlePlay}
|
|
122
|
+
size="sm"
|
|
123
|
+
leftIcon="play"
|
|
124
|
+
disabled={isPlaying}
|
|
125
|
+
>
|
|
126
|
+
Play
|
|
127
|
+
</Button>
|
|
128
|
+
<Button
|
|
129
|
+
type="outlined"
|
|
130
|
+
onPress={handlePause}
|
|
131
|
+
size="sm"
|
|
132
|
+
leftIcon="pause"
|
|
133
|
+
disabled={!isPlaying}
|
|
134
|
+
>
|
|
135
|
+
Pause
|
|
136
|
+
</Button>
|
|
137
|
+
<Button
|
|
138
|
+
type="outlined"
|
|
139
|
+
onPress={handleStop}
|
|
140
|
+
size="sm"
|
|
141
|
+
leftIcon="stop"
|
|
142
|
+
>
|
|
143
|
+
Stop
|
|
144
|
+
</Button>
|
|
145
|
+
<Button
|
|
146
|
+
type="outlined"
|
|
147
|
+
onPress={handleReset}
|
|
148
|
+
size="sm"
|
|
149
|
+
leftIcon="refresh"
|
|
150
|
+
>
|
|
151
|
+
Reset
|
|
152
|
+
</Button>
|
|
153
|
+
</View>
|
|
154
|
+
|
|
155
|
+
<View background="secondary" padding="sm" radius="sm">
|
|
156
|
+
<Text typography="caption" style={{ fontFamily: 'monospace' }}>
|
|
157
|
+
{`const lottieRef = useRef<LottieRef>(null);
|
|
158
|
+
|
|
159
|
+
lottieRef.current?.play();
|
|
160
|
+
lottieRef.current?.pause();
|
|
161
|
+
lottieRef.current?.stop();
|
|
162
|
+
lottieRef.current?.reset();`}
|
|
163
|
+
</Text>
|
|
164
|
+
</View>
|
|
165
|
+
</Card>
|
|
166
|
+
);
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
// =============================================================================
|
|
170
|
+
// Speed & Direction Demo
|
|
171
|
+
// =============================================================================
|
|
172
|
+
|
|
173
|
+
const SpeedDirectionDemo: React.FC = () => {
|
|
174
|
+
const lottieRef = useRef<LottieRef>(null);
|
|
175
|
+
const [speed, setSpeed] = useState(1);
|
|
176
|
+
const [direction, setDirection] = useState<1 | -1>(1);
|
|
177
|
+
|
|
178
|
+
const handleSpeedChange = (value: number) => {
|
|
179
|
+
setSpeed(value);
|
|
180
|
+
lottieRef.current?.setSpeed(value);
|
|
181
|
+
};
|
|
182
|
+
|
|
183
|
+
const handleDirectionToggle = () => {
|
|
184
|
+
const newDirection = direction === 1 ? -1 : 1;
|
|
185
|
+
setDirection(newDirection);
|
|
186
|
+
lottieRef.current?.setDirection(newDirection);
|
|
187
|
+
};
|
|
188
|
+
|
|
189
|
+
return (
|
|
190
|
+
<Card padding="md" gap="md">
|
|
191
|
+
<Text typography="h4" weight="semibold">Speed & Direction</Text>
|
|
192
|
+
<Text color="secondary">
|
|
193
|
+
Control playback speed and direction dynamically.
|
|
194
|
+
</Text>
|
|
195
|
+
|
|
196
|
+
<View style={{ alignItems: 'center' }}>
|
|
197
|
+
<Lottie
|
|
198
|
+
ref={lottieRef}
|
|
199
|
+
source={SAMPLE_ANIMATIONS.heart}
|
|
200
|
+
autoPlay
|
|
201
|
+
loop
|
|
202
|
+
speed={speed}
|
|
203
|
+
style={{ width: 150, height: 150 }}
|
|
204
|
+
/>
|
|
205
|
+
</View>
|
|
206
|
+
|
|
207
|
+
<View gap="sm">
|
|
208
|
+
<View direction="row" gap="sm" style={{ alignItems: 'center' }}>
|
|
209
|
+
<Text typography="caption" style={{ width: 60 }}>Speed:</Text>
|
|
210
|
+
<View style={{ flex: 1 }}>
|
|
211
|
+
<Slider
|
|
212
|
+
value={speed}
|
|
213
|
+
onValueChange={handleSpeedChange}
|
|
214
|
+
minimumValue={0.25}
|
|
215
|
+
maximumValue={3}
|
|
216
|
+
step={0.25}
|
|
217
|
+
/>
|
|
218
|
+
</View>
|
|
219
|
+
<Text typography="caption" style={{ width: 40 }}>{speed}x</Text>
|
|
220
|
+
</View>
|
|
221
|
+
</View>
|
|
222
|
+
|
|
223
|
+
<View direction="row" gap="sm" style={{ justifyContent: 'center' }}>
|
|
224
|
+
<Button type="outlined" size="sm" onPress={() => handleSpeedChange(0.5)}>0.5x</Button>
|
|
225
|
+
<Button type="outlined" size="sm" onPress={() => handleSpeedChange(1)}>1x</Button>
|
|
226
|
+
<Button type="outlined" size="sm" onPress={() => handleSpeedChange(2)}>2x</Button>
|
|
227
|
+
<Button
|
|
228
|
+
type={direction === -1 ? 'contained' : 'outlined'}
|
|
229
|
+
size="sm"
|
|
230
|
+
onPress={handleDirectionToggle}
|
|
231
|
+
leftIcon={direction === 1 ? 'arrow-right' : 'arrow-left'}
|
|
232
|
+
>
|
|
233
|
+
{direction === 1 ? 'Forward' : 'Reverse'}
|
|
234
|
+
</Button>
|
|
235
|
+
</View>
|
|
236
|
+
|
|
237
|
+
<View background="secondary" padding="sm" radius="sm">
|
|
238
|
+
<Text typography="caption" style={{ fontFamily: 'monospace' }}>
|
|
239
|
+
{`lottieRef.current?.setSpeed(${speed});
|
|
240
|
+
lottieRef.current?.setDirection(${direction});`}
|
|
241
|
+
</Text>
|
|
242
|
+
</View>
|
|
243
|
+
</Card>
|
|
244
|
+
);
|
|
245
|
+
};
|
|
246
|
+
|
|
247
|
+
// =============================================================================
|
|
248
|
+
// Progress Control Demo
|
|
249
|
+
// =============================================================================
|
|
250
|
+
|
|
251
|
+
const ProgressControlDemo: React.FC = () => {
|
|
252
|
+
const lottieRef = useRef<LottieRef>(null);
|
|
253
|
+
const [progress, setProgress] = useState(0);
|
|
254
|
+
|
|
255
|
+
const handleProgressChange = (value: number) => {
|
|
256
|
+
setProgress(value);
|
|
257
|
+
lottieRef.current?.setProgress(value);
|
|
258
|
+
};
|
|
259
|
+
|
|
260
|
+
return (
|
|
261
|
+
<Card padding="md" gap="md">
|
|
262
|
+
<Text typography="h4" weight="semibold">Progress Control</Text>
|
|
263
|
+
<Text color="secondary">
|
|
264
|
+
Scrub through the animation manually using progress (0-1).
|
|
265
|
+
</Text>
|
|
266
|
+
|
|
267
|
+
<View style={{ alignItems: 'center' }}>
|
|
268
|
+
<Lottie
|
|
269
|
+
ref={lottieRef}
|
|
270
|
+
source={SAMPLE_ANIMATIONS.success}
|
|
271
|
+
autoPlay={false}
|
|
272
|
+
loop={false}
|
|
273
|
+
progress={progress}
|
|
274
|
+
style={{ width: 200, height: 200 }}
|
|
275
|
+
/>
|
|
276
|
+
</View>
|
|
277
|
+
|
|
278
|
+
<View gap="sm">
|
|
279
|
+
<View direction="row" gap="sm" style={{ alignItems: 'center' }}>
|
|
280
|
+
<Text typography="caption" style={{ width: 70 }}>Progress:</Text>
|
|
281
|
+
<View style={{ flex: 1 }}>
|
|
282
|
+
<Slider
|
|
283
|
+
value={progress}
|
|
284
|
+
onValueChange={handleProgressChange}
|
|
285
|
+
minimumValue={0}
|
|
286
|
+
maximumValue={1}
|
|
287
|
+
step={0.01}
|
|
288
|
+
/>
|
|
289
|
+
</View>
|
|
290
|
+
<Text typography="caption" style={{ width: 50 }}>{Math.round(progress * 100)}%</Text>
|
|
291
|
+
</View>
|
|
292
|
+
</View>
|
|
293
|
+
|
|
294
|
+
<View direction="row" gap="sm" style={{ justifyContent: 'center' }}>
|
|
295
|
+
<Button type="outlined" size="sm" onPress={() => handleProgressChange(0)}>0%</Button>
|
|
296
|
+
<Button type="outlined" size="sm" onPress={() => handleProgressChange(0.25)}>25%</Button>
|
|
297
|
+
<Button type="outlined" size="sm" onPress={() => handleProgressChange(0.5)}>50%</Button>
|
|
298
|
+
<Button type="outlined" size="sm" onPress={() => handleProgressChange(0.75)}>75%</Button>
|
|
299
|
+
<Button type="outlined" size="sm" onPress={() => handleProgressChange(1)}>100%</Button>
|
|
300
|
+
</View>
|
|
301
|
+
|
|
302
|
+
<View background="secondary" padding="sm" radius="sm">
|
|
303
|
+
<Text typography="caption" style={{ fontFamily: 'monospace' }}>
|
|
304
|
+
{`// Set progress directly (0-1)
|
|
305
|
+
lottieRef.current?.setProgress(${progress.toFixed(2)});
|
|
306
|
+
|
|
307
|
+
// Or go to specific frame
|
|
308
|
+
lottieRef.current?.goToAndStop(30);`}
|
|
309
|
+
</Text>
|
|
310
|
+
</View>
|
|
311
|
+
</Card>
|
|
312
|
+
);
|
|
313
|
+
};
|
|
314
|
+
|
|
315
|
+
// =============================================================================
|
|
316
|
+
// Multiple Animations Demo
|
|
317
|
+
// =============================================================================
|
|
318
|
+
|
|
319
|
+
const MultipleAnimationsDemo: React.FC = () => {
|
|
320
|
+
return (
|
|
321
|
+
<Card padding="md" gap="md">
|
|
322
|
+
<Text typography="h4" weight="semibold">Multiple Animations</Text>
|
|
323
|
+
<Text color="secondary">
|
|
324
|
+
Display multiple Lottie animations with different configurations.
|
|
325
|
+
</Text>
|
|
326
|
+
|
|
327
|
+
<View direction="row" gap="md" style={{ justifyContent: 'center', flexWrap: 'wrap' }}>
|
|
328
|
+
<View style={{ alignItems: 'center' }}>
|
|
329
|
+
<Lottie
|
|
330
|
+
source={SAMPLE_ANIMATIONS.loading}
|
|
331
|
+
autoPlay
|
|
332
|
+
loop
|
|
333
|
+
style={{ width: 80, height: 80 }}
|
|
334
|
+
/>
|
|
335
|
+
<Text typography="caption" color="secondary">Loading</Text>
|
|
336
|
+
</View>
|
|
337
|
+
|
|
338
|
+
<View style={{ alignItems: 'center' }}>
|
|
339
|
+
<Lottie
|
|
340
|
+
source={SAMPLE_ANIMATIONS.success}
|
|
341
|
+
autoPlay
|
|
342
|
+
loop
|
|
343
|
+
style={{ width: 80, height: 80 }}
|
|
344
|
+
/>
|
|
345
|
+
<Text typography="caption" color="secondary">Success</Text>
|
|
346
|
+
</View>
|
|
347
|
+
|
|
348
|
+
<View style={{ alignItems: 'center' }}>
|
|
349
|
+
<Lottie
|
|
350
|
+
source={SAMPLE_ANIMATIONS.heart}
|
|
351
|
+
autoPlay
|
|
352
|
+
loop
|
|
353
|
+
speed={0.5}
|
|
354
|
+
style={{ width: 80, height: 80 }}
|
|
355
|
+
/>
|
|
356
|
+
<Text typography="caption" color="secondary">Heart (0.5x)</Text>
|
|
357
|
+
</View>
|
|
358
|
+
|
|
359
|
+
<View style={{ alignItems: 'center' }}>
|
|
360
|
+
<Lottie
|
|
361
|
+
source={SAMPLE_ANIMATIONS.rocket}
|
|
362
|
+
autoPlay
|
|
363
|
+
loop
|
|
364
|
+
speed={2}
|
|
365
|
+
style={{ width: 80, height: 80 }}
|
|
366
|
+
/>
|
|
367
|
+
<Text typography="caption" color="secondary">Rocket (2x)</Text>
|
|
368
|
+
</View>
|
|
369
|
+
</View>
|
|
370
|
+
</Card>
|
|
371
|
+
);
|
|
372
|
+
};
|
|
373
|
+
|
|
374
|
+
// =============================================================================
|
|
375
|
+
// Main Screen
|
|
376
|
+
// =============================================================================
|
|
377
|
+
|
|
378
|
+
export const LottieExamples: React.FC = () => {
|
|
379
|
+
return (
|
|
380
|
+
<Screen background="primary" padding="lg" scrollable>
|
|
381
|
+
<View gap="lg">
|
|
382
|
+
<Text typography="h2" weight="bold" align="center">
|
|
383
|
+
Lottie Examples
|
|
384
|
+
</Text>
|
|
385
|
+
<Text color="secondary" align="center">
|
|
386
|
+
Cross-platform Lottie animations for React and React Native
|
|
387
|
+
</Text>
|
|
388
|
+
|
|
389
|
+
<Divider />
|
|
390
|
+
|
|
391
|
+
<BasicLottieDemo />
|
|
392
|
+
<PlaybackControlsDemo />
|
|
393
|
+
<SpeedDirectionDemo />
|
|
394
|
+
<ProgressControlDemo />
|
|
395
|
+
<MultipleAnimationsDemo />
|
|
396
|
+
|
|
397
|
+
<Card type="elevated" padding="md" gap="sm">
|
|
398
|
+
<Text weight="semibold">About @idealyst/lottie</Text>
|
|
399
|
+
<Text color="secondary">
|
|
400
|
+
Render Adobe After Effects animations exported as JSON using the Bodymovin plugin.
|
|
401
|
+
Uses lottie-web on web and lottie-react-native on native platforms.
|
|
402
|
+
</Text>
|
|
403
|
+
<View gap="xs">
|
|
404
|
+
<Text typography="caption" weight="semibold">Ref Methods:</Text>
|
|
405
|
+
<Text typography="caption" color="secondary">• play(), pause(), stop(), reset()</Text>
|
|
406
|
+
<Text typography="caption" color="secondary">• setProgress(0-1), goToAndStop(frame)</Text>
|
|
407
|
+
<Text typography="caption" color="secondary">• setSpeed(multiplier), setDirection(1|-1)</Text>
|
|
408
|
+
<Text typography="caption" color="secondary">• playSegments(start, end)</Text>
|
|
409
|
+
<Text typography="caption" color="secondary">• getCurrentFrame(), getTotalFrames(), getDuration()</Text>
|
|
410
|
+
</View>
|
|
411
|
+
</Card>
|
|
412
|
+
</View>
|
|
413
|
+
</Screen>
|
|
414
|
+
);
|
|
415
|
+
};
|
|
416
|
+
|
|
417
|
+
export default LottieExamples;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { LottieExamples } from './LottieExamples';
|