영에서 물질로의 전환

애니메이션은 응용 프로그램의 핵심 기능을 거의 바꾸지 않지만, 사용자에게 큰 영향을 미친다는 것을 부인할 수 없다.응용 프로그램이 좋은 애니메이션을 가지고 있을 때 모든 것이 더욱 원활해 보이고 사물이 어떻게 결합되었는지 이해하기 쉽다.
변환은 한 화면에서 다른 화면으로 이동하고 하나 이상의 요소에 애니메이션을 적용하려는 경우 사용됩니다.본고에서 응용 프로그램에서 이를 어떻게 실현하는지 보여 드리겠습니다.
애니메이션이 없는 프로그램부터 시작하여 필요한 애니메이션을 추가합니다.
전환 없음/전환 있음

준비 작업

시작하기 전에 잘못된 라이브러리 버전을 사용하지 않았는지 확인하십시오.androidx.appcompat:appcompat:1.3.0을 사용하는 경우 androidx.fragment:fragment-ktx:1.3.5을 수동으로 지정해야 합니다. 왜냐하면 appcompat:1.3.0은 세션 전환과 관련된 오류를 도입한 fragment:1.3.4에 의존하기 때문입니다.
오류 수정 섹션 참조
공유 변환을 처리할 때, 나는 IndexOutOfBoundsException 이상을 만났고, 나는 시간이 걸려서야 문제가 세션 라이브러리에 있다는 것을 발견했다.

 java.lang.IndexOutOfBoundsException: Index: 5, Size: 5
        at java.util.ArrayList.get(ArrayList.java:437)
        at androidx.fragment.app.FragmentTransitionImpl.setNameOverridesReordered(FragmentTransitionImpl.java:183)
        at androidx.fragment.app.DefaultSpecialEffectsController.startTransitions(DefaultSpecialEffectsController.java:665)

이제 시작해볼까요?

기초 지식

반환 변환을 설정하지 않으면 반환 시 변환 시스템은 자동으로 enter 변환을 반전시킵니다.
기본적으로 변환은 장면 루트의 모든 하위 뷰에서 실행됩니다.예를 들어, RecyclerView가 있으면 애니메이션이 해당 애니메이션과 해당 자식 객체에 적용됩니다.원하는 동작이 아닌 경우 뷰 그룹에 android:transitionGroup="true"을 설정하여 비활성화합니다.또한 레이아웃의 가장 바깥쪽 뷰에 적용하여 세그먼트를 하나의 전체로 애니메이션할 수도 있습니다.
세션을 생성한 후 채워진 뷰(예: RecyclerView)가 있으면 변환 시스템에 변환을 시작하기 전에 대기하라고 알려야 합니다.이렇게 하려면 postponeEnterTransition에 전화를 걸어 전환을 미루고 보기를 채운 후 startPostponedEnterTransition에 전화를 걸어야 합니다.

페이드 아웃

Material FadeThrough는 가장 간단한 전환에서 시작합니다.그래디언트 모드는 서로 밀접한 관계가 없는 UI 요소 간의 변환에 사용됩니다.
파드슬로
이 변환은 items 세션에서 카드 세션으로 포함됩니다.첫 번째 부분에서 우리는 exitTransition과 reenterTransition에서 MaterialFadeThrough으로 정의했다.
목표 세션에서 우리는 같은 전환을 정의했지만 enterTransition과 returnTransition에서 같은 전환을 정의했다.
RecyclerView를 사용하는 경우 대상 세션의 enter 변환을 연기해야 할 수도 있습니다.이 방법을 확인하려면 Basic Knowledge 섹션을 참조하십시오.
밑에 내비게이션 표시줄이 있을 때, 이 전환은 부분 사이를 내비게이션하는 데 아주 좋은 선택이다.담입담출은 미묘하지만, 좋은 터치 네비게이션이 추가되었다.

In a fade through transition, outgoing elements first fade out. Next, incoming elements fade in while scaling in overall size from 92% to 100%. The element scaling starts at 92%, rather than 0%, to avoid drawing excessive attention to the transition. The scale animation is applied only to incoming elements in order to emphasize new content over the old.

The motion system

색이 바래다

일반적으로 대화 상자, 메뉴 또는 기존 화면 범위에 맞는 컨텐트에 페이드 아웃 변환이 사용됩니다.
MaterialFadeMaterialFade의 전환을 실현하는 것과 MaterialFadeThrough의 전환을 실현하는 것은 기본적으로 같고 유일한 차이점은 전환 명칭이다.

When entering, elements use a fade and scale in overall size from 80% to 100%. The scale animation starts at 80%, rather than 0%, to avoid drawing excessive attention to the transition. When exiting, elements simply fade out. The scale animation is only applied to entering elements. This places emphasis on new content (entering elements) over old content (exiting elements).

The motion system

페이드와 페이드는 어떤 차이가 있습니까?

그것들은 매우 비슷해 보이지만, 규격을 보면, 우리는 주요한 차이를 볼 수 있다.
바래짐 – 80%에서 100%까지 다양함
FadeThrough – 92%에서 100%로 확장

공유 축

MaterialSharedAxis의 전환은 특정한 공간 관계를 나타내는 상황에 매우 적합하다.검색 페이지를 여는 것은 사용자가 어떤 내용을 검색할 때 아래의 내용이 바뀔 수 있는 좋은 예이다.
재료 공유 축
이 전환이 좋아 보이기 위해서는 애니메이션을 동시에 설정하는 한 쌍의 세션이 필요합니다.그것들의 변환은 방향 애니메이션을 만들기 위해 함께 실행될 것이다.forward에 MaterialSharedAxis 속성을 지정하여 변환 방향을 제어할 수 있습니다.전진하는 방향에서 과도 목표는 확대될 것이다.
이 예에서 우리는 Z축을 사용하지만, X축과 Y축에 어떤 모양인지 시험해 보아야 한다.
전환을 좋게 보이기 위해서는 forward=exitTransition과 enterTransition=reenterTransition에 동일한 returnTransition값을 지정해야 한다.

컨테이너 변환

이것은 내가 가장 좋아하는 전환이다. MaterialContainerTransform은 공유 요소 전환으로 사용되는데 이것은 보기의 크기, 위치 등을 시작 상태에서 끝 상태로 전환하는 데 사용된다는 것을 의미한다.
다른 화면에서 볼 수 있는 부분을 보여 주는 RecyclerView가 있으면 용기 변환이 대량으로 사용됩니다.이 변환을 사용하면 한 위치에서 다른 위치로의 변경 사항에 대한 애니메이션을 설정할 수 있습니다.
재료 용기 변환
우선, 우리는 전환하고자 하는 보기에 transitionName을 지정해야 한다.전환 명칭은 반드시 유일해야 한다. 이것이 바로 내가 전환 명칭의 끝에 layoutPosition을 추가해야 하는 이유이다.RecyclerView를 사용하는 경우 ViewHolder를 바인딩할 때 이렇게 해야 합니다.
이제 end layout 파일에서 애니메이션이 끝나는 뷰에 transitionName을 추가합니다.
우리는 항목을 눌렀을 때 전환을 시작하기를 희망합니다. 항목을 눌렀을 때, 전환 시스템에 시작 상태에서 끝 상태로 비치는 보기를 알려야 합니다.예를 들어 RecyclerView에서 클릭한 icon은 끝 레이아웃의 보기로 전환됩니다. 이 보기의 R.string.item_detail_icon_transition_name은 transitionName입니다.ViewHolder에서 지정한 transitionName은android로 사물을 추적하는 것일 뿐 다른 곳에서는 사용하지 않습니다.
마지막으로, 우리는 목표 부분에 MaterialContainerTransform을 지정했다.drawingViewId은 애니메이션 평면으로 사용할 뷰입니다. 탐색을 사용할 경우 NavController 뷰를 지정합니다.
애니메이션이 호형 경로를 따르려면 경로 동작을 지정해야 합니다.
여러 가지 방법으로 전환을 맞춤형으로 설정할 수 있습니다. here에 대해 더 많은 정보를 얻을 수 있습니다.
앞에서 말했듯이, 반환 변환을 지정하지 않으면 안드로이드는 자동으로 enter 변환을 사용합니다.
마지막 GIF를 다시 한 번 보면 MaterialContainerTransform은 괜찮아 보이지만 다른 모든 것은 대략적인 과도를 사용했다.우리는 여러 과도를 함께 사용해서 더욱 좋은 최종 결과를 실현하는 방법을 배울 것이다.

디버그 모드

어떤 경우 과도 뒤에 무슨 일이 일어났는지 이해하는 데 도움이 필요할 수도 있다. 간단한 일이 이 점을 도와줄 수 있다.MaterialContainerTransform에는 isDrawDebugEnabled 속성이 있는데 전환에 시각 정보를 추가하는 데 사용된다.
재료 용기 변환

혼합 약진

재료가 제공하는 4가지 변환에 대해 알아봤습니다. 이제 3가지 변환을 조합하여 애니메이션을 만드는 방법을 보여 드리겠습니다.
우선, 나는 목록 세션에서 MaterialSharedAxis 변환을 사용했는데 효과가 매우 좋았다. 왜냐하면 보기의 크기가 100%에서 92%로 줄어들었기 때문에 이것은 아이콘 애니메이션에 관심을 가지는 데 도움이 된다.
그리고 나는 MaterialFadeThrough을 목표 세션에 추가했지만, 이 애니메이션에서 아이콘을 제외했다. 왜냐하면 이것은 이미 MaterialContainerTransform에서 애니메이션을 설정했기 때문이다.
이렇게 하기만 하면 최종 결과는 훨씬 좋아질 것이다
혼합 변환
궁금한 사항이 있으면 source code here으로 전화하거나 문의하십시오.
가장 좋은 학습 방법은 실천을 통해 당신이 여기서 배운 지식을 구체적인 예에 응용하는 것이다.나는 너의 성과를 보고 매우 기쁘다.나는 이 문장이 너에게 도움이 되기를 바란다.

리소스

https://material.io/blog/android-material-motion

https://blog.stylingandroid.com/category/animation/transition/

https://codelabs.developers.google.com/codelabs/material-motion-android

https://material.io/design/motion/the-motion-system.html

Julian Hochgesang, Unsplash에서 촬영
게시물 From Nothing to Material Transitions은 Victor Brandalise에 가장 먼저 올라왔다.