[Mobile Programming] Transition API 애니메이션

애니메이션

• Fade : 가장 보편적인 애니메이션
• Slide : 한 방향으로 움직여 사라짐
• Explode : 폭발하는 것과 같은 효과
• ChangeBounds : 위치 및 크기를 변경
• Auto Transition : 순차적으로 포함된 transitionSet
• TransitionSet : 여러 개의 전환들을 묶음

실습

public class MainActivity extends AppCompatActivity {

    private LinearLayout linearL;
    private Button btn1;
    private ImageView imageView;
    private boolean visible = true;

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

        linearL = (LinearLayout) findViewById(R.id.LinearL);
        btn1 = (Button)findViewById(R.id.btn);
                imageView = (ImageView)findViewById(R.id.imageView);

                btn1.setOnClickListener(new View.OnClickListener() {
                    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
                    @Override
                    public void onClick(View view) { // 버튼을 누르면 
                        TransitionManager.beginDelayedTransition(linearL, new Fade()); // 서서히 사라짐
                 /*
                 TransitionManager.beginDelayedTransition(linearL, new Slide()); // 한 방향으로 사라짐
                  TransitionManager.beginDelayedTransition(linearL, new Explode()); // 폭발하듯이 사라짐
                 */

                        visible = !visible;
                        imageView.setVisibility(visible? View.VISIBLE: View.GONE);
            }
        });
    }

---

드로워블 애니메이션

• 여러 개의 이미지가 순서대로 재생되어서 생성되는 전통적인 애니메이션
• 움직임을 여러단계로 이미지화 한 후 그 이미지들을 차례로 보여주는 형식
• 움직일 이미지를 넣을 [res]-[drawable]에서 새 xml파일 생성 후 이미지를 으로 추가

실습
네 방향의 화살표를 순서대로 움직이는 애니메이션

// 이미지들을 넣은 arrow_ani.xml
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">

    <item
        android:drawable="@drawable/arrow1"
        android:duration="1000" />
    <item
        android:drawable="@drawable/arrow2"
        android:duration="1000"/>
    <item
        android:drawable="@drawable/arrow3"
        android:duration="1000" />
    <item
        android:drawable="@drawable/arrow4"
        android:duration="1000"/>

</animation-list>

//java 코드
public class MainActivity extends AppCompatActivity {

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

        Button mybtn = (Button)findViewById(R.id.button);
        ImageView myimage = (ImageView)findViewById(R.id.imageView);

        // ImageView에 백그라운드 arrow_ani를 설정한 후 AnimationDrawable 객체에 연결
        myimage.setBackgroundResource(R.drawable.arrow_ani);
        arrow_animation = (AnimationDrawable) myimage.getBackground();

        // 버튼에 대한 콜백함수
        mybtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                arrow_animation.start();
            }
        });
    }
}