<lambda>null1 package com.airbnb.lottie.sample.compose.examples
2
3 import android.graphics.PointF
4 import androidx.compose.foundation.clickable
5 import androidx.compose.foundation.interaction.MutableInteractionSource
6 import androidx.compose.foundation.layout.Column
7 import androidx.compose.foundation.layout.fillMaxWidth
8 import androidx.compose.foundation.rememberScrollState
9 import androidx.compose.foundation.verticalScroll
10 import androidx.compose.runtime.Composable
11 import androidx.compose.runtime.derivedStateOf
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.graphics.Color
18 import androidx.compose.ui.graphics.toArgb
19 import androidx.compose.ui.platform.LocalDensity
20 import androidx.compose.ui.unit.dp
21 import com.airbnb.lottie.LottieProperty
22 import com.airbnb.lottie.compose.LottieAnimation
23 import com.airbnb.lottie.compose.LottieCompositionSpec
24 import com.airbnb.lottie.compose.LottieConstants
25 import com.airbnb.lottie.compose.rememberLottieComposition
26 import com.airbnb.lottie.compose.rememberLottieDynamicProperties
27 import com.airbnb.lottie.compose.rememberLottieDynamicProperty
28 import com.airbnb.lottie.sample.compose.R
29
30 @Composable
31 fun DynamicPropertiesExamplesPage() {
32 UsageExamplePageScaffold {
33 Column(
34 modifier = Modifier
35 .fillMaxWidth()
36 .verticalScroll(rememberScrollState())
37 ) {
38 ExampleCard("Heart Color + Blur", "Click to change color") {
39 HeartColor()
40 }
41 ExampleCard("Change Properties", "Click to toggle whether the dynamic property is used") {
42 ToggleProperty()
43 }
44 ExampleCard("Jump Height", "Click to jump height") {
45 JumpHeight()
46 }
47 }
48 }
49 }
50
51 @Composable
HeartColornull52 private fun HeartColor() {
53 val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
54 val colors = remember {
55 listOf(
56 Color.Red,
57 Color.Green,
58 Color.Blue,
59 Color.Yellow,
60 )
61 }
62 var colorIndex by remember { mutableStateOf(0) }
63 val color by remember { derivedStateOf { colors[colorIndex] } }
64 val blurRadius = with(LocalDensity.current) { 12.dp.toPx() }
65
66 val dynamicProperties = rememberLottieDynamicProperties(
67 rememberLottieDynamicProperty(
68 property = LottieProperty.COLOR,
69 value = color.toArgb(),
70 keyPath = arrayOf(
71 "H2",
72 "Shape 1",
73 "Fill 1",
74 )
75 ),
76 rememberLottieDynamicProperty(
77 property = LottieProperty.BLUR_RADIUS,
78 value = blurRadius,
79 keyPath = arrayOf(
80 "**",
81 "Stroke 1",
82 )
83 ),
84 )
85 LottieAnimation(
86 composition,
87 iterations = LottieConstants.IterateForever,
88 dynamicProperties = dynamicProperties,
89 modifier = Modifier
90 .clickable(
91 interactionSource = remember { MutableInteractionSource() },
92 indication = null,
93 onClick = { colorIndex = (colorIndex + 1) % colors.size },
94 )
95 )
96 }
97
98 @Composable
JumpHeightnull99 private fun JumpHeight() {
100 val composition by rememberLottieComposition(LottieCompositionSpec.Asset("AndroidWave.json"))
101 val extraJumpHeights = remember { listOf(0.dp, 24.dp, 48.dp, 128.dp) }
102 var extraJumpIndex by remember { mutableStateOf(0) }
103 val extraJumpHeight by remember { derivedStateOf { extraJumpHeights[extraJumpIndex] } }
104 val extraJumpHeightPx = with(LocalDensity.current) { extraJumpHeight.toPx() }
105
106 val point = remember { PointF() }
107 val dynamicProperties = rememberLottieDynamicProperties(
108 rememberLottieDynamicProperty(LottieProperty.TRANSFORM_POSITION, "Body") { frameInfo ->
109 var startY = frameInfo.startValue.y
110 var endY = frameInfo.endValue.y
111 when {
112 startY > endY -> startY += extraJumpHeightPx
113 else -> endY += extraJumpHeightPx
114 }
115 point.set(frameInfo.startValue.x, lerp(startY, endY, frameInfo.interpolatedKeyframeProgress))
116 point
117 }
118 )
119 LottieAnimation(
120 composition,
121 iterations = LottieConstants.IterateForever,
122 dynamicProperties = dynamicProperties,
123 modifier = Modifier
124 .clickable(
125 interactionSource = remember { MutableInteractionSource() },
126 indication = null,
127 onClick = { extraJumpIndex = (extraJumpIndex + 1) % extraJumpHeights.size },
128 )
129 )
130 }
131
132 @Composable
TogglePropertynull133 private fun ToggleProperty() {
134 val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
135 var useDynamicProperty by remember { mutableStateOf(true) }
136 val dynamicProperties = rememberLottieDynamicProperties(
137 rememberLottieDynamicProperty(
138 property = LottieProperty.COLOR,
139 value = Color.Green.toArgb(),
140 keyPath = arrayOf(
141 "H2",
142 "Shape 1",
143 "Fill 1",
144 )
145 ),
146 )
147 LottieAnimation(
148 composition,
149 iterations = LottieConstants.IterateForever,
150 dynamicProperties = dynamicProperties.takeIf { useDynamicProperty },
151 modifier = Modifier
152 .clickable(
153 interactionSource = remember { MutableInteractionSource() },
154 indication = null,
155 onClick = { useDynamicProperty = !useDynamicProperty },
156 )
157 )
158 }
159
lerpnull160 private fun lerp(valueA: Float, valueB: Float, progress: Float): Float {
161 val smallerY = minOf(valueA, valueB)
162 val largerY = maxOf(valueA, valueB)
163 return smallerY + progress * (largerY - smallerY)
164 }
165