Android Studio, JAVA] shake 애니메이션

깨달은게 있다. 애니메이션은 노가다다. 그것도 정말.. 정말..

지금도 사실 좀 부자연스러운데 여기서 더 자연스럽게 하려고 했다간 아마...진짜 힘들거 같아서 일단 여기서 멈추기로 함...

 

이건 정말 저의 소중한 디자인 멘토처럼 늘 조언해주시는 뫄님(티스토리 안하신다)이 준 링크인데, 꽤 유용했다 (근데 준것만큼 구현을 못해서 슬픔)

www.pinterest.co.kr/pin/305611524712764579/

회원님께서 보셨으면 하는 gif를 찾았습니다!

 

애니메이션 파일 xml 코드이다.

- mailbox_shake.xml

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

    <!-- -25 -->
    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="-25"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        />

    <!-- 20 -->
    <rotate
        android:duration="350"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="400"
        android:toDegrees="45" />


    <!-- -17 -->
    <rotate
        android:duration="250"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="750"
        android:toDegrees="-37" />

    <!-- 15 -->
    <rotate
        android:duration="150"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="1000"
        android:toDegrees="32" />

    <!-- -13 -->
    <rotate
        android:duration="75"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="1150"
        android:toDegrees="-28" />

    <!-- 11 -->
    <rotate
        android:duration="50"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="1225"
        android:toDegrees="24" />

    <!-- -6 -->
    <rotate
        android:duration="25"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="1275"
        android:toDegrees="-17" />

    <!-- 3 -->
    <rotate
        android:duration="15"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="1300"
        android:toDegrees="9" />

    <!-- -1 -->
    <rotate
        android:duration="5"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="1315"
        android:toDegrees="-4" />

    <!-- -1 -->
    <rotate
        android:duration="5"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="1320"
        android:toDegrees="1" />

</set>

 

이렇게 회전, 이동, 페이드인/아웃만 있는 것만 모은 것을 트윈 애니메이션이라고 하고, 뷰 위주의 애니메이션의 세트는 안타깝게 interpolator 속성의 도움을 받을 수 없다.. 그럼 어떡해.. 노가다 해야지 ^^..

 

1. 시간 

duration은 애니메이션의 재생 속도,

startOffset은 이 애니메이션 세트에서 해당 애니메이션이 시작하는 시간이다.

 

예를 들어, 앞의 세 코드를 보면 -25도로 기울어지는 코드의 duration은 400이고 다음 20도가 되는 코드의 startOffset은 

400, duration은 350이다.

 

그럼 세 번째 코드의 startOffset은? 처음 애니메이션은 400 진행되었고, 다음 애니메이션이 350 진행되었으니, 당연히 400+350 =750의 startOffset을 가져야 한다.

 

2. 각도

위에 달린 주석은 이 애니메이션이 끝날 때 가지는 각도이다.

여기서 좀 주의할게 있는데, 애니메이션 세트에서 android:fromDegrees는 뷰가 시작하는 맨 처음(그러니까 뷰가 꼿꼿이 서있을 때)가 아니라, 전 애니메이션이 진행되고 멈춘 그 각도가 0도이다. 

 

예를 들어, 앞의 두 코드를 보면 첫 코드는 -25도로 기울기 때문에 toDegree를 -25로 지정한다.

다음 코드는 반대쪽으로, 20도를 기울일건데, 앞서 기운 -25도가 0도가 된다. 즉, 반대쪽으로 기울기 위해선 25+20 =45도를 기울여야 한다.

 

이 애니메이션을 다음과 같이 붙이면 완료된다.

    private void setListener(){
        imageViewPostbox.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                DlogUtil.d(TAG, "이미지뷰 클릭 - 애니메이션 시작");
                animation = AnimationUtils.loadAnimation(getContext(), R.anim.mailbox_shake);
                imageViewPostbox.setAnimation(animation);
                imageViewPostbox.startAnimation(animation);
            }
        });
    }