Skip to content

Commit

Permalink
Attempt to use aspect ratio
Browse files Browse the repository at this point in the history
  • Loading branch information
@gpeal
gpeal committed Dec 29, 2023
1 parent a855905 commit dd50341
Show file tree
Hide file tree
Showing 3 changed files with 259 additions and 4 deletions.
10 changes: 7 additions & 3 deletions lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimation.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import android.graphics.Typeface
import androidx.annotation.FloatRange
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
Expand Down Expand Up @@ -96,12 +98,14 @@ fun LottieAnimation(
if (composition == null || composition.duration == 0f) return Box(modifier)

val dpScale = Utils.dpScale()
val bounds = composition.bounds
Canvas(
modifier = modifier
.size((composition.bounds.width() / dpScale).dp, (composition.bounds.height() / dpScale).dp)
.width((bounds.width() / dpScale).dp)
.aspectRatio(bounds.width() / bounds.height().toFloat())
) {
drawIntoCanvas { canvas ->
val compositionSize = Size(composition.bounds.width().toFloat(), composition.bounds.height().toFloat())
val compositionSize = Size(bounds.width().toFloat(), bounds.height().toFloat())
val intSize = IntSize(size.width.roundToInt(), size.height.roundToInt())

val scale = contentScale.computeScaleFactor(compositionSize, size)
Expand All @@ -125,7 +129,7 @@ fun LottieAnimation(
drawable.maintainOriginalImageBounds = maintainOriginalImageBounds
drawable.clipToCompositionBounds = clipToCompositionBounds
drawable.progress = progress()
drawable.setBounds(0, 0, composition.bounds.width(), composition.bounds.height())
drawable.setBounds(0, 0, bounds.width(), bounds.height())
drawable.draw(canvas.nativeCanvas, matrix)
}
}
Expand Down
31 changes: 30 additions & 1 deletion ...tests/src/androidTest/java/com/airbnb/lottie/snapshots/tests/ComposeScaleTypesTestCase.kt
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,22 @@
package com.airbnb.lottie.snapshots.tests

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.material.Text
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.scale
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
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.snapshots.R
import com.airbnb.lottie.snapshots.SnapshotTestCase
import com.airbnb.lottie.snapshots.SnapshotTestCaseContext
import com.airbnb.lottie.snapshots.loadCompositionFromAssetsSync
Expand Down Expand Up @@ -154,5 +165,23 @@ class ComposeScaleTypesTestCase : SnapshotTestCase {
.size(300.dp, 600.dp)
)
}

val largeSquareComposition = loadCompositionFromAssetsSync("Tests/LargeSquare.json")
snapshotComposable("Compose fill max width", "Large square", renderHardwareAndSoftware = true) { renderMode ->
Column(verticalArrangement = Arrangement.spacedBy(24.dp)) {
LottieAnimation(
composition = largeSquareComposition,
progress = { 1f },
contentScale = ContentScale.FillWidth,
renderMode = renderMode,
modifier = Modifier.fillMaxWidth()
)
Text(
modifier = Modifier.fillMaxWidth(),
text = "Other content",
textAlign = TextAlign.Center,
)
}
}
}
}
}
222 changes: 222 additions & 0 deletions snapshot-tests/src/main/assets/Tests/LargeSquare.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,222 @@
{
"v": "5.9.1",
"fr": 25,
"ip": 0,
"op": 75,
"w": 1200,
"h": 1200,
"nm": "square",
"ddd": 0,
"assets": [],
"layers": [
{
"ddd": 0,
"ind": 15,
"ty": 4,
"nm": "Fond Silhouettes",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [
600,
600,
0
],
"ix": 2,
"l": 2
},
"a": {
"a": 0,
"k": [
600,
600,
0
],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [
100,
100,
100
],
"ix": 6,
"l": 2
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
]
],
"o": [
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
]
],
"v": [
[
-600,
600
],
[
600,
600
],
[
600,
-600
],
[
-600,
-600
]
],
"c": true
},
"ix": 2
},
"nm": "Tracé 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "fl",
"c": {
"a": 0,
"k": [
0.561497886508,
0.699996708889,
0.56712066052,
1
],
"ix": 4
},
"o": {
"a": 0,
"k": 100,
"ix": 5
},
"r": 1,
"bm": 0,
"nm": "Fond 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
},
{
"ty": "tr",
"p": {
"a": 0,
"k": [
600,
600
],
"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": "Transformer "
}
],
"nm": "Groupe 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 76,
"st": 0,
"bm": 0
}
],
"markers": []
}

0 comments on commit dd50341

Please sign in to comment.