[안드로이드] 애니메이션으로 뷰(View) 표시 및 숨기기 - 크로스페이드(CrossFade) 쉽게 만드는 방법

이번 시간에는 애니메이션을 통해 2개의 이미지를

교차시켜 하나는 사라지고, 하나는 보이는 화면을

만들어 보겠습니다.

1. 메인 화면 구성 activity_main.xml

겹쳐진 2개의 이미지와 크로스페이드 기능 동작을 할 버튼 하나로 구성되어 있습니다.

<?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">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="center">

        <ImageView
            android:id="@+id/image_view1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/lion" />

        <ImageView
            android:id="@+id/image_view2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/mouse"
            android:visibility="invisible" />
    </FrameLayout>

    <Button
        android:id="@+id/crossFade"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:text="크로스 페이드" />
</LinearLayout>

이미지 res -> drawable

lion.png

0.00MB

mouse.png

0.00MB

 

 

 

2. 메인 코드 구현 MainActivity.java

겹쳐져 있는 2개의 이미지를 하나는 3초의 시간 동안 서서히 보이지 않게

하나의 이미지는 3초의 시간동안 서서히 보이게 하는 기능을 합니다.

애니메이션이 끝나면 화면에서 이미지를 완전 사라지게(Gone) 했습니다.

public class MainActivity extends AppCompatActivity {

    ImageView imageView1;
    ImageView imageView2;

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

        imageView1 = findViewById(R.id.image_view1); //첫번째 이미지
        imageView2 = findViewById(R.id.image_view2); //두번째 이미지


        Button crossFadeBtn = findViewById(R.id.crossFade);
        crossFadeBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {


                imageView2.setAlpha(0f); //화면에서 안보임
                imageView2.setVisibility(imageView2.VISIBLE); //안보이지만 자리는 차지하고 있음

                imageView2.animate()
                        .alpha(1f) //화면에 출력
                        .setDuration(3000) //3초에 걸쳐서
                        .setListener(null);

                imageView1.animate()
                        .alpha(0f) //화면에서 안보임
                        .setDuration(3000) //3초에 걸쳐서
                        .setListener(new Animator.AnimatorListener() {
                            @Override
                            public void onAnimationStart(Animator animator) {

                            }

                            @Override //애니메이션 끝날 때 실행되는 메서드드
                           public void onAnimationEnd(Animator animator) {
                                imageView1.setVisibility(imageView1.GONE);
                                Toast.makeText(getApplicationContext(), "이미지 전환", Toast.LENGTH_SHORT).show();
                            }

                            @Override
                            public void onAnimationCancel(Animator animator) {

                            }

                            @Override
                            public void onAnimationRepeat(Animator animator) {

                            }
                        });//setListener
            }//onClick
        }); //btn
    }
}

 

 

3. 실행화면

 

2020.12.04 - [안드로이드] - [안드로이드] 애니메이션 예제(배터리 충전구현)

[안드로이드] 애니메이션 예제(배터리 충전구현)

 

2020.12.20 - [안드로이드] - [안드로이드]ViewFlipper 화면전환 쉽게 만드는법

[안드로이드]ViewFlipper 화면전환 쉽게 만드는법

 

2020.12.18 - [안드로이드] - [안드로이드]TextSwitcher 글자변환 애니메이션 만들어보기

[안드로이드]TextSwitcher 글자변환 애니메이션 만들어보기