Update Compose API docs (#2082)

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 5.2.0
+### Bugs Fixed
+* De-dupe gradient stops. On pre-Oreo devices, if you had color and opacity stops in the same place and used hardware acceleration, you may have seen artifacts at the stop positions as of 5.1.1 [#20814](https://github.com/airbnb/lottie-android/pull/2081)
+
 # 5.1.1
 ### New Features
 * Added support for gradient opacity stops at different points than color stops ([#2062](https://github.com/airbnb/lottie-android/pull/2062))

CHANGELOG_COMPOSE.md

@@ -1,3 +1,26 @@
+# 5.2.0
+* [BREAKING CHANGE]
+LottieAnimation now takes progress as a `() -> Float` rather than a `Float`. This allows Lottie to redraw without triggering a recomposition every time progress updates. For more information, refer to the Compose [phase docs](https://developer.android.com/jetpack/compose/phases). The existing API will exist as deprecated for one more release but will then be removed. For the vast majority of use cases:
+
+```kotlin
+LottieAnimation(composition, progress)
+```
+will become:
+
+```kotlin
+LottieAnimation(composition, { progress })
+```
+
+or
+
+```kotlin
+LottieAnimation(
+  composition = composition,
+  progress = { progress }
+)
+```
+[#2078](https://github.com/airbnb/lottie-android/pull/2078).
+
 # 5.1.1
 * Add support for completable animations in tests ([#2051](https://github.com/airbnb/lottie-android/pull/2051))
 

build.gradle

@@ -2,13 +2,13 @@ import org.ajoberstar.grgit.Grgit
 
 buildscript {
   ext {
-    coroutinesVersion = '1.5.2'
+    coroutinesVersion = '1.6.2'
     coreVersion = '1.6.0'
     appcompatVersion = '1.3.1'
     activityVersion = '1.3.1'
     lifecycleVersion = '2.3.1'
-    composeVersion = '1.0.3'
-    kotlinVersion = '1.5.30'
+    composeVersion = '1.1.1'
+    kotlinVersion = '1.6.10'
     daggerVersion = '2.38.1'
     awsVersion = '2.8.3'
     mockitoVersion = '3.12.4'

issue-repro-compose/src/main/java/com/airbnb/lottie/issues/compose/ComposeIssueReproActivity.kt

@@ -7,6 +7,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 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
 
@@ -21,7 +22,7 @@ class ComposeIssueReproActivity : AppCompatActivity() {
     @Composable
     fun Content() {
         val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
-        val progress by animateLottieCompositionAsState(composition)
+        val progress by animateLottieCompositionAsState(composition, iterations = LottieConstants.IterateForever)
         LottieAnimation(composition, { progress })
     }
 }

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

@@ -32,7 +32,7 @@ import kotlin.math.roundToInt
  *
  * @param composition The composition that will be rendered. To generate a [LottieComposition], you can use
  *                    [rememberLottieComposition].
- * @param progressProvider A provider for the progress (between 0 and 1) that should be rendered. If you want to render a
+ * @param progress A provider for the progress (between 0 and 1) that should be rendered. If you want to render a
  *                         specific frame, you can use [LottieComposition.getFrameForProgress]. In most cases, you will want
  *                         to use one of the overloaded LottieAnimation composables that drives the animation for you.
  *                         The overloads that have isPlaying as a parameter instead of progress will drive the
@@ -69,7 +69,7 @@ import kotlin.math.roundToInt
 @Composable
 fun LottieAnimation(
     composition: LottieComposition?,
-    progressProvider: () -> Float,
+    progress: () -> Float,
     modifier: Modifier = Modifier,
     outlineMasksAndMattes: Boolean = false,
     applyOpacityToLayers: Boolean = false,
@@ -114,7 +114,7 @@ fun LottieAnimation(
             drawable.isApplyingOpacityToLayersEnabled = applyOpacityToLayers
             drawable.maintainOriginalImageBounds = maintainOriginalImageBounds
             drawable.clipToCompositionBounds = clipToCompositionBounds
-            drawable.progress = progressProvider()
+            drawable.progress = progress()
             drawable.setBounds(0, 0, composition.bounds.width(), composition.bounds.height())
             drawable.draw(canvas.nativeCanvas, matrix)
         }
@@ -127,6 +127,7 @@ fun LottieAnimation(
  * @see LottieAnimation
  */
 @Composable
+@Deprecated("Pass progress as a lambda instead of a float. This overload will be removed in the next release.")
 fun LottieAnimation(
     composition: LottieComposition?,
     @FloatRange(from = 0.0, to = 1.0) progress: Float,
@@ -192,18 +193,18 @@ fun LottieAnimation(
         iterations,
     )
     LottieAnimation(
-        composition,
-        { progress },
-        modifier,
-        outlineMasksAndMattes,
-        applyOpacityToLayers,
-        enableMergePaths,
-        renderMode,
-        maintainOriginalImageBounds,
-        dynamicProperties,
-        alignment,
-        contentScale,
-        clipToCompositionBounds,
+        composition = composition,
+        progress = { progress },
+        modifier = modifier,
+        outlineMasksAndMattes = outlineMasksAndMattes,
+        applyOpacityToLayers = applyOpacityToLayers,
+        enableMergePaths = enableMergePaths,
+        renderMode = renderMode,
+        maintainOriginalImageBounds = maintainOriginalImageBounds,
+        dynamicProperties = dynamicProperties,
+        alignment = alignment,
+        contentScale = contentScale,
+        clipToCompositionBounds = clipToCompositionBounds,
     )
 }
 

sample-compose/src/androidTest/java/com/airbnb/lottie/samples/InfiniteAnimationTest.kt

@@ -36,7 +36,7 @@ class InfiniteAnimationTest {
             ) {
                 LottieAnimation(
                     composition,
-                    progress,
+                    { progress },
                 )
                 Text(
                     "Composition Loaded!",

sample-compose/src/androidTest/java/com/airbnb/lottie/samples/WalkthroughAnimationTest.kt

@@ -32,7 +32,7 @@ class WalkthroughAnimationTest {
             ) {
                 LottieAnimation(
                     composition,
-                    progress,
+                    { progress },
                 )
             }
 

sample-compose/src/main/java/com/airbnb/lottie/sample/compose/examples/BasicUsageExamplesPage.kt

@@ -124,7 +124,7 @@ private fun Example5() {
     val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
     LottieAnimation(
         composition,
-        progress = 0.65f,
+        progress = { 0.65f },
     )
 }
 

sample-compose/src/main/java/com/airbnb/lottie/sample/compose/examples/ContentScaleExamplesPage.kt

@@ -61,7 +61,7 @@ fun ContentScaleExamplesPage() {
             ) {
                 LottieAnimation(
                     composition,
-                    progress = 0f,
+                    progress = { 0f },
                     alignment = alignment,
                     contentScale = contentScale,
                 )

sample-compose/src/main/java/com/airbnb/lottie/sample/compose/examples/TextExamplesPage.kt

@@ -51,7 +51,7 @@ private fun Example1() {
     val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.name))
     LottieAnimation(
         composition,
-        progress = 0f,
+        progress = { 0f },
     )
 }
 
@@ -65,7 +65,7 @@ private fun Example2() {
 
     LottieAnimation(
         composition,
-        progress = 0f,
+        progress = { 0f },
         dynamicProperties = dynamicProperties,
     )
 }

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

@@ -13,7 +13,10 @@ import android.widget.ImageView
 import android.widget.LinearLayout
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.platform.ComposeView
 import com.airbnb.lottie.FontAssetDelegate
 import com.airbnb.lottie.LottieAnimationView
@@ -189,7 +192,12 @@ suspend fun SnapshotTestCaseContext.snapshotComposable(
         CompositionLocalProvider(LocalSnapshotReady provides readyFlow) {
             content(RenderMode.SOFTWARE)
         }
-        if (readyFlow.value == null) readyFlow.value = true
+        val readyFlowValue by readyFlow.collectAsState()
+        LaunchedEffect(readyFlowValue) {
+            if (readyFlowValue == null) {
+                readyFlow.value = true
+            }
+        }
     }
     onActivity { activity ->
         activity.binding.content.addView(composeView)
@@ -211,7 +219,12 @@ suspend fun SnapshotTestCaseContext.snapshotComposable(
             CompositionLocalProvider(LocalSnapshotReady provides readyFlow) {
                 content(RenderMode.HARDWARE)
             }
-            if (readyFlow.value == null) readyFlow.value = true
+            val readyFlowValue by readyFlow.collectAsState()
+            LaunchedEffect(readyFlowValue) {
+                if (readyFlowValue == null) {
+                    readyFlow.value = true
+                }
+            }
         }
         readyFlow.first { it == true }
         composeView.awaitFrame()

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

@@ -27,7 +27,7 @@ class ClipChildrenTestCase : SnapshotTestCase {
             ) {
                 LottieAnimation(
                     composition,
-                    0.7f,
+                    { 0.7f },
                     contentScale = ContentScale.Crop,
                     renderMode = renderMode,
                     modifier = Modifier
@@ -44,7 +44,7 @@ class ClipChildrenTestCase : SnapshotTestCase {
             ) {
                 LottieAnimation(
                     composition,
-                    0.7f,
+                    { 0.7f },
                     contentScale = ContentScale.Crop,
                     renderMode = renderMode,
                     clipToCompositionBounds = false,

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

@@ -3,6 +3,7 @@ package com.airbnb.lottie.snapshots.tests
 import android.graphics.Bitmap
 import android.graphics.BitmapFactory
 import android.graphics.Color
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import com.airbnb.lottie.LottieCompositionFactory
 import com.airbnb.lottie.LottieProperty
@@ -36,45 +37,48 @@ class ComposeDynamicPropertiesTestCase : SnapshotTestCase {
                     "Gradient Fill"
                 )
             )
-            LottieAnimation(composition, 0f, dynamicProperties = dynamicProperties)
+            LottieAnimation(composition, { 0f }, dynamicProperties = dynamicProperties)
         }
 
         val heartComposition = LottieCompositionFactory.fromAssetSync(context, "Tests/Heart.json").value!!
         snapshotComposable("Compose Dynamic Image", "Default") {
             val composition by rememberLottieComposition(LottieCompositionSpec.Asset("Tests/Heart.json"))
-            LocalSnapshotReady.current.value = composition != null
-            LottieAnimation(composition, 0f)
+            val snapshotReady = LocalSnapshotReady.current
+            LaunchedEffect(snapshotReady, composition != null) {
+                snapshotReady.value = composition != null
+            }
+            LottieAnimation(composition, { 0f })
         }
         snapshotComposable("Compose Dynamic Image", "Default - Maintain Original Bounds") {
-            LottieAnimation(heartComposition, 0f, maintainOriginalImageBounds = true)
+            LottieAnimation(heartComposition, { 0f }, maintainOriginalImageBounds = true)
         }
         snapshotComposable("Compose Dynamic Image", "Smaller") {
             val bitmap = getBitmapFromAssets("Images/Heart-80.png")
             val dynamicProperties = rememberLottieDynamicProperties(
                 rememberLottieDynamicProperty(LottieProperty.IMAGE, bitmap, "Heart"),
             )
-            LottieAnimation(heartComposition, 0f, dynamicProperties = dynamicProperties)
+            LottieAnimation(heartComposition, { 0f }, dynamicProperties = dynamicProperties)
         }
         snapshotComposable("Compose Dynamic Image", "Smaller - Maintain Original Bounds") {
             val bitmap = getBitmapFromAssets("Images/Heart-80.png")
             val dynamicProperties = rememberLottieDynamicProperties(
                 rememberLottieDynamicProperty(LottieProperty.IMAGE, bitmap, "Heart"),
             )
-            LottieAnimation(heartComposition, 0f, dynamicProperties = dynamicProperties, maintainOriginalImageBounds = true)
+            LottieAnimation(heartComposition, { 0f }, dynamicProperties = dynamicProperties, maintainOriginalImageBounds = true)
         }
         snapshotComposable("Compose Dynamic Image", "Larger") {
             val bitmap = getBitmapFromAssets("Images/Heart-1200.png")
             val dynamicProperties = rememberLottieDynamicProperties(
                 rememberLottieDynamicProperty(LottieProperty.IMAGE, bitmap, "Heart"),
             )
-            LottieAnimation(heartComposition, 0f, dynamicProperties = dynamicProperties)
+            LottieAnimation(heartComposition, { 0f }, dynamicProperties = dynamicProperties)
         }
         snapshotComposable("Compose Dynamic Image", "Larger - Maintain Original Bounds") {
             val bitmap = getBitmapFromAssets("Images/Heart-1200.png")
             val dynamicProperties = rememberLottieDynamicProperties(
                 rememberLottieDynamicProperty(LottieProperty.IMAGE, bitmap, "Heart"),
             )
-            LottieAnimation(heartComposition, 0f, dynamicProperties = dynamicProperties, maintainOriginalImageBounds = true)
+            LottieAnimation(heartComposition, { 0f }, dynamicProperties = dynamicProperties, maintainOriginalImageBounds = true)
         }
     }