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

[Home] 후원사 카드 이미지 애니메이션(무한/자동 스크롤) #129

Merged
merged 9 commits into from
Jul 31, 2023

Conversation

wisemuji
Copy link
Member

@wisemuji wisemuji commented Jul 27, 2023

Issue

Overview (Required)

  • 후원사 카드의 이미지에 자동 스크롤 애니메이션 적용
  • 후원사 목록 무한 스크롤

Details

애니메이션 구현 상세

  1. 최초 진입 시 itemsState값 후원사 목록으로 초기화
  2. Lifecycle이 Resume 상태라면 자동 스크롤 동작 함수 반복 호출 (20ms에 한 번씩 4px 이동, 이 수치는 변경될 수 있음)
  3. 다음 분기문 적용
    3-1. 만약 앞으로(우측으로) 스크롤이 가능하지 않다면, 즉 Row의 끝에 도달했다면 itemsState 리스트에 후원사 목록 추가
    3-2. 만약 앞으로(우측으로) 스크롤이 가능하다면 별다른 동작 없음
  4. 위 과정을 반복

LazyListState의 canScrollForward, canScrollBackward 동작 상세

  • (최초 초기화시) 앞으로 스크롤 가능한 경우 canScrollForward true, canScrollBackward false
  • (최초 초기화시) 앞으로 스크롤 불가능한 경우 canScrollForward false, canScrollBackward` false
  • (최초 초기화 이후에) 앞으로 스크롤 가능한 경우 canScrollForward true, canScrollBackward true
  • (최초 초기화 이후에) 앞으로 스크롤 불가능한 경우 canScrollForward false, canScrollBackward true

Screenshot

@wisemuji wisemuji added the enhancement New feature or request label Jul 27, 2023
@wisemuji wisemuji requested a review from laco-dev July 27, 2023 17:24
@wisemuji wisemuji self-assigned this Jul 27, 2023
@laco-dev
Copy link
Contributor

laco-dev commented Jul 29, 2023

@wisemuji
해당 구현을 확인하기 위한 테스트 방법이 같이 명시되면 좋을 것 같아요.
*커밋에는 남지 않지만 어떻게 해야 테스트가 가능한지 설명

listOf(
            Sponsor(
                name = "1",
                imageUrl = "https://picsum.photos/200",
                homepage = "",
                Sponsor.Grade.PLATINUM
            ),
            Sponsor(
                name = "2",
                imageUrl = "https://picsum.photos/201",
                homepage = "",
                Sponsor.Grade.PLATINUM
            ),
            Sponsor(
                name = "3",
                imageUrl = "https://picsum.photos/202",
                homepage = "",
                Sponsor.Grade.GOLD
            ),
            Sponsor(
                name = "4",
                imageUrl = "https://picsum.photos/203",
                homepage = "",
                Sponsor.Grade.GOLD
            ),
            Sponsor(
                name = "5",
                imageUrl = "https://picsum.photos/204",
                homepage = "",
                Sponsor.Grade.GOLD
            ),
            Sponsor(
                name = "6",
                imageUrl = "https://picsum.photos/205",
                homepage = "",
                Sponsor.Grade.GOLD
            ),
            Sponsor(
                name = "7",
                imageUrl = "https://picsum.photos/206",
                homepage = "",
                Sponsor.Grade.GOLD
            ),
        )

데이터 차기 전까지는 코드로 넣어도 괜찮을 것 같습니다.

Comment on lines 106 to 115
LaunchedEffect(lifecycleState.value) {
when (lifecycleState.value) {
Lifecycle.Event.ON_RESUME -> {
while (true) {
autoScroll(scrollState)
}
}
else -> {}
}
}
Copy link
Contributor

Choose a reason for hiding this comment

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

val lifecycleOwner = LocalLifecycleOwner.current
LaunchedEffect(Unit) {
    lifecycleOwner.repeatOnLifecycle(Lifecycle.State.RESUMED) {
        while (isActive) {
            scrollState.scrollBy(SCROLL_PIXEL_UNIT)
            delay(SCROLL_DELAY_MILLIS)
        }
    }
}

Copy link
Member Author

Choose a reason for hiding this comment

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

너무 어렵게 생각했군요... 542cedf

@wisemuji
Copy link
Member Author

@wisemuji 해당 구현을 확인하기 위한 테스트 방법이 같이 명시되면 좋을 것 같아요.
데이터 차기 전까지는 코드로 넣어도 괜찮을 것 같습니다.

@laco-dev 반영했습니다. 이미지가 캐싱되기 때문에 랜덤 조회가 아닌 특정 이미지로 고정했어요. e3cee99

@wisemuji wisemuji requested a review from laco-dev July 31, 2023 11:20
Copy link
Contributor

@laco-dev laco-dev left a comment

Choose a reason for hiding this comment

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

LGTM 🐈 👍🏻 🐕

@wisemuji wisemuji merged commit 78bb3bc into droidknights:main Jul 31, 2023
@wisemuji wisemuji deleted the feature/#72 branch July 31, 2023 11:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
2023 enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Home] 후원사 카드 이미지 애니메이션
3 participants