애니메이션으로 활동 시작

머티리얼 디자인 앱의 활동 전환은 서로 다른 상태를 표현합니다. 들어가기 및 나가기 전환과 공유 요소의 전환을 한 번에 측정합니다.

그림 1. 가 공유할 수 있습니다.

  • 들어가기 전환은 활동의 뷰가 어떻게 표시되는지 결정합니다. 들어가 보겠습니다. 예를 들어 explode 들어가기 전환에서 들어와서 정중앙으로 향하는 모습을 볼 수 있습니다. 화면
  • 나가기 전환에 따라 활동 이탈의 보기 방식이 결정됩니다. 장면입니다. 예를 들어 explode 나가기 전환에서 뷰는 장면 중앙에서 벗어나기만 하면 됩니다.
  • 공유 요소 전환은 이러한 활동 간에 공유되는 것을 말합니다. 예를 들어 두 활동에 위치와 크기가 다른 동일한 이미지가 있는 경우 changeImageTransform 공유 요소 전환은 이러한 활동 간에 이미지의 크기를 부드럽게 조정합니다.

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

  • explode: 뷰를 장면의 중앙에서 안쪽 또는 바깥쪽으로 이동합니다.
  • slide: 뷰를 다음의 가장자리 중 하나에서 안이나 밖으로 이동합니다. 장면입니다.
  • fade: 다음 요소를 변경하여 뷰를 장면에서 추가하거나 장면에서 삭제합니다. 설정할 수 있습니다.

Visibility 클래스를 확장하는 모든 전환은 들어가기 또는 나가기 전환으로 지원됩니다. 자세한 내용은 Transition 클래스에 대해 자세히 알아보세요.

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

  • changeBounds: 타겟의 레이아웃 경계에서 변경사항에 애니메이션을 적용합니다. 할 수 있습니다.
  • changeClipBounds: 타겟의 클립 경계에서 변경사항에 애니메이션을 적용합니다. 할 수 있습니다.
  • changeTransform: 이미지의 크기 및 회전 변경사항을 애니메이션으로 보여줍니다. 타겟 보기.
  • changeImageTransform: 다음 항목의 크기 및 배율 변경사항을 애니메이션으로 보여줍니다. 지정할 수 있습니다

앱에서 활동 전환을 활성화하면 기본 크로스 페이딩 진입 및 나가기 활동 간에 활성화됩니다.

그림 2. 하나의 공유 요소로 장면 전환.

공유 요소를 사용하여 활동 간에 애니메이션을 적용하는 샘플 코드는 다음을 참조하세요. ActivitySceneTransitionBasic을 실행합니다.

시스템 버전 확인

활동 전환 API는 Android 5.0(API 21) 이상에서 사용할 수 있습니다. 이전 버전의 Android와 호환성을 유지하려면 실행되기 전에 런타임에 version 시스템을 다음 기능에 대한 API를 호출합니다.

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 클래스. 자세한 내용은 API를 참조하세요. Transition 참조

대신 코드에서 창 콘텐츠 전환을 사용 설정하려면 Window.requestFeature() 함수:

Kotlin

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

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

자바

// Inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_ACTIVITY_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.finishAfterTransition() 함수를 Activity.finish() 대신 사용합니다.

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

더 많은 요소가 있는 두 활동 간에 장면 전환 애니메이션을 만들기 위해 두 개의 공유 요소를 사용하는 경우 android:transitionName 속성을 사용하거나 두 활동 모두에서 View.setTransitionName() 함수 만들기 <ph type="x-smartling-placeholder">ActivityOptions</ph> 객체를 다음과 같이 바꿉니다.

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

Java

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