캐릭터 v2.0 업데이트

feature/dashboard/build.gradle.kts

@@ -13,6 +13,6 @@ dependencies {
 
     implementation(libs.accompanist.permission)
     implementation(libs.compose.cloudy)
-    implementation(libs.apng)
+    implementation(libs.lottie)
     implementation(libs.image.cropper)
 }

feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardCharacter.kt

@@ -1,6 +1,5 @@
 package com.chipichipi.dobedobe.feature.dashboard.component
 
-import androidx.annotation.DrawableRes
 import androidx.annotation.RawRes
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
@@ -9,46 +8,49 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
-import coil3.ImageLoader
-import coil3.compose.AsyncImage
+import com.airbnb.lottie.compose.LottieAnimation
+import com.airbnb.lottie.compose.LottieCompositionSpec
+import com.airbnb.lottie.compose.animateLottieCompositionAsState
+import com.airbnb.lottie.compose.rememberLottieComposition
 import com.chipichipi.dobedobe.core.designsystem.component.ThemePreviews
 import com.chipichipi.dobedobe.core.designsystem.theme.DobeDobeTheme
 import com.chipichipi.dobedobe.feature.dashboard.R
-import com.chipichipi.dobedobe.feature.dashboard.util.AnimatedPngDecoder
 import kotlinx.coroutines.delay
 
 @Composable
 internal fun DashboardCharacter(
-    @RawRes defaultApngRes: Int,
-    @RawRes reactionApngRes: Int,
-    @DrawableRes placeholder: Int,
+    @RawRes defaultRes: Int,
+    @RawRes reactionRes: Int,
     onChangeBubble: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    val context = LocalContext.current
-    val imageLoader = ImageLoader.Builder(context)
-        .components {
-            add(AnimatedPngDecoder.Factory())
-        }
-        .build()
-
-    var currentRaw by remember { mutableIntStateOf(defaultApngRes) }
     var isResetTrigger by remember { mutableStateOf(false) }
 
+    val defaultComposition by rememberLottieComposition(
+        spec = LottieCompositionSpec.RawRes(defaultRes),
+    )
+    val reactionComposition by rememberLottieComposition(
+        spec = LottieCompositionSpec.RawRes(reactionRes),
+    )
+
+    val currentComposition =
+        if (isResetTrigger) reactionComposition else defaultComposition
+
+    val progress by animateLottieCompositionAsState(
+        composition = currentComposition,
+        iterations = Int.MAX_VALUE,
+    )
+
     LaunchedEffect(isResetTrigger) {
         if (isResetTrigger) {
             onChangeBubble()
             delay(4000)
-            currentRaw = defaultApngRes
             isResetTrigger = false
         }
     }
@@ -57,18 +59,15 @@ internal fun DashboardCharacter(
         modifier = modifier,
         contentAlignment = Alignment.TopCenter,
     ) {
-        AsyncImage(
-            model = currentRaw,
-            contentDescription = "Character Image",
-            imageLoader = imageLoader,
-            placeholder = painterResource(placeholder),
+        LottieAnimation(
+            composition = currentComposition,
+            progress = { progress },
             modifier = Modifier
                 .size(262.dp, 328.dp)
                 .clickable(
                     interactionSource = remember { MutableInteractionSource() },
                     indication = null,
                 ) {
-                    currentRaw = reactionApngRes
                     isResetTrigger = true
                 },
         )
@@ -80,9 +79,8 @@ internal fun DashboardCharacter(
 private fun DashboardCharacterPreview() {
     DobeDobeTheme {
         DashboardCharacter(
-            defaultApngRes = R.raw.rabbit01,
-            reactionApngRes = R.raw.rabbit02,
-            placeholder = R.drawable.rabbit_placeholder,
+            defaultRes = R.raw.rabbit01,
+            reactionRes = R.raw.rabbit02,
             onChangeBubble = {},
         )
     }

feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardViewMode.kt

@@ -83,9 +83,8 @@ internal fun SharedTransitionScope.DashboardViewMode(
                         modifier = Modifier
                             .fillMaxSize()
                             .zIndex(0.5f),
-                        defaultApngRes = resources.defaultApngRes,
-                        reactionApngRes = resources.reactionApngRes,
-                        placeholder = resources.placeholderRes,
+                        defaultRes = resources.defaultRes,
+                        reactionRes = resources.reactionRes,
                         onChangeBubble = onChangeBubble,
                     )
                 }

feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/model/CharacterResources.kt

@@ -6,23 +6,20 @@ import com.chipichipi.dobedobe.core.model.CharacterType
 import com.chipichipi.dobedobe.feature.dashboard.R
 
 internal sealed class CharacterResources(
-    @DrawableRes val placeholderRes: Int,
     @DrawableRes val backgroundRes: Int,
-    @RawRes val defaultApngRes: Int,
-    @RawRes val reactionApngRes: Int,
+    @RawRes val defaultRes: Int,
+    @RawRes val reactionRes: Int,
 ) {
     data object Bird : CharacterResources(
-        placeholderRes = R.drawable.bird_placeholder,
         backgroundRes = R.drawable.bird_sheet_content_background,
-        defaultApngRes = R.raw.bird01,
-        reactionApngRes = R.raw.bird02,
+        defaultRes = R.raw.bird01,
+        reactionRes = R.raw.bird02,
     )
 
     data object Rabbit : CharacterResources(
-        placeholderRes = R.drawable.rabbit_placeholder,
         backgroundRes = R.drawable.rabbit_sheet_content_background,
-        defaultApngRes = R.raw.rabbit01,
-        reactionApngRes = R.raw.rabbit02,
+        defaultRes = R.raw.rabbit01,
+        reactionRes = R.raw.rabbit02,
     )
 
     companion object {

gradle/libs.versions.toml

@@ -37,13 +37,13 @@ protobufPlugin = "0.9.4"
 permission = "0.37.0"
 
 # third-party
-apng = "3.0.1"
 coil = "3.0.4"
 cloudy = "0.2.4"
 imageCropper = "4.6.0"
 moduleGraph = "2.7.1"
 koin = "4.0.1"
 ktlint = "12.1.0"
+lottie = "6.6.2"
 
 # test
 androidJunit5Plugin = "1.10.0.0"
@@ -105,7 +105,6 @@ protobuf-kotlin-lite = { group = "com.google.protobuf", name = "protobuf-kotlin-
 protobuf-protoc = { group = "com.google.protobuf", name = "protoc", version.ref = "protobuf" }
 
 # third-party
-apng = { module = "com.github.penfeizhou.android.animation:apng", version.ref = "apng"}
 coil-kt = { group = "io.coil-kt.coil3", name = "coil", version.ref = "coil" }
 coil-kt-compose = { group = "io.coil-kt.coil3", name = "coil-compose", version.ref = "coil" }
 coil-kt-network = { group = "io.coil-kt.coil3", name = "coil-network-okhttp", version.ref = "coil" }
@@ -119,6 +118,7 @@ koin-android-test = { group = "io.insert-koin", name = "koin-android-test" }
 koin-core = { group = "io.insert-koin", name = "koin-core" }
 koin-androidx-startup = { group = "io.insert-koin", name = "koin-androidx-startup" }
 koin-test-junit5 = { group = "io.insert-koin", name = "koin-test-junit5" }
+lottie = { module = "com.airbnb.android:lottie-compose", version.ref = "lottie" }
 
 # test
 mockk = { module = "io.mockk:mockk", version.ref = "mockk" }