[Compose] Key dynamic properties based on composition (#2290)

Fixes #2273

lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimation.kt

@@ -86,7 +86,7 @@ fun LottieAnimation(
 ) {
     val drawable = remember { LottieDrawable() }
     val matrix = remember { Matrix() }
-    var setDynamicProperties: LottieDynamicProperties? by remember { mutableStateOf(null) }
+    var setDynamicProperties: LottieDynamicProperties? by remember(composition) { mutableStateOf(null) }
 
     if (composition == null || composition.duration == 0f) return Box(modifier)
 

snapshot-tests/src/androidTest/java/com/airbnb/lottie/snapshots/tests/ComposeDynamicPropertiesTestCase.kt

@@ -5,10 +5,15 @@ import android.graphics.BitmapFactory
 import android.graphics.Color
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import com.airbnb.lottie.LottieCompositionFactory
 import com.airbnb.lottie.LottieProperty
 import com.airbnb.lottie.compose.LottieAnimation
 import com.airbnb.lottie.compose.LottieCompositionSpec
+import com.airbnb.lottie.compose.LottieConstants
+import com.airbnb.lottie.compose.animateLottieCompositionAsState
 import com.airbnb.lottie.compose.rememberLottieComposition
 import com.airbnb.lottie.compose.rememberLottieDynamicProperties
 import com.airbnb.lottie.compose.rememberLottieDynamicProperty
@@ -80,10 +85,31 @@ class ComposeDynamicPropertiesTestCase : SnapshotTestCase {
             )
             LottieAnimation(heartComposition, { 0f }, dynamicProperties = dynamicProperties, maintainOriginalImageBounds = true)
         }
+
+        snapshotComposable("Compose switch composition") {
+            val snapshotReady = LocalSnapshotReady.current
+            var state by remember { mutableStateOf(1) }
+            val composition by rememberLottieComposition(LottieCompositionSpec.Asset(if (state == 1) "Tests/Dynamic1.json" else "Tests/Dynamic2.json"))
+            val progress by animateLottieCompositionAsState(composition, iterations = LottieConstants.IterateForever)
+            val dynamicProperties = rememberLottieDynamicProperties(
+                rememberLottieDynamicProperty(LottieProperty.COLOR, 0x0000FF, "**", "Fill 1")
+            )
+            val ready = state == 2 && composition != null
+            LaunchedEffect(ready) {
+                snapshotReady.value = ready
+            }
+            if (composition != null && state == 1) {
+                state = 2
+            }
+            LottieAnimation(
+                composition,
+                { progress },
+                dynamicProperties = dynamicProperties
+            )
+        }
     }
 
     private fun SnapshotTestCaseContext.getBitmapFromAssets(name: String): Bitmap {
-        @Suppress("BlockingMethodInNonBlockingContext")
         return BitmapFactory.decodeStream(context.assets.open(name), null, BitmapFactory.Options())!!
     }
 }

snapshot-tests/src/main/assets/Tests/Dynamic1.json

@@ -0,0 +1 @@
+{"v":"5.10.2","fr":60,"ip":0,"op":60,"w":256,"h":256,"nm":"Comp 2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Rectangle Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[128,128,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[152.781,152.781],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","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":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-4.953,-2.969],"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":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"ct":1,"bm":0}],"markers":[]}

snapshot-tests/src/main/assets/Tests/Dynamic2.json

@@ -0,0 +1 @@
+{"v":"5.10.2","fr":60,"ip":0,"op":60,"w":256,"h":256,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Polystar Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[128,128,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":5,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":128.082,"ix":5},"ir":{"a":0,"k":44.187,"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":88.374,"ix":7},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","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":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-4.953,-2.969],"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":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"ct":1,"bm":0}],"markers":[]}