[Java][Android] ObjectAnimator 사용해서 애니메이션 적용하기

안녕하세요

이번에는 ObjectAnimator를 사용해서 버튼에 애니메이션을 적용해보도록 하겠습니다.

 

버튼을 클릭하면, 각종 메소드에 따라 버튼에 애니메이션 효과가 생기도록 구현해보겠습니다.

 

전체 코드입니다.

 

MainActivity.java

public class MainActivity extends AppCompatActivity {

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

    // 버튼 참조
    Button btnAnimate = findViewById(R.id.btnAnimate);

    // 버튼 클릭 이벤트
    btnAnimate.setOnClickListener(v -> {
      moveHorizontally(v);    // 1. 위치 이동 애니메이션 예제
      rotateView(v);          // 2. 회전 애니메이션 예제
      fadeInAndOut(v);        // 3. 투명도 조절 애니메이션 예제

    });

  }

  // 1. 위치 이동 후 원래 위치로 되돌아오는 애니메이션
  private void moveHorizontally(View view) {
    ObjectAnimator translationX = ObjectAnimator.ofFloat(view, "translationX", 200f);
    translationX.setDuration(300);

    ObjectAnimator translationXBack = ObjectAnimator.ofFloat(view, "translationX", 0f);
    translationXBack.setDuration(300);

    AnimatorSet animatorSet = new AnimatorSet();
    animatorSet.playSequentially(translationX, translationXBack);
    animatorSet.start();
  }

  // 2. 회전 후 원래 각도로 되돌아오는 애니메이션
  private void rotateView(View view) {
    ObjectAnimator rotation = ObjectAnimator.ofFloat(view, "rotation", 0f, 360f);
    rotation.setDuration(500);

    ObjectAnimator rotationBack = ObjectAnimator.ofFloat(view, "rotation", 360f, 0f);
    rotationBack.setDuration(500);

    AnimatorSet animatorSet = new AnimatorSet();
    animatorSet.playSequentially(rotation, rotationBack);
    animatorSet.start();
  }

  // 3. 투명도 조절 후 원래 상태로 되돌아오는 애니메이션
  private void fadeInAndOut(View view) {
    ObjectAnimator fadeOut = ObjectAnimator.ofFloat(view, "alpha", 1f, 0f);
    fadeOut.setDuration(500);

    ObjectAnimator fadeIn = ObjectAnimator.ofFloat(view, "alpha", 0f, 1f);
    fadeIn.setDuration(500);

    AnimatorSet animatorSet = new AnimatorSet();
    animatorSet.playSequentially(fadeOut, fadeIn);
    animatorSet.start();
  }
}

 

activity_main.xml

<!-- res/layout/activity_main.xml -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <!-- 애니메이션 버튼 -->
    <Button
        android:id="@+id/btnAnimate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="버튼을 눌러주세요"
        android:layout_centerInParent="true"/>
</RelativeLayout>

 

총 3가지의 메소드를 만들었고, 

각종 메소드의 속성을 조절해서 원하는 애니메이션을 적용 할 수 있습니다.

 

시연 영상입니다.