feat: 🎸 canvas size calculation (#22)

Caclulates the canvas size for the composable component based on display size set by user BREAKING CHANGE: 🧨 compose.ui.DotLottieAnimation -> width/height
LottieFiles · Mar 27, 2024 · 6412611 · 6412611
1 parent 6234c4e
commit 6412611
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 34 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/README.md b/README.md
@@ -86,8 +86,6 @@ import com.lottiefiles.dotlottie.core.util.DotLottieSource
 
 fun ExampleComposeComponent() {
     DotLottieAnimation(
-        width = 500u,
-        height = 500u,
         source = DotLottieSource.Url("https://lottiefiles-mobile-templates.s3.amazonaws.com/ar-stickers/swag_sticker_piggy.lottie"), // from url .lottie / .json
 //        source = DotLottieSource.Asset("file.json"), // from asset .lottie / .json
 //        source = DotLottieSource.Json("{"v":"4.8.0","meta":{"g":"LottieFiles .........."), // lottie json string

diff --git a/dotlottie/build.gradle.kts b/dotlottie/build.gradle.kts
@@ -5,7 +5,7 @@ plugins {
 }
 
 group = "com.github.LottieFiles"
-version = "0.1.8"
+version = "0.2.0"
 
 android {
     namespace = "com.lottiefiles.dotlottie.core"

diff --git a/dotlottie/src/main/java/com/lottiefiles/dotlottie/core/compose/ui/DotLottieAnimation.kt b/dotlottie/src/main/java/com/lottiefiles/dotlottie/core/compose/ui/DotLottieAnimation.kt
@@ -4,6 +4,7 @@ import android.graphics.Bitmap
 import android.view.Choreographer
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
@@ -14,8 +15,12 @@ import androidx.compose.ui.platform.LocalContext
 import com.dotlottie.dlplayer.Mode
 import com.lottiefiles.dotlottie.core.util.DotLottieUtils
 import androidx.compose.runtime.*
+import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.asImageBitmap
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.toSize
 import com.dotlottie.dlplayer.DotLottiePlayer
 import com.dotlottie.dlplayer.Layout
 import com.dotlottie.dlplayer.createDefaultLayout
@@ -33,8 +38,6 @@ import java.nio.ByteBuffer
 @Composable
 fun DotLottieAnimation(
     modifier: Modifier = Modifier,
-    width: UInt,
-    height: UInt,
     source: DotLottieSource,
     autoplay: Boolean = false,
     loop: Boolean = false,
@@ -78,6 +81,7 @@ fun DotLottieAnimation(
     val isRunning by rController.isRunning.collectAsState()
     val _width by rController.height.collectAsState()
     val _height by rController.width.collectAsState()
+    var layoutSize by remember { mutableStateOf<Size?>(null) }
 
     val frameCallback = remember {
         object : Choreographer.FrameCallback {
@@ -104,8 +108,18 @@ fun DotLottieAnimation(
         }
     }
 
-    LaunchedEffect(dlConfig, source) {
+    LaunchedEffect(dlConfig, source, layoutSize?.height, layoutSize?.width) {
+        if (layoutSize == null || layoutSize?.height == 0.0f || layoutSize?.width == 0.0f) return@LaunchedEffect
+
         try {
+            val height = layoutSize!!.height.toUInt()
+            val width = layoutSize!!.width.toUInt()
+
+            // Register initial height/width to controller
+            if (!dlPlayer.isLoaded()) {
+                rController.resize(width, height)
+            }
+
             when (val animationData = DotLottieUtils.getContent(context, source)) {
                 is DotLottieContent.Json -> {
                     dlPlayer.loadAnimationData(animationData.jsonString, width, height)
@@ -115,10 +129,6 @@ fun DotLottieAnimation(
                     dlPlayer.loadDotlottieData(animationData.data, width, height)
                 }
             }
-            // Register initial height/width to controller
-            if (!dlPlayer.isLoaded()) {
-                rController.resize(width, height)
-            }
 
             // Set local and native buffer
             nativeBuffer = Pointer(dlPlayer.bufferPtr().toLong())
@@ -187,10 +197,6 @@ fun DotLottieAnimation(
         choreographer.postFrameCallback(frameCallback)
     }
 
-    LaunchedEffect(width, height) {
-        rController.resize(width, height)
-    }
-
     LaunchedEffect(_width, _height) {
         if (dlPlayer.isLoaded() && (_height != 0u || _width != 0u)) {
             bitmap?.recycle()
@@ -214,9 +220,20 @@ fun DotLottieAnimation(
         }
     }
 
-    Box() {
+
+    Box(
+        modifier = modifier
+            .defaultMinSize(200.dp, 200.dp)
+            .onGloballyPositioned { layoutCoordinates ->
+                layoutSize = layoutCoordinates.size.toSize()
+            }
+    ) {
         imageBitmap?.let {
-            Image(bitmap = it, contentDescription = null, modifier = modifier)
+            Image(
+                bitmap = it,
+                contentDescription = null,
+                modifier = Modifier.matchParentSize()
+            )
         }
     }
 }
diff --git a/sample-compose/src/main/java/com/lottiefiles/example/MainActivity.kt b/sample-compose/src/main/java/com/lottiefiles/example/MainActivity.kt
@@ -10,8 +10,11 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
@@ -124,16 +127,16 @@ fun DefaultAnimationDemo() {
                 Row {
                     repeat(1) { // Example: Repeat 3 times
                         DotLottieAnimation(
-                            height = 600u,
-                            width = 600u,
                             autoplay = true,
                             loop = true,
                             eventListeners = listOf(events),
 //                                        source = DotLottieSource.Url("https://lottiefiles-mobile-templates.s3.amazonaws.com/ar-stickers/swag_sticker_piggy.lottie"),
                             source = DotLottieSource.Url("https://lottie.host/5525262b-4e57-4f0a-8103-cfdaa7c8969e/VCYIkooYX8.json"),
 //                                        source = DotLottieSource.Url("https://lottie.host/294b684d-d6b4-4116-ab35-85ef566d4379/VkGHcqcMUI.lottie"),
 //                                        source = DotLottieSource.Asset("swinging.json"),
-                            modifier = Modifier.background(Color.LightGray),
+                            modifier = Modifier
+                                .background(Color.LightGray)
+                                .size(200.dp),
                             controller = dotLottieController
                         )
                     }
@@ -273,7 +276,7 @@ fun DefaultAnimationDemo() {
             }
             Row(modifier = Modifier.padding(2.dp), verticalAlignment = Alignment.CenterVertically) {
                 Button(onClick = {
-                    dotLottieController.resize(550u, 550u)
+                    dotLottieController.resize(50u, 50u)
                 }) {
                     Text(text = "Resize")
                 }
@@ -322,8 +325,7 @@ fun AnimationWithReactiveProps() {
     val currentFrame = remember { mutableFloatStateOf(0f) }
     val speed = remember { mutableFloatStateOf(1f) }
     val useFrameInterpolation = remember { mutableStateOf(true) }
-    val width = remember { mutableStateOf(500u) }
-    val height = remember { mutableStateOf(500u) }
+    val size = remember { mutableStateOf(200.dp) }
     val source =
         remember { mutableStateOf("https://lottie.host/5525262b-4e57-4f0a-8103-cfdaa7c8969e/VCYIkooYX8.json") }
     val segments = remember { mutableStateOf<Pair<Float, Float>?>(null) }
@@ -335,8 +337,6 @@ fun AnimationWithReactiveProps() {
     ) {
         Row {
             DotLottieAnimation(
-                width = width.value,
-                height = height.value,
                 source = DotLottieSource.Url(source.value),
                 autoplay = autoplay.value,
                 useFrameInterpolation = useFrameInterpolation.value,
@@ -347,7 +347,8 @@ fun AnimationWithReactiveProps() {
                     override fun onFrame(frame: Float) {
                         currentFrame.floatValue = frame
                     }
-                })
+                }),
+                modifier = Modifier.size(size.value)
             )
         }
         Row {
@@ -381,8 +382,7 @@ fun AnimationWithReactiveProps() {
                 }
 
                 Button(onClick = {
-                    width.value += 50u
-                    height.value += 50u
+                    size.value += 50.dp
                 }) {
                     Text(text = "Resize")
                 }
@@ -425,8 +425,6 @@ fun MarkerExample() {
     ) {
         Row {
             DotLottieAnimation(
-                width = 500u,
-                height = 500u,
                 source = DotLottieSource.Asset("markers.json"),
                 autoplay = true,
                 marker = marker.value,
@@ -470,8 +468,6 @@ fun ThemeExample() {
     ) {
         Row {
             DotLottieAnimation(
-                width = 500u,
-                height = 500u,
                 source = DotLottieSource.Asset("theming_example.lottie"),
                 autoplay = true,
                 themeId = theme.value,
@@ -504,13 +500,14 @@ fun LayoutExample() {
     ) {
         Row {
             DotLottieAnimation(
-                width = 1000u,
-                height = 500u,
                 source = DotLottieSource.Url("https://lottie.host/5525262b-4e57-4f0a-8103-cfdaa7c8969e/VCYIkooYX8.json"),
                 autoplay = true,
                 loop = true,
                 layout = LayoutUtil.createLayout(fit.value, alignment.value.alignment),
-                modifier = Modifier.background(Color.LightGray),
+                modifier = Modifier
+                    .background(Color.LightGray)
+                    .fillMaxWidth()
+                    .aspectRatio(1.6f),
                 controller = controller,
             )
         }