안드로이드 애니메이션 만들기 / Lottie Animation

지난 포스팅에서 안드로이드 마사지 앱 개발 콘셉에 대해 간단하게 소개를 했다. 기능 구현을 목표로 기본 컨트롤로 화면을 구성을 했었는데, 보기 좋은 떡이 맛도 좋은 것처럼 애니메이션 효과를 추가해 보자. 

애니메이션을 추가한 초기화면

앱 인트로에 애니메이션을 추가한 화면이다. 뭔가 재미있는 기능들이 숨어 있을 것 같은 궁금증을 생기게 하고 전제적인 UI 디자인과도 잘 맞는다. 버튼에 토글 기능을 추가해 하나의 버튼으로 마사지 진동 On/Off를 구현했다. 

Lottie 애니메이션 실행 화면

안드로이드 기본 라이브러리는 해당 기능이 제공되지 않으므로 오픈 소스 라이브러리를 추가한다. Gradle Scripts에 해당 라이브러리를 추가한다. 현재 최신 버전은 3.4.4이다. 버전 정보와 사용법은 아래에서 확인할 수 있다.  https://airbnb.io/lottie/#/android?id=getting-started

Lottie Docs

[build.gradle (module)]

dependencies {
    ....
    def lottieVersion = "3.4.4"
    implementation "com.airbnb.android:lottie:$lottieVersion"

}

 

Lottie Animation 파일 받기

인터넷에 Lottie Animation을 검색하거나 Lottie 사이트에서 마음에 드는 걸 찾아 내려받는다. 간단한 회원가입 후 내려받을 수 있다. 

1. Lottie 사이트 접속 ( lottiefiles.com/  )

2. 선택한 이미지 JSON 파일로  다운로드 

Lottie 사이트에서 파일 다운로드

3. 안드로이드 스튜디오 asset 폴더 생성

asset 폴더 생성

4. asset폴더에 JSON파일 카피하기

asset 폴더에 lottie파일 추가

5. UI 화면에 Lottie 이미지 추가하기

activity_main.xm에 ImageView를 생성하고 lottie 애니메이션 속성을 설정한다. 

[activity_main.xm]

• app:lottie_fileName="heart_fluttering.json"   -- 애니메이션 파일명
• app:lottie_autoPlay="true"  -- 자동 실행 설정  (화면이 열릴 때 애니메이션 자동 실행 여부)
• app:lottie_loop="true"       -- 반복 실행 설정 (일반적으로 Lottie 애니메이션이 2~3초 내외로 짧다)

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/ono_btn"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@android:color/white"
        app:lottie_fileName="heart_fluttering.json"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        android:layout_centerInParent="true"
        />

XML에 Lottie 애니메이션을 추가해도 Design화면에는 나타나지 않는다. 실행 시 화면에 나타난다. 

[UI Design 화면]

 

코틀린 코드 보기

코틀린 소스에 버튼에 대한 이벤트를 추가하자. 앱 시작 callback 함수 onCreate()에 아래 코드를 추가한다. Lottie 버튼을 눌렀을 때 애니메이션을 start/stop 하고 마사지 진동도 애니메이션에 맞게 On/Off 한다.

• ono_btn.playAnimation()    // 애니메이션 실행   
• ono_btn.pauseAnimation()  // 애니메이션 중지
• 버튼 토글 처리는 it.tag 값에 0,1로 설정한다. 

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        vibrator = getSystemService(Context.VIBRATOR_SERVICE) as Vibrator
        val aTimings = longArrayOf(0, 1000, 1000, 500, 500)
        val aAmplitudes = intArrayOf(0, 50, 0, 100, 0)
        // 진동 효과 (진동유형(시간), 진동세기, 반복(0:무한반복, -1:한번)
        val vibrationEffect = VibrationEffect.createWaveform(aTimings, aAmplitudes, 0)

        ono_btn.setOnClickListener{
            if (it.tag == 1) {  // 진동 켜기
                ono_btn.playAnimation()    // 애니메이션 실행            
                vibrator?.vibrate(vibrationEffect)  // 진동 켜기
                textView_comment.text = "ON"
                it.tag = 0

            } else {  // 진동 끄기
                ono_btn.pauseAnimation()  // 애니메이션 중지
                vibrator?.cancel()  // 진동 끄기
                textView_comment.text = "OFF"
                it.tag = 1
            }
        }

Next Step

Lottie 애니메이션 기초 사용법을 알아보았다. Lottie가 오픈소스가 Github에 소스와 Documentation이 제공이 된다. 애니메이션과 마사지 진동을 연동해 기능을 구현하면 사용자 만족도와 선택지가 높아질 거 같다.