Animation background is white instead of transparent on iOS

[Ratul Sarna]

Animation file -
loading.json

Example -
https://github.com/ismai117/kottie/assets/7789307/0e014884-f86c-4c12-9294-78f7d79196a2

Please refer to the above animation JSON file and the example video recording. The animation has a transparent background but it renders with a white background when running on iOS. The example video is taken by using the animation file in the sample app.

[ismai117]

Hi @rdsarna, transparent background doesn't work on the UIKitView at the moment, so you have to set the background colour for the KottieAnimation composable the same as the container's background colour. Here's an example.

MaterialTheme {
        Scaffold(
            containerColor = MaterialTheme.colorScheme.onSurfaceVariant
        ) { paddingValues ->
            Box(
                modifier = modifier
                    .padding(paddingValues)
                    .fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {

                KottieAnimation(
                    composition = composition,
                    progress = { animationState.progress },
                    modifier = modifier.size(300.dp),
                    backgroundColor = MaterialTheme.colorScheme.onSurfaceVariant
                )

            }
        }
    }

Result:

Screen.Recording.2024-03-05.at.16.27.40.mov

[Ratul Sarna]

That fixed the issue. Thanks a lot!

[Andrey Larionov]

Hi @ismai117
I tried what you said, but it kinda doesn't work. Here's an example:

Left button = iOS, Right button = Android
You can see on iOS the white empty square at the "first" animation frame that Android doesn't have

CleanShot.2024-05-09.at.20.28.41.mp4

I guessed there was something wrong with my color management, but even when I set the Kottie background to Color.Black, I initially still saw a white square at the first animation frame. Only afterwards could I see the animation start on a black background

My code:

KottieAnimationView(
    type = KottieCompositionSpecType.JsonString(animationJsonString),
    animationSettings = KottieAnimationSettings(backgroundColor = Color.Black),
    onCompleteCallback = onCompleteCallback,
    modifier = Modifier
        .size(24.dp)
        .background(Color.Black)
)
    
KottieAnimation(
    modifier = modifier,
    composition = composition,
    progress = { animationState.progress },
    backgroundColor = animationSettings.backgroundColor
)

I don't know exactly how to handle a transparent background on iOS, but maybe this could help?

class TransparentViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        // view
        self.view.backgroundColor = UIColor.clear
        
        // subview
        let subview = UIView()
        subview.backgroundColor = UIColor.clear
        self.view.addSubview(subview)
    }
}

[ismai117]

JetBrains/compose-multiplatform#3154