-
Notifications
You must be signed in to change notification settings - Fork 1
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
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit
Hold shift + click to select a range
1f62f36
[ADD/#39] Lottie Compose 추가
MoonsuKang ceb9695
[MOD/#39] Dependency Graph 최신화
MoonsuKang dc4ba6c
[ADD/#39] Lottie Json & Gif 추가
MoonsuKang 9380a70
[ADD/#39] lottie 및 coil gif dependency 추가
MoonsuKang 10a604b
[ADD/#39] Coil ImageLoader & Fade Animation을 적용한 GIF Composable 추가
MoonsuKang 9d8b473
[ADD/#39] Lottie Animation Composable 추가
MoonsuKang 9c1c4c6
[REFACTOR/#39] topappbar action 부분 분기화
MoonsuKang 25c5ac5
[REFACTOR/#39] 이용약관 Text를 step 3~5에서만 확인가능한 방식으로 수정
MoonsuKang f6e9437
[ADD/#39] Complete1,2 Route 및 Navgraph 설정
MoonsuKang 9d6492e
[ADD/#39] top,bottom bar 파라미터 추가
MoonsuKang d726583
[MOD/#39] NextClick Event로 수정
MoonsuKang d96279c
[UI/#39] GIF UI 적용
MoonsuKang a75ac03
[UI/#39] Onboarding Complete1 UI 구현
MoonsuKang 459afb2
[UI/#39] Onboarding Complete2 UI 구현
MoonsuKang 328fadf
[ADD/#39] String Resource
MoonsuKang d8cd643
[REFACTOR/#39] LottieAnimation core:ui로 이동 및 scale 비율 계산 헬퍼 함수로 빼기
MoonsuKang File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
73 changes: 73 additions & 0 deletions
73
feature/onboarding/src/main/java/com/kms/onboarding/component/LottieAnimation.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||||||||||||||||||||||||||||||
}, | ||||||||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [p4]
Suggested change
scale 비율을 계산하는 헬퍼 함수를 작성하는 것도 좋을 거 같아요 |
||||||||||||||||||||||||||||||
alpha = alpha.value, | ||||||||||||||||||||||||||||||
), | ||||||||||||||||||||||||||||||
) { | ||||||||||||||||||||||||||||||
if (composition != null) { | ||||||||||||||||||||||||||||||
com.airbnb.lottie.compose.LottieAnimation( | ||||||||||||||||||||||||||||||
composition = composition, | ||||||||||||||||||||||||||||||
progress = { progress }, | ||||||||||||||||||||||||||||||
modifier = Modifier.fillMaxSize(), | ||||||||||||||||||||||||||||||
) | ||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [p4]
Suggested change
|
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[p4]
온보딩 외에도 사용할 일이 있어서 core:ui 의 component에 배도 좋을 거 같아요
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[p5]
LottieAnimation의 크기를 직접적으로 fillMaxWidth()로 조절하는 방법이 없는 거 같긴 한데... 없다면 무시하셔도 됩니다.