1 package com.airbnb.lottie.sample.compose.examples
2
3 import androidx.compose.foundation.clickable
4 import androidx.compose.foundation.layout.Box
5 import androidx.compose.foundation.layout.Column
6 import androidx.compose.foundation.layout.fillMaxWidth
7 import androidx.compose.foundation.layout.height
8 import androidx.compose.foundation.rememberScrollState
9 import androidx.compose.foundation.verticalScroll
10 import androidx.compose.material.Text
11 import androidx.compose.runtime.Composable
12 import androidx.compose.runtime.getValue
13 import androidx.compose.runtime.mutableStateOf
14 import androidx.compose.runtime.remember
15 import androidx.compose.runtime.setValue
16 import androidx.compose.ui.Modifier
17 import androidx.compose.ui.tooling.preview.Preview
18 import androidx.compose.ui.unit.dp
19 import com.airbnb.lottie.compose.LottieAnimation
20 import com.airbnb.lottie.compose.LottieClipSpec
21 import com.airbnb.lottie.compose.LottieCompositionSpec
22 import com.airbnb.lottie.compose.LottieConstants
23 import com.airbnb.lottie.compose.animateLottieCompositionAsState
24 import com.airbnb.lottie.compose.rememberLottieComposition
25 import com.airbnb.lottie.sample.compose.R
26
27 @Composable
BasicUsageExamplesPagenull28 fun BasicUsageExamplesPage() {
29 UsageExamplePageScaffold {
30 Column(
31 modifier = Modifier
32 .fillMaxWidth()
33 .verticalScroll(rememberScrollState())
34 ) {
35 Box(modifier = Modifier.height(16.dp))
36 ExampleCard("Example 1", "Repeat once") {
37 Example1()
38 }
39 ExampleCard("Example 2", "Repeat forever") {
40 Example2()
41 }
42 ExampleCard("Example 3", "Repeat forever from 50% to 75%") {
43 Example3()
44 }
45 ExampleCard("Example 4", "Using LottieAnimationResult") {
46 Example4()
47 }
48 ExampleCard("Example 5", "Using LottieComposition") {
49 Example5()
50 }
51 ExampleCard("Example 6", "Splitting out the animation driver") {
52 Example6()
53 }
54 ExampleCard("Example 7", "Toggle on click - click me") {
55 Example7()
56 }
57 }
58 }
59 }
60
61 /**
62 * Nice and easy... This will play one time as soon as the composition loads
63 * then it will stop.
64 */
65 @Composable
Example1null66 private fun Example1() {
67 val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
68 LottieAnimation(composition)
69 }
70
71 /**
72 * This will repeat forever.
73 */
74 @Composable
Example2null75 private fun Example2() {
76 val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
77 LottieAnimation(
78 composition,
79 iterations = LottieConstants.IterateForever,
80 )
81 }
82
83 /**
84 * This will repeat between 50% and 75% forever.
85 */
86 @Composable
Example3null87 private fun Example3() {
88 val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
89 LottieAnimation(
90 composition,
91 iterations = LottieConstants.IterateForever,
92 clipSpec = LottieClipSpec.Progress(0.5f, 0.75f),
93 )
94 }
95
96 /**
97 * Here, you can check the result for loading/failure states.
98 */
99 @Composable
Example4null100 private fun Example4() {
101 val compositionResult = rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
102 when {
103 compositionResult.isLoading -> {
104 Text("Animation is loading...")
105 }
106 compositionResult.isFailure -> {
107 Text("Animation failed to load")
108 }
109 compositionResult.isSuccess -> {
110 LottieAnimation(
111 compositionResult.value,
112 iterations = LottieConstants.IterateForever,
113 )
114 }
115 }
116 }
117
118 /**
119 * If you just want access to the composition itself, you can use the delegate
120 * version of lottieComposition like this.
121 */
122 @Composable
Example5null123 private fun Example5() {
124 val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
125 LottieAnimation(
126 composition,
127 progress = { 0.65f },
128 )
129 }
130
131 /**
132 * Here, you have access to the composition and animation individually.
133 */
134 @Composable
Example6null135 private fun Example6() {
136 val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
137 val progress by animateLottieCompositionAsState(
138 composition,
139 iterations = LottieConstants.IterateForever,
140 )
141 LottieAnimation(
142 composition,
143 { progress },
144 )
145 }
146
147 /**
148 * Here, you can toggle playback by clicking the animation.
149 */
150 @Composable
Example7null151 private fun Example7() {
152 val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
153 var isPlaying by remember { mutableStateOf(false) }
154 LottieAnimation(
155 composition,
156 iterations = LottieConstants.IterateForever,
157 // When this is true, it it will start from 0 every time it is played again.
158 // When this is false, it will resume from the progress it was pause at.
159 restartOnPlay = false,
160 isPlaying = isPlaying,
161 modifier = Modifier
162 .clickable { isPlaying = !isPlaying }
163 )
164 }
165
166 @Preview
167 @Composable
ExampleCardPreviewnull168 fun ExampleCardPreview() {
169 val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
170 ExampleCard("Example 1", "Heart animation") {
171 LottieAnimation(composition)
172 }
173 }