[안드로이드 스튜디오] 오늘의 명언 - 애니메이션 효과 (회전, 나타나기, 사라지기 등)

이번 포스팅에서는 저번 포스팅에 이어서 애니메이션 효과에 대해 좀더 적어보도록 하겠습니다.

 

위에 이미지를 보시면 먼저 화면이 전환되면서 카드들이 회전하면서 나타나고 카드 하나를 클릭하면 카드는 뒤집어지면서 점점 사라지는 효과를 주었습니다.

 

위 효과를 주기위해서 사용한 애니메이션 XML은 총 5개입니다.

 

먼저 카드가 돌면서 점점 커지게 하는 xml입니다.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    >

    <scale
        android:interpolator="@android:anim/linear_interpolator"
        android:duration="1000"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromXScale="0.0"
        android:toXScale="1.0"
        android:fromYScale="0.0"
        android:toYScale="1.0" />

    <alpha
        android:interpolator="@android:anim/linear_interpolator"
        android:duration="1000"
        android:fromAlpha="0.0"
        android:toAlpha= "1.0" />
    <rotate
        android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="1000"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromDegrees="0"
        android:toDegrees="720"
        />

</set>

위 소스를 보시면 scale, alpha, rotate 3개를 사용했습니다.

 

scale는 1초 동안(duration="1000"),  일정한 속도로(@android:anim/linear_interpolator), 중심을 기준으로(pivotX="50%", pivotY="50%"), 없어졌다가 정상적인 크기로(fromXScale="0.0, toXScale="1.0" . . .) 나타나도록 설정했습니다.

alpha는 1초동안 일정한 속도로 투명에서 정상으로 나타나도록 설정했으며

rotate는 1초동안 일정한 속도로 중심을 기준으로 0도에서 720도까지 회전(두바퀴) 하도록 설정한겁니다.

 

이러면 1초 동안 카드가 회전하면서 나타나도록 하는 효과가 생깁니다.

 

그리고 카드를 선택했을때 위에 카드들은 사라지고 뒤에 있던 이미지와 글자들이 나타나도록 4개의 xml을 만들었고 소스는 아래와 같습니다.

 

fadein.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="@android:anim/accelerate_interpolator"
    android:fillAfter="true">

    <alpha
        android:duration="2000"
        android:fromAlpha="0.0"
        android:toAlpha= "1.0"
        android:fillAfter="true"/>
</set>

 

fadein2.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="@android:anim/accelerate_interpolator"
    android:fillAfter="true">

    <alpha
        android:duration="3000"
        android:fromAlpha="0.0"
        android:toAlpha= "1.0"
        android:fillAfter="true"/>
</set>

 

fadeout.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="@android:anim/linear_interpolator"
    android:fillAfter="true">

    <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:toAlpha= "0.0"
        android:fillAfter="true"/>
</set>

 

fadeout2.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="@android:anim/decelerate_interpolator"
    android:fillAfter="true">

    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha= "0.0"
        android:fillAfter="true"/>
</set>

 

먼저 fadeout 쪽을 보면 alpha값만 줘서 카드들이 투명해지게 했습니다.

근데 fadeout.xml, fadeout2.xml 이렇게 두개인 이유는 하나는 duration이 1초이고 하나는 0.5초입니다.

선택되지 않은 카드들은 0.5초만에 사라지게, 선택된 카드는 1초만에 사라지게 해서 선택된 카드가 조금 더 지속되도록 하기 위해서입니다.

 

fadein도 역시 alpha값만 줘서 이번에는 투명에서 정상적으로 보이도록 했고 이거 역시 마찮가지로 뒤 흰색판이 먼저 나타나도록 하기 위해 흰색판은 duration을 2초로 줘서 먼저 나타나고 나머지 이미지와 글자들은 3초를 줘서 천천히 나타나도록 한겁니다.

 

이런식으로 애니메이션 효과를 중첩에서 잘 사용하면 조금더 화려한 앱이 될수도 있을 겁니다.

 

그리고 마지막으로 카드가 뒤집히는 효과는 애니메이션으로는 할수없어서 아래와 같이 setCameraDistance와 animate().withLayer()를 이용하여 처리하였습니다.

float scale = getApplicationContext().getResources().getDisplayMetrics().density;
final float distance = imgClickCard.getCameraDistance() * (scale + (scale / 3));
imgClickCard.setCameraDistance(distance);
                
imgClickCard.animate().withLayer()
            .rotationY(120)
            .setDuration(1000)
            .start();

카드 클릭 시 회전하면 위쪽과 아래쪽 카드 모서리가 잘려서 돌게 됩니다.

setCameraDistance 카메라의 거리 값을 주는 것인데 회전 시 잘리는 이미지를 방지해 줍니다.

클릭 시 처음 이미지가 회전하는 각도 및 회전하는 시간을 설정할 수 있습니다.

 

위 내용은 아래 정글님의 글을 참조했습니다. (출처: https://geojun.tistory.com/43 [Jungle(정글)])

 

 

애니메이션 xml을 textview나 imageview에 적용하는 방법은 이전 포스트에 있으니 혹시 필요하시면 이전 포스트를 참조하세요

 

 

혹시 앱이 궁금하신 분은 아래 링크로 들어가시면 다운받을 수 있으시니 한번 다운받아서 설치해보시고 리뷰 남겨주시면 감사하겠습니다. ^^;;;

https://play.google.com/store/apps/details?id=com.withu.todayssaying

오늘의 명언(명언, 고사성어, 속담) - Google Play 앱