[Android] MotionLayout

MotionLayout 이란

• ConstraintLayout의 서브클래스로 다양한 애니메이션을 제공.
• ConstraintLayout 2.0에 포함된 새로운 클래스

MotionLayout

• MotionScene에 정의된 ConstraintSet의 내용으로 화면전환을 지원

MotionScene

• MotionLayout에 필요한 rule을 정의
• 애니메이션을 위한 내용을 포함 (ConstraintSets, Transition, KeyFrames 등)

Transition

• ConstraintSets 또는 ConstraintLayout files 간의 전환에 관한 내용을 정의
• constraintSetStart: 시작 프레임 정의
• constraintSetEnd: 종료 프레임 정의
• duration: 전환 애니메이션 수행 시간
• interpolator: 애니메이션 속도 조절 방식 (anticipate, bounce, easeIn, easeInOut, easeOut, linear)

• <Transition
      app:constraintSetStart="@id/start"
      motion:duration="8000"
      app:constraintSetEnd="@id/end">
  

OnSwipe

• 화면 터치와 매칭 시켜 화면 전환을 실행
• touchAnchorId: 애니메이션을 적용할 대상
• touchRegionId: 터치를 적용시킬 대상을 제한
• touchAnchorSide: 지정 대상이 움직일 방향 (top, left, right, bottom)
• dragDirection: swipe 방향 지정 (dragUp, dragDown, dragLeft, dragRight)
• maxAcceleration: touch up 시, 얼마나 애니메이션을 가속시킬 지 지정 (default 1.2)
• maxVelocity: touch up 시, 애니메이션의 최대 속도 값

• <OnSwipe
      app:touchAnchorId="@id/rocket"
      app:touchAnchorSide="top"/>
  

OnClick

• 클릭 시 지정된 액션을 실행
• clickAction
• toggle: 클릭 시 start > end, end > start 로 동작
• transitionToEnd: end 위치로 이동 (애니메이션O)
• transitionToStart: start 위치로 이동(애니메이션O)
• jumpToEnd: end 위치로 이동 (애니메이션X)
• jumpToStart: start 위치로 이동(애니메이션X)

<OnClick
    app:targetId="@id/rocket"
    app:clickAction="toggle"/>

KeyFrameSet

• 전환의 특정 시점에서의 모션을 지정
• KeyPosition, KeyAttribute, KeyCycle, KeyTimeCycle를 자식으로 가짐

KeyAttribute

• View의 속성을 지정
• View에서 사용하는 여러 속성을 사용할 수 있음
• target: 적용할 대상 지정
• framePosition: 전체 애니메이션 프레임을 100으로 가정했을 때, 프레임의 위치 (0~100)

<KeyAttribute
    motion:target="@id/smallstar1"
    app:framePosition="70"
    android:scaleX="3"
    android:scaleY="3"
/>

CustomAttribute

• attributeName: custom attribute 이름 지정
• custom*Value: custom attribute의 value 지정
• customColorValue
• customIntegerValue
• customFloatValue
• customStringValue
• customDimension
• customBoolean

<KeyAttribute
    motion:target="@id/smallstar1"
    app:framePosition="70">
    <CustomAttribute
        app:attributeName="colorFilter"
        app:customColorValue="#eaeaea"/>
</KeyAttribute>

KeyPosition

• View의 위치를 지정
• target: 적용할 대상 지정
• framePosition: 전체 애니메이션 프레임을 100으로 가정했을 때, 프레임의 위치 (0~100)
• percentX / percentY: x, y 축 위치 지정 (0.0 ~ 1.0)
• keyPositionType: 선형 경로에 대한 키프레임의 편차를 계산하는 방법을 결정(parentRelative, deltaRelative, pathRelative)
• parentRelative: (0,0)이 우측 상단, (1,1)이 좌측 하단; 스크린과 같은 좌표계를 사용
• deltaRelative: (0,0)이 starting position, (1,1)이 ending position; 좌표계가 스크린이 아닌 view의 움직임에 관련됨
• pathRelative: (0,0)이 starting position, (1,0)이 ending position; 좌표계가 스크린이 아닌 view의 움직임에 관련됨

<KeyPosition
    app:keyPositionType="parentRelative"
    motion:target="@id/rocket"
    app:framePosition="20"
    app:percentX="0.7"
/>

ConstraintSet

• 레이아웃의 프레임 정보를 정의
• <Constraint>를 자식으로 가짐

<ConstraintSet android:id="@+id/start">
    <Constraint
        android:id="@id/rocket"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
</ConstraintSet>

Constraint

• View에 적용할 속성들을 지정

참고 및 출처

Dev101 App - using MotionLayout

Android Developers - MotionLayout

Github MotionLayout Demo