Animation with Adobe After Effects files that consist of png images does not support system scale changes

[AndreyBro48]

Lottie is supported and developed on nights and weekends. Issues from Lottie sponsors will be prioritized.

If you don't use this template, your issue will be closed. Delete this text once completed.

Checklist

1. My animation doesn't use any unsupported features.
2. I know what part of my animation doesn't work.
3. I have created a simplified version of my animation
4. I have attached the AEP file (as a zip file so it can be attached) that only has the part of the animation that doesn't work.

Describe the bug

Any animations with Adobe After Effects files that consist of png images do not support system scaling

What version of Lottie did you test this on?

lottie-compose:5.2.0

What version of Android did you test this on?

Android 10/13, but I think it doesn't depend on the Android version

Steps To Reproduce

Steps to reproduce the behavior:

1. Run any animation with Adobe After Effects files that consist of png images (ex: https://lottiefiles.com/131823-investment) screenshot 1
2. Go to system settings and change the scale settings of user interface screenshot 2
3. Go back to app screenshot 3
4. See error

Code

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val animation = "https://assets9.lottiefiles.com/packages/lf20_dnGoCmSHJx.json"
        setContent {
            LottieTestTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    val composition by rememberLottieComposition(
                        spec = LottieCompositionSpec.Url(animation)
                    )
                    LottieAnimation(
                        composition = composition,
                        iterations = LottieConstants.IterateForever,
                        contentScale = ContentScale.FillWidth,
                        alignment = Alignment.TopCenter,
                        modifier = Modifier.fillMaxSize()
                    )
                }
            }
        }
    }
}

[Hooooong]

I'm experiencing the same issue. I'm using version 6.2.0, and after changing the system scale, there's a rendering issue, but force-quitting the app and relaunching it makes it work normally.

[Hooooong]

@gpeal

It is the same even if you upgrade to 6.3.0.

My code is like this, and the video is attached.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val animation = "https://lottie.host/8eda8418-db8e-42a7-be06-c6208ffb03b4/3yH617QvMP.json"
        setContent {
            LottieTestTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    val composition by rememberLottieComposition(
                        spec = LottieCompositionSpec.Url(animation)
                    )
                    LottieAnimation(
                        composition = composition,
                        iterations = LottieConstants.IterateForever,
                        contentScale = ContentScale.FillWidth,
                        alignment = Alignment.TopCenter,
                        modifier = Modifier.fillMaxSize()
                    )
                }
            }
        }
    }
}

SAMPLE 1	SAMPLE 2

[Hooooong]

@gpeal

Hello. I am leaving a comment here as it seems to be the same issue. The problem was resolved when using a single LottieAnimation, but when using multiple specs with the same URL, there seems to be a bouncing issue.

In the sample below, it works correctly if I give a different cacheKey for rememberLottieComposition, but I’m wondering if this is the recommended approach.

The version is 6.5.2, and I am providing the sample code and video below.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LottieTestTheme {
                val animation = "https://assets9.lottiefiles.com/packages/lf20_dnGoCmSHJx.json"

                Surface(
                    modifier = Modifier.fillMaxSize()
                ) {
                    val composition1 by rememberLottieComposition(spec = LottieCompositionSpec.Url(animation))
                    val composition2 by rememberLottieComposition(spec = LottieCompositionSpec.Url(animation))

                    Column(
                      verticalArrangement = Arrangement.spacedBy(16.dp)
                    ){
                        LottieAnimation(
                            composition = composition1,
                            iterations = LottieConstants.IterateForever,
                            contentScale = ContentScale.FillWidth,
                            alignment = Alignment.TopCenter,
                            modifier = Modifier.fillMaxWidth()
                        )

                        LottieAnimation(
                            composition = composition2,
                            iterations = LottieConstants.IterateForever,
                            contentScale = ContentScale.FillWidth,
                            alignment = Alignment.TopCenter,
                            modifier = Modifier.fillMaxWidth()
                        )
                    }
                }
            }
        }
    }
}

SAMPLE 1

[gpeal]

@gpeal

Hello. I am leaving a comment here as it seems to be the same issue. The problem was resolved when using a single LottieAnimation, but when using multiple specs with the same URL, there seems to be a bouncing issue.

In the sample below, it works correctly if I give a different cacheKey for rememberLottieComposition, but I’m wondering if this is the recommended approach.

The version is 6.5.2, and I am providing the sample code and video below.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LottieTestTheme {
                val animation = "https://assets9.lottiefiles.com/packages/lf20_dnGoCmSHJx.json"

                Surface(
                    modifier = Modifier.fillMaxSize()
                ) {
                    val composition1 by rememberLottieComposition(spec = LottieCompositionSpec.Url(animation))
                    val composition2 by rememberLottieComposition(spec = LottieCompositionSpec.Url(animation))

                    Column(
                      verticalArrangement = Arrangement.spacedBy(16.dp)
                    ){
                        LottieAnimation(
                            composition = composition1,
                            iterations = LottieConstants.IterateForever,
                            contentScale = ContentScale.FillWidth,
                            alignment = Alignment.TopCenter,
                            modifier = Modifier.fillMaxWidth()
                        )

                        LottieAnimation(
                            composition = composition2,
                            iterations = LottieConstants.IterateForever,
                            contentScale = ContentScale.FillWidth,
                            alignment = Alignment.TopCenter,
                            modifier = Modifier.fillMaxWidth()
                        )
                    }
                }
            }
        }
    }
}

SAMPLE 1

Yes, I would use a different cacheKey so that the two compositions can be differentiated.