책장 넘기는 UX 구현

현재 개발 중인  '식물일기'는 책과 유사한 UI/UX로 구현했고, 그중에서 식물 등록 화면에 적용된 책장을 넘기는 UX에 대해 포스팅하겠습니다. 앱 디자인의 컨셉과 세부적인 부분을 참고한 사이트 목록입니다. 

참고 사이트

• Pinterest
• free vector icons 
• lottiefiles.com/search?q=book&category=animations

Pinterest

모바일 관련 ui를 참고 할 수 있는 사이트로 전체적인 컨셉을 잡는데 도움이 되는 사이트입니다.

free vector icons 

무료 아이콘을 제공하는 싸이트로, 책을 ui로 표현하는데 도움을 받은 사이트 입니다.

lottie files 

Air bnb에서 만든 애니메이션 라이브러리로, 어도비의 after effect에서 만든 json 파일을 이용하며 작은 용량으로 고퀄의 애니메이션을 구현할 수 있어 요즘 많이 사용됩니다. 구현 방법이 궁금하신분은 검색해보시고 예제 파일은 위의 사이트를 이용해주세요! 

애니메이션 속도를 조절할 수 있어서 책 넘기는 애니메이션 코드로 구현하는데 많은 도움을 얻었습니다.

 

 

>완성 예제

 

>애니메이션 구현 방법 

넘기는 '페이지를 담당하는 뷰' 에 x스케일 애니매이션을( 1 > -1  ) 지정하면 책이 펼쳐지는 느낌이 납니다. 이때 펼쳐지는 속표지를 다르게 하고 싶을 경우 애니메이션을 2가지로 나눕니다.

겉표지가 접혀지는 부분 ( 1 > 0)과 속표지가 보여지는 부분 ( 0 > -1 ) 으로 나누어 겉표지가 접혀지는 부분 애니메이션이 끝났을때 '페이지를 담당하는 뷰'의 배경 이미지 및 색상을 변경하면 됩니다. 

※리스너를 추가해서 애니메이션이 끝났을때를 체크합니다.

>코드

    private fun startScaleDownAnimation() {
        var pagingStartAnim = AnimationUtils.loadAnimation(this, R.anim.scale_down_1_0_dur1000)
        var pagingEndAnim = AnimationUtils.loadAnimation(this, R.anim.scale_up_reverse_0_1)

        pagingEndAnim.setAnimationListener(object : Animation.AnimationListener {
            override fun onAnimationRepeat(animation: Animation?) {
            }

            override fun onAnimationEnd(animation: Animation?) {

                binding.viewOpenedTopCover.visibility = View.VISIBLE
                binding.ctOpendBottomCover.visibility = View.VISIBLE
                binding.viewOpenedBack.visibility = View.VISIBLE
                binding.viewBookCenterLeft.visibility = View.VISIBLE
            }

            override fun onAnimationStart(animation: Animation?) {
            }

        })
        pagingStartAnim.setAnimationListener(object : Animation.AnimationListener {
            override fun onAnimationRepeat(animation: Animation?) {
            }

            override fun onAnimationEnd(animation: Animation?) {
                binding.page.startAnimation(pagingEndAnim)
                binding.pageTop.setBackgroundResource(R.drawable.round_solid_white_border_d8d8d8)   
            }

            override fun onAnimationStart(animation: Animation?) {
            }

        })

        binding.page.startAnimation(pagingStartAnim)
    }

   

 

>애니메이션 파일 

R.anim.scale_down_1_0_dur100.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="300"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.0"
        android:toYScale="1.0">
</scale>

R.anim.scale_up_reverse_0_1.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="300"
        android:fromXScale="0.0"
        android:fromYScale="1.0"
        android:toXScale="-1.0"
        android:toYScale="1.0"></scale>

res폴더에 anim 폴더를 생성하고, 각각의 animation 파일을 생성해서 사용하면 됩니다.

 

 

drawable으로만 구성된 뷰와 애니메이션을 개발하면서 꽤 많은 시간을 들였지만 생각한데로 느낌이 살아서 만족스러운 시간이였습니다. 관련 개발 문의나 궁금하신 부분이 있으시면 댓글이나 방명록에 남겨주시면 최대한 빨리 답변 드리도록 하겠습니다.