트윈 애니메이션

이동, 확대, 축소, 회전과 같이 일정한 패턴으로 움직이는 애니메이션을 구현할 때 트윈 애니메이션이 사용된다

 

xml에서 어떻게 동작할지 정의하고, 자바 소스에서 애니메이션 객체로 불러온 후에 뷰 객체의 startAnimation 메소드로 동작하게 한다

 

/app/res 폴더 안에 anim 폴더를 만든다

애니메이션 액션 정보는 이 곳에 있어야 인식된다

 

/app/res/anim/scale.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="2500"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="2.0"
        android:toYScale="2.0"></scale>
</set>

 

scale2.xml

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

    <!-- 확대 애니메이션 -->
    <scale
        android:duration="2500"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="2.0"
        android:toYScale="2.0" />

    <!-- 2.5초 후에 시작할 축소 애니메이션 정의 -->
    <scale
        android:duration="2500"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="2500"
        android:toXScale="0.5"
        android:toYScale="0.5" />
</set>

 

 

 

 

시작 시간은 startOffset, 지속 시간은 duration

startOffset은 시작한지 얼마 후에 액션이 수행될 것인지를 정한다

정하지않으면 애니메이션은 바로 시작된다

 

scale 태그는 대상을 확대하거나 축소할 때 사용되는데, 크기를 변경하려는 축의 정보는 x축과 y축애 데해 각각 pivotX와 pivotY로 지정한다

 

fromXScale과 fromYScale은 시작할 때의 확대/축소 비율이며,

toXScale과 toYScale은 끝날 때의 확대/축소 비율이다

 

여기서 1.0으로 시작하여 2.0으로 끝나므로 원래의 크기에서 시작해서 두 배의 크기로 확대되는 애니메이션이 수행된다

 

 

 

activity_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="확대" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="확대/축소" />
</LinearLayout>

 

 

MainActivity

package com.example.a47_tweenanimation;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animation anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.scale);

                v.startAnimation(anim);
            }
        });

        Button button2 = findViewById(R.id.button2);
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animation anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.scale2);

                v.startAnimation(anim);
            }
        });
    }
}

 

 

 

위치 이동 액션

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fillAfter="true"
    android:fromXDelta="0%p"
    android:repeatCount="-1"
    android:toXDelta="-100%p"></translate>

fromXDelta 속성이 0%임은 시작 위치의 x 좌표는 원래 위치의 x 좌표가 된다

toXDelta 속성이 -100%임은 대상의 크기만큼 왼쪽으로 이동하게 된다

repeatCount="-1"은 무한 반복이다

애니메이션이 끝난 후 대상이 원래 위치로 돌아오는 것을 막으려면 fillAfter 속성을 true로 하면 된다

 

 

위치 회전 액션

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360"></rotate>

fromDegrees는 시작 각도, toDegrees는 종료 각도이다

시계 반대 방향으로 하려면 toDegrees를 -360으로 하면 된다

회전의 중심이 되는 점은 디폴트 값이 0, 0이므로 대상의 왼쪽 상단 끝 지점이 된다

대상의 중앙 부분을 중심으로 만드려면 pivotX와 pivotY를 50%씩 하면 된다

 

 

 

 

투명도 액션

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromAlpha="0.0"
    android:toAlpha="1.0">
</alpha>