애니메이션을 사용하여 활동 시작

머티어리얼 디자인 앱의 활동 전환은 공통 요소 간의 모션 및 변환을 통해 서로 다른 상태 간에 시각적 연결을 제공합니다. 들어가기 및 나가기 전환과 활동 간 공유 요소의 전환을 위한 맞춤 애니메이션을 지정할 수 있습니다.

그림 1. 공유 요소로 전환.

  • 들어가기 전환은 활동의 보기가 테마에 들어가는 방식을 결정합니다. 예를 들어 explode 들어가기 전환의 경우, 보기가 밖에서 테마 속으로 들어가며 화면의 중앙으로 향합니다.
  • 나가기 전환에 따라 활동의 보기가 테마를 나가는 방식이 결정됩니다. 예를 들어 explode 나가기 전환에서는 보기가 중앙에서부터 테마를 벗어납니다.
  • 공유 요소 전환에 따라 두 활동 간에 공유되는 보기가 이 두 활동 간에 전환되는 방식이 결정됩니다 예를 들어 두 활동에서 사용하는 동일한 이미지가 서로 다른 위치에 있고 크기도 다를 경우 changeImageTransform 공유 요소 전환을 통해 두 활동 간에 이미지를 매끄럽게 변환하고 배율을 조정합니다

Android에서는 다음과 같은 들어가기와 나가기 전환을 지원합니다.

  • explode - 보기를 테마의 중앙에서 안이나 밖으로 이동합니다.
  • slide - 보기를 장면의 테마의 가장자리 중 하나에서 안이나 밖으로 이동합니다.
  • fade - 불투명도를 변경하여 보기를 추가하거나 테마에서 삭제합니다.

Visibility 클래스를 확장하는 모든 전환은 들어가기 또는 나가기 전환으로 지원됩니다. 자세한 내용은 Transition 클래스이 API 참조를 확인하세요.

Android에서는 이 공유 요소 전환도 지원합니다.

  • changeBounds - 타겟 보기의 레이아웃 경계에서 변경사항을 애니메이션으로 보여줍니다.
  • changeClipBounds - 타겟 보기의 경사 제한 경계에 있는 변경사항을 애니메이션으로 보여줍니다.
  • changeTransform - 타겟 보기의 배율 및 회전 변경사항을 애니메이션으로 보여줍니다.
  • changeImageTransform - 타겟 이미지의 크기 및 배율 변경사항을 애니메이션으로 보여줍니다.

앱에서 활동 전환을 사용할 경우, 들어가기 및 나가기 활동 간에 기본 크로스페이딩(cross-fading) 전환이 활성화됩니다.

Figure 2 - 하나의 공유 요소로 장면 전환.

공유 요소를 사용하여 활동 간의 애니메이션을 보여주는 샘플 코드는 ActivitySceneTransitionBasic을 참조하세요.

시스템 버전 확인

활동 전환 API는 Android 5.0(API 21) 이상에서 사용할 수 있습니다. 이전 버전의 Android와 호환성을 유지하려면, 이러한 기능을 위한 API를 호출하기 전에 런타임 시 시스템 version을 확인하세요.

Kotlin

    // Check if we're running on Android 5.0 or higher
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        // Apply activity transition
    } else {
        // Swap without transition
    }
    

자바

    // Check if we're running on Android 5.0 or higher
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        // Apply activity transition
    } else {
        // Swap without transition
    }
    

맞춤 전환 지정

먼저 소재 테마에서 상속하는 스타일을 정의할 때, android:windowActivityTransitions 속성을 통해 창 콘텐츠 전환을 사용으로 설정합니다. 들어가기, 나가기 및 공유 요소 전환도 스타일 정의에서 지정할 수 있습니다.

    <style name="BaseAppTheme" parent="android:Theme.Material">
      <!-- enable window content transitions -->
      <item name="android:windowActivityTransitions">true</item>

      <!-- specify enter and exit transitions -->
      <item name="android:windowEnterTransition">@transition/explode</item>
      <item name="android:windowExitTransition">@transition/explode</item>

      <!-- specify shared element transitions -->
      <item name="android:windowSharedElementEnterTransition">
        @transition/change_image_transform</item>
      <item name="android:windowSharedElementExitTransition">
        @transition/change_image_transform</item>
    </style>
    

이 예에서 change_image_transform 전환은 다음과 같이 정의되어 있습니다.

    <!-- res/transition/change_image_transform.xml -->
    <!-- (see also Shared Transitions below) -->
    <transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
      <changeImageTransform/>
    </transitionSet>
    

changeImageTransform 요소는 ChangeImageTransform 클래스에 해당합니다. 자세한 내용은 Transition의 API 참조를 확인하세요.

대신 코드에서 창 콘텐츠 전환을 사용하려면 Window.requestFeature() 함수를 호출하세요.

Kotlin

    // inside your activity (if you did not enable transitions in your theme)
    with(window) {
        requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)

        // set an exit transition
        exitTransition = Explode()
    }
    

자바

    // inside your activity (if you did not enable transitions in your theme)
    getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

    // set an exit transition
    getWindow().setExitTransition(new Explode());
    

코드에서 전환을 지정하려면 Transition 객체와 함께 이 함수를 호출합니다.

setExitTransition()setSharedElementExitTransition() 함수를 사용하여 호출하는 활동의 나가기 전환을 정의합니다. setEnterTransition()setSharedElementEnterTransition() 함수를 사용하여 호출된 활동의 들어가기 전환을 정의합니다.

전환 효과를 극대화하려면 호출하는 활동과 호출되는 활동 둘 다에서 창 콘텐츠 전환을 사용해야 합니다. 그렇지 않으면 호출하는 활동이 나가기 전환을 시작하지만, 조정 또는 페이드와 같은 창 전환이 표시됩니다.

최대한 빨리 들어가기 전환을 시작하려면 호출되는 활동에서 Window.setAllowEnterTransitionOverlap() 함수를 사용합니다. 그러면 더욱 인상적인 들어가기 전환이 가능합니다.

전환을 사용하여 활동 시작

전환을 사용하고 활동의 나가기 전환을 설정하면 다음과 같이 다른 활동을 시작할 때 전환이 활성화됩니다.

Kotlin

    startActivity(intent,
                  ActivityOptions.makeSceneTransitionAnimation(this).toBundle())
    

자바

    startActivity(intent,
                  ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
    

두 번째 활동의 들어가기 전환을 설정하면 활동이 시작될 때 전환도 활성화됩니다. 다른 활동을 시작할 때 전환을 사용하지 않으려면 null 옵션 번들을 제공하십시오.

공유 요소가 있는 활동 시작

공유 요소가 있는 두 활동 간에 화면 전환 애니메이션을 만들려면 다음을 수행하세요.

  1. 테마에서 창 콘텐츠 전환을 사용합니다.
  2. 스타일에서 공유 요소 전환을 지정합니다.
  3. 전환을 XML 리소스로 정의합니다.
  4. android:transitionName 속성을 사용하여 두 레이아웃 모두에서 공유 요소에 공통 이름을 지정합니다.
  5. ActivityOptions.makeSceneTransitionAnimation() 함수를 사용합니다.

Kotlin

    // get the element that receives the click event
    val imgContainerView = findViewById<View>(R.id.img_container)

    // get the common element for the transition in this activity
    val androidRobotView = findViewById<View>(R.id.image_small)

    // define a click listener
    imgContainerView.setOnClickListener( {
        val intent = Intent(this, Activity2::class.java)
        // create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        val options = ActivityOptions
                .makeSceneTransitionAnimation(this, androidRobotView, "robot")
        // start the new activity
        startActivity(intent, options.toBundle())
    })
    

자바

    // get the element that receives the click event
    final View imgContainerView = findViewById(R.id.img_container);

    // get the common element for the transition in this activity
    final View androidRobotView = findViewById(R.id.image_small);

    // define a click listener
    imgContainerView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Intent intent = new Intent(this, Activity2.class);
            // create the transition animation - the images in the layouts
            // of both activities are defined with android:transitionName="robot"
            ActivityOptions options = ActivityOptions
                .makeSceneTransitionAnimation(this, androidRobotView, "robot");
            // start the new activity
            startActivity(intent, options.toBundle());
        }
    });
    

공유 동적 보기를 코드에 생성할 때 View.setTransitionName() 함수를 사용하여 두 활동 모두에 공통 요소 이름을 지정합니다.

두 번째 활동을 완료할 때 테마 전환 애니메이션을 역전시키려면 Activity.finish()가 아니라 Activity.finishAfterTransition() 함수를 호출합니다.

여러 공유 요소가 있는 활동 시작

두 개 이상의 공유 요소가 있는 두 활동 사이의 테마 전환 애니메이션을 만들려면 android:transitionName 속성을 사용(또는 두 활동 모두에서 View.setTransitionName() 함수 사용)하여 두 레이아웃 모두에 공유 요소를 정의하고 다음과 같이 ActivityOptions 객체를 생성합니다.

Kotlin

    // Rename the Pair class from the Android framework to avoid a name clash
    import android.util.Pair as UtilPair
    ...
    val options = ActivityOptions.makeSceneTransitionAnimation(this,
            UtilPair.create(view1, "agreedName1"),
            UtilPair.create(view2, "agreedName2"))
    

자바

    ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
            Pair.create(view1, "agreedName1"),
            Pair.create(view2, "agreedName2"));