Android 용 MotionLayout으로 애니메이션을 만듭니다

이 자습서는 MotionLayout을 사용하여 Android 앱에서 위젯을 쉽게 애니메이션하는 방법을 보여줍니다. MotionLayout, 2.0 이상의 구속 조건 Layout의 일부는 사용자 정의 전환 생성을 단순화합니다. 시작하려면 레이아웃이 제한 조건 전단 버전 2.0.0 이상을 사용하는지 확인하십시오. MotionLayout을 통합하는 가장 쉬운 방법은 Android Studio의 레이아웃보기를 "코드"에서 "디자인"또는 "분할"보기로 전환하는 것입니다. 여기에는

요소를 추가 할 수있는 구성 요소 트리 패널이 나타납니다. A

아래에 "점프"라는 버튼을 추가하겠습니다.이 버튼을 클릭하면 애니메이션이 트리거됩니다. 애니메이션의 핵심은

파일로 정의됩니다 (예 : ). 이 XML 파일은 태그를 사용하여 위젯의 시작 및 종료 상태를 정의합니다. 간단한 예는 다음과 같습니다 MotionLayout TextView this

는

를 크기의 두 배로 스케일링하고 버튼을 클릭하면 색상을 변경하는 전환을 정의합니다. 태그는 전환을 트리거합니다. 태그는 초기 ( "시작") 및 최종 상태 ( "END") 상태를 지정합니다. 활동의 Kotlin 코드에서는 애니메이션을 트리거해야합니다. 이것은 MotionScene를 참조하고 activity_main_scene.xml를 호출하여 수행됩니다. ConstraintSet 보다 복잡한 애니메이션의 경우 Visual Design에 Android Studio의 모션 편집기를 사용하는 것을 고려하십시오. 이를 통해 모든 XML을 수동으로 작성하지 않고도 애니메이션을 만들고 미리 볼 수 있습니다. 애니메이션의 다양한 단계에서 코드를 실행하려면 를 추가 할 수도 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@+id/start"
        motion:duration="200"
        motion:motionInterpolator="easeIn">
        <OnClick motion:targetId="@+id/button" motion:clickAction="transitionToEnd" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@+id/textView">
            <CustomAttribute motion:attributeName="textColor" motion:customColorValue="@color/black" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@+id/textView"
            android:scaleX="2"
            android:scaleY="2">
            <Layout
                android:layout_marginBottom="40sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                motion:layout_constraintBottom_toTopOf="@id/button" />
            <CustomAttribute motion:attributeName="textColor" motion:customColorValue="@color/teal_700" />
        </Constraint>
    </ConstraintSet>

</MotionScene>

이 접근법은 애니메이션을 세분화하는 제어를 제공하여 애니메이션 라이프 사이클 내에서 정교한 전환 및 이벤트 처리를 허용합니다. 자리 표시 자 이미지 URL을 실제 이미지 경로로 바꾸는 것을 잊지 마십시오.

위 내용은 Android 용 MotionLayout으로 애니메이션을 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!