[Compose] Added more functionality to the player and sample (#1670)

Added apply opacity to layers, outline masks and mattes, and enabled merge paths by default. Also fixed some bugs in the sample app and added the ability load a file from a url.
airbnb · Nov 9, 2020 · c5261b8 · c5261b8
1 parent 348b604
commit c5261b8
Show file tree

Hide file tree

Showing 15 changed files with 220 additions and 87 deletions.
diff --git a/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimation.kt b/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimation.kt
@@ -84,7 +84,11 @@ fun LottieAnimation(
     state: LottieAnimationState,
     modifier: Modifier = Modifier
 ) {
-    val drawable = remember { LottieDrawable() }
+    val drawable = remember {
+        LottieDrawable().apply {
+            enableMergePathsForKitKatAndAbove(true)
+        }
+    }
     val isStarted by isStarted()
     val isPlaying = state.isPlaying && isStarted
 
@@ -121,6 +125,8 @@ fun LottieAnimation(
 
     if (composition == null || composition.duration == 0f) return
     drawable.progress = state.progress
+    drawable.setOutlineMasksAndMattes(state.outlineMasksAndMattes)
+    drawable.isApplyingOpacityToLayersEnabled = state.applyOpacityToLayers
 
     Canvas(
         modifier = Modifier

diff --git a/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimationState.kt b/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimationState.kt
@@ -35,6 +35,27 @@ class LottieAnimationState(
 
     var speed by mutableStateOf(1f)
 
+    /**
+     * Enable this to debug slow animations by outlining masks and mattes. The performance overhead of the masks and mattes will
+     * be proportional to the surface area of all of the masks/mattes combined.
+     * <p>
+     * DO NOT leave this enabled in production.
+     */
+    var outlineMasksAndMattes by mutableStateOf(false)
+
+
+    /**
+     * Sets whether to apply opacity to the each layer instead of shape.
+     * <p>
+     * Opacity is normally applied directly to a shape. In cases where translucent shapes overlap, applying opacity to a layer will be more accurate
+     * at the expense of performance.
+     * <p>
+     * The default value is false.
+     * <p>
+     * Note: This process is very expensive and will incur additional performance overhead.
+     */
+    var applyOpacityToLayers by mutableStateOf(false)
+
     internal fun updateFrame(frame: Int) {
         _frame.value = frame
     }

diff --git a/lottie/src/main/java/com/airbnb/lottie/LottieDrawable.java b/lottie/src/main/java/com/airbnb/lottie/LottieDrawable.java
@@ -257,7 +257,10 @@ public void setPerformanceTrackingEnabled(boolean enabled) {
    *
    * DO NOT leave this enabled in production.
    */
-  void setOutlineMasksAndMattes(boolean outline) {
+  public void setOutlineMasksAndMattes(boolean outline) {
+    if (outlineMasksAndMattes == outline) {
+      return;
+    }
     outlineMasksAndMattes = outline;
     if (compositionLayer != null) {
       compositionLayer.setOutlineMasksAndMattes(outline);

diff --git a/sample-compose/build.gradle b/sample-compose/build.gradle
@@ -14,7 +14,7 @@ android {
     minSdkVersion 21
     targetSdkVersion 30
     versionCode 1
-    versionName "1.0"
+    versionName VERSION_NAME
 
     testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
   }

diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/ComposeActivity.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/ComposeActivity.kt
@@ -37,6 +37,7 @@ import com.airbnb.lottie.sample.compose.ui.LottieTheme
 import com.airbnb.lottie.sample.compose.ui.Teal
 import com.airbnb.lottie.sample.compose.ui.toColorSafe
 import com.airbnb.lottie.sample.compose.utils.NavControllerAmbient
+import com.airbnb.lottie.sample.compose.utils.drawTopBorder
 import com.airbnb.lottie.sample.compose.utils.getBase64String
 
 class ComposeActivity : AppCompatActivity() {
@@ -96,12 +97,12 @@ class ComposeActivity : AppCompatActivity() {
                             ) { entry ->
                                 val arguments = entry.arguments ?: error("No arguments provided to ${Route.Player}")
                                 val spec = when {
-                                    arguments.containsKey("url") -> LottieAnimationSpec.Url(arguments.getBase64String("url") ?: error("url must be a string"))
-                                    arguments.containsKey("file") -> LottieAnimationSpec.File(arguments.getBase64String("file") ?: error("file must be a string"))
-                                    arguments.containsKey("asset") -> LottieAnimationSpec.Asset(arguments.getBase64String("asset") ?: error("asset must be a string"))
+                                    arguments.getString("url") != null -> LottieAnimationSpec.Url(arguments.getBase64String("url"))
+                                    arguments.getString("file") != null -> LottieAnimationSpec.File(arguments.getBase64String("file"))
+                                    arguments.getString("asset") != null -> LottieAnimationSpec.Asset(arguments.getBase64String("asset"))
                                     else -> error("You must specify a url, file, or asset")
                                 }
-                                val backgroundColor = when (arguments.containsKey("backgroundColor")) {
+                                val backgroundColor = when (arguments.getString("backgroundColor") != null) {
                                     true -> arguments.getBase64String("backgroundColor").toColorSafe()
                                     else -> null
                                 }

diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/Route.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/Route.kt
@@ -37,14 +37,14 @@ sealed class Route(val route: String, val args: List<NamedNavArgument> = emptyLi
     ) {
         val fullRoute = "$route?url={url}&file={file}&asset={asset}&backgroundColor={backgroundColor}"
 
-        fun forUrl(url: String, backgroundColor: String?) = when (backgroundColor) {
+        fun forUrl(url: String, backgroundColor: String? = null) = when (backgroundColor) {
             null -> "${route}?url=${url.toBase64()}"
             else -> "${route}?url=${url.toBase64()}&backgroundColor=${backgroundColor.toBase64()}"
         }
 
-        fun forFile(file: String) = "${route}?file=$file"
+        fun forFile(file: String) = "${route}?file=${file.toBase64()}"
 
-        fun forAsset(asset: String) = "${route}?asset=$asset"
+        fun forAsset(asset: String) = "${route}?asset=${asset.toBase64()}"
     }
 }
 

diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/AnimationRow.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/AnimationRow.kt
@@ -32,7 +32,7 @@ fun AnimationRow(
         Row(
             verticalAlignment = Alignment.CenterVertically,
             modifier = Modifier
-                .padding(8.dp)
+                .padding(16.dp)
                 .fillMaxWidth()
         ) {
             CoilImage(

diff --git a/...mpose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesSearchPage.kt b/...mpose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesSearchPage.kt
@@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumnForIndexed
 import androidx.compose.material.FloatingActionButton
 import androidx.compose.material.Icon
+import androidx.compose.material.OutlinedTextField
 import androidx.compose.material.Surface
 import androidx.compose.material.TextField
 import androidx.compose.material.icons.Icons
@@ -18,9 +19,11 @@ import androidx.compose.runtime.onActive
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.navigation.compose.navigate
 import androidx.ui.tooling.preview.Preview
+import com.airbnb.lottie.sample.compose.R
 import com.airbnb.lottie.sample.compose.Route
 import com.airbnb.lottie.sample.compose.api.AnimationDataV2
 import com.airbnb.lottie.sample.compose.api.LottieFilesApi
@@ -38,7 +41,7 @@ import kotlinx.coroutines.Job
 import kotlinx.coroutines.launch
 
 data class LottieFilesSearchState(
-    val query: String = "Loading",
+    val query: String = "",
     val results: List<AnimationDataV2> = emptyList(),
     val currentPage: Int = 1,
     val lastPage: Int = 0,
@@ -125,7 +128,7 @@ fun LottieFilesSearchPage() {
 @Composable
 fun LottieFilesSearchPage(
     state: LottieFilesSearchState,
-    setQuery: (String) -> Unit,
+    onQueryChanged: (String) -> Unit,
     fetchNextPage: () -> Unit,
     onAnimationClicked: (AnimationDataV2) -> Unit,
     modifier: Modifier = Modifier,
@@ -134,11 +137,11 @@ fun LottieFilesSearchPage(
         Column(
             modifier = Modifier.then(modifier)
         ) {
-            TextField(
+            OutlinedTextField(
                 value = state.query,
-                onValueChange = { query -> setQuery(query) },
-                label = { Text("Query") },
-                modifier = Modifier.fillMaxWidth().padding(horizontal = 24.dp)
+                onValueChange = onQueryChanged,
+                label = { Text(stringResource(R.string.query)) },
+                modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp)
             )
             LazyColumnForIndexed(
                 state.results,
@@ -182,7 +185,7 @@ fun previewSearchPage() {
     Surface(color = Color.White) {
         LottieFilesSearchPage(
             state = state,
-            setQuery = {},
+            onQueryChanged = {},
             fetchNextPage = {},
             onAnimationClicked = {}
         )