Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI/YAF-000] 온보딩 Lottie Animation을 적용합니다. #41

Merged
merged 16 commits into from
Jan 16, 2025
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[p4]
온보딩 외에도 사용할 일이 있어서 core:ui 의 component에 배도 좋을 거 같아요

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[p5]
LottieAnimation의 크기를 직접적으로 fillMaxWidth()로 조절하는 방법이 없는 거 같긴 한데... 없다면 무시하셔도 됩니다.

Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
package com.kms.onboarding.component

import androidx.annotation.RawRes
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.layout.ContentScale
import com.airbnb.lottie.compose.LottieCompositionSpec
import com.airbnb.lottie.compose.LottieConstants
import com.airbnb.lottie.compose.animateLottieCompositionAsState
import com.airbnb.lottie.compose.rememberLottieComposition

@Composable
fun LottieAnimation(
modifier: Modifier = Modifier,
@RawRes resId: Int,
iterations: Int = LottieConstants.IterateForever,
contentScale: ContentScale = ContentScale.FillWidth,
scaleXAdjustment: Float = 1f,
scaleYAdjustment: Float = 1f,
) {
val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(resId))
val progress by animateLottieCompositionAsState(
composition = composition,
iterations = iterations,
)
val alpha = remember { Animatable(0f) }

LaunchedEffect(composition) {
if (composition != null) {
alpha.animateTo(
targetValue = 1f,
animationSpec = tween(durationMillis = 500),
)
}
}

Box(
modifier = modifier
.fillMaxWidth()
.graphicsLayer(
scaleX = when (contentScale) {
ContentScale.Fit -> scaleXAdjustment
ContentScale.FillWidth -> 1.2f * scaleXAdjustment
ContentScale.FillHeight -> 1.5f * scaleXAdjustment
else -> scaleXAdjustment
},
scaleY = when (contentScale) {
ContentScale.Fit -> scaleYAdjustment
ContentScale.FillWidth -> 1.2f * scaleYAdjustment
ContentScale.FillHeight -> 1.5f * scaleYAdjustment
else -> scaleYAdjustment
},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[p4]

Suggested change
scaleX = when (contentScale) {
ContentScale.Fit -> scaleXAdjustment
ContentScale.FillWidth -> 1.2f * scaleXAdjustment
ContentScale.FillHeight -> 1.5f * scaleXAdjustment
else -> scaleXAdjustment
},
scaleY = when (contentScale) {
ContentScale.Fit -> scaleYAdjustment
ContentScale.FillWidth -> 1.2f * scaleYAdjustment
ContentScale.FillHeight -> 1.5f * scaleYAdjustment
else -> scaleYAdjustment
},
scaleX = getScaleFromContentScale(contentScale) * scaleXAdjustment,
scaleY = getScaleFromContentScale(contentScale) * scaleYAdjustment,

scale 비율을 계산하는 헬퍼 함수를 작성하는 것도 좋을 거 같아요

alpha = alpha.value,
),
) {
if (composition != null) {
com.airbnb.lottie.compose.LottieAnimation(
composition = composition,
progress = { progress },
modifier = Modifier.fillMaxSize(),
)
}
}
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[p4]

Suggested change
}
}
private fun getScaleFromContentScale(contentScale: ContentScale): Float {
return when (contentScale) {
ContentScale.Fit -> 1f
ContentScale.FillWidth -> 1.2f
ContentScale.FillHeight -> 1.5f
else -> 1f
}
}