[APP 개발] Easing Functions (애니메이션 효과)

Easing functions은 parameter의 변화률을 명시합니다. 현실에 존재하는 물체들은 갑자기 움직이거나 멈추지 않습니다. 그리고 일정한 속력으로 움직이는 일도 거의 없습니다. 예를 들어, 우리가 서랍을 열때 처음에는 빠르게 열지만 거의 다 뺐을때는 천천히 빼게 됩니다. 공을 공중에서 바닥으로 떨어뜨렸을때 중력으로 인하여 속력이 조금씩 더 빨라지고 바닥에 닿았을때는 바운스를 하게됩니다. 이런 자연스러운 움직임을 easing function을 통해 표현할 수 있습니다.

Easing Function 종류

위의 그림은 보편적으로 많이 사용되는 easing function을 보여주고 있습니다. 전반적으로 대략 30개 정도의 easing function들이 사용되고 있습니다.

 

이번에 제작된 어디가개의 scale animation을 통해 구체적인 사용 방법을 알아보겠습니다.

1. 어디가개 launch 화면

어디가개 앱이 처음에 시작이 될때 중앙에 있는 강아지가 점점 커지면서 나타납니다. 단순히 조금씩 커지는 것이 아니라 가속도가 붙으면서 그리고 왕창 확대가 되면서 다시 작아지는 형태의 애니메이션입니다. 이때 사용되는 easing function은 easeOutBack입니다.

2. easeOutBack

이 형태의 function은 그림에서 보이는 것과 같이 조금씩 속력이 빨라지면서 그리고 기준치보다 조금 더 커지면서 기준치로 돌아오는 function입니다. 이 function을 통해 scale animation을 구현하면 크기가 조금 확대되었다가 다시 기준점으로 돌아오는 자연스러운 animation을 구현할 수 있습니다.

3. Android 구현 방법

1. scale animation xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/overshoot_interpolator"
    android:fillAfter="true" >
    <scale
        android:duration="800"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>

2. kotlin 코드

val animation1 = AnimationUtils.loadAnimation(applicationContext, R.anim.intro_dog_animation)
intro_dogLogo.startAnimation(animation1)

 

Android의 경우 먼저 사용할 animation을 xml로 제작을 해야합니다. easeOutBack 효과를 원하기 때문에 overshoot_interpolator로 interpolator의 값을 설정합니다. 그리고 scale 애니메이션으로 duration, fromXScale, fromYScale 등등을 설정합니다.  xml로 animation세팅을 마치면 kotlin코드로 AnimationUtils.loadAnimation 메소드를 통해 animation을 로딩하고 ImageView 객체에서 startAnimation을 호출하면 원하는 애니메이션이 구현됩니다.

4. iOS 구현 방법

1. swift 코드

dogLogo.transform = CGAffineTransform(scaleX: 0, y: 0)
UIView.animate(withDuration: 1.3, delay: 0, usingSpringWithDamping: 0.65, initialSpringVelocity: 0, options: .curveEaseOut, animations: { [self] in
    dogLogo.transform = CGAffineTransform.identity
}, completion: nil)

iOS의 경우는 UIView.animate(withDuration: delay: usingSpringWithDamping ...)이라는 메소드를 통해서 easeOutBack을 구현할 수 있습니다. Duration, delay, damping, initialSpringVelocity, curveEaseOut option등을 설정하면 우리가 원하는 애니메이션이 구현됩니다.

결론

현실 세계에서는 일정한 속도로 움직이기보다는 항상 가속도가 동반된 움직임이 진행됩니다. 그러므로 앱을 제작할때 이런 가속도를 고려하여 애니메이션을 실행한다면 조금 더 부드럽고 자연스러운 동작들을 구현하는데 많은 도움이 될 것입니다.