MotionLayout.pdf

Transcript

1. Motion Layout Create simple animations Speaker: Oleksandr Sandul
2. Why?
3. Example from Google map app
4. Example from Shutter Points App
5. Main concepts
6. Motion Layout concepts States (constraintsSets) Transitions Keyframes Coordinate Systems OnSwipe/OnClick A B A B B A
7. Motion Layout Structure
8. Add Motion Layout in project
9. Add Motion Layout in Android project dependencies { implementation 'androidx.constraintlayout:constraintlayout:2.0.0-alpha4' }
10. Add in Fragment or Activity XML file
11. <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/move_from_top_to_bottom_scene" tools:showPaths="true"> <ImageView android:id="@+id/testImage" android:layout_width="100dp" android:layout_height="100dp" android:background="@color/colorPrimaryDark" android:contentDescription="@null" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.motion.widget.MotionLayout> </androidx.constraintlayout.widget.ConstraintLayout> Our test image Motion Layout
12. Create scene file
15. MotionScene - this is files in XML folder and they have root tag <MotionScene> .... </MotionScene> <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/move_from_top_to_bottom_scene" tools:showPaths="true">
16. MotionScene
17. <MotionScene> <Transition> <OnClick /> <OnSwipe /> <KeyFrameSet> <KeyPosition /> <KeyAttribute /> <KeyCycle /> </KeyFrameSet> </Transition> <ConstraintSet> <Constraint> <CustomAttribute /> </Constraint> </ConstraintSet> <StateSet> <State> <Variant /> </State> </StateSet> </MotionScene> Typical MotionScene Any variants ?
18. First example
19. <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition android:id="@+id/motionLayout" app:constraintSetEnd="@+id/end" app:constraintSetStart="@+id/start" app:duration="300" app:motionInterpolator="linear"> <OnSwipe app:dragDirection="dragDown" app:touchAnchorId="@+id/testImage" app:touchAnchorSide="top" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/testImage"> <Layout app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" motion:layout_height="100dp" motion:layout_width="100dp" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/testImage"> <Layout app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" motion:layout_height="100dp" motion:layout_width="100dp" /> </Constraint> </ConstraintSet> </MotionScene>
20. Second example
21. <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition android:id="@+id/motionLayout" app:constraintSetEnd="@+id/end" app:constraintSetStart="@+id/start" app:duration="300" app:motionInterpolator="linear"> <OnSwipe app:dragDirection="dragRight" app:touchAnchorId="@+id/testImage" app:touchAnchorSide="top" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/testImage"> <Layout app:layout_constraintStart_toStartOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent" motion:layout_height="100dp" motion:layout_width="100dp" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/testImage"> <Layout app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" motion:layout_height="100dp" motion:layout_width="100dp" /> </Constraint> </ConstraintSet> </MotionScene>
22. Give me more....
24. Third example
25. <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/motionLayout" app:motionDebug="SHOW_ALL" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/move_all_scene" app:showPaths="true"> <ImageView android:id="@+id/testImage1" android:layout_width="50dp" android:layout_height="50dp" android:background="@color/colorPrimaryDark" android:contentDescription="@null" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/btnRun" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Run" android:textAllCaps="false" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" /> btnRun.setOnClickListener { when (motionLayout.currentState) { R.id.start -> motionLayout.transitionToEnd() R.id.end -> motionLayout.transitionToStart() } }
26. Debug Motion layout example
27. <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/motionLayout" app:motionDebug="SHOW_ALL" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/move_all_scene" app:showPaths="true">
28. Deep dive into MotionScene
29. <Transition android:id="@+id/motionLayout" motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="3000" motion:motionInterpolator="linear"> <Transition android:id="@+id/motionLayout" motion:constraintSetEnd="@layout/end" motion:constraintSetStart="@layout/start" motion:duration="3000" motion:motionInterpolator="linear"> <Transition android:id="@+id/motionLayout" motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="3000" motion:motionInterpolator="linear">
30. <OnClick app:clickAction="toggle" app:targetId="@+id/btnRun" /> Alpha-3 Alpha-4 • transitionToEnd • toggle • transitionToStart • jumpToEnd • jumpToStart app:clickAction
31. <OnSwipe app:dragDirection="dragRight" app:touchAnchorId="@+id/testImage" app:touchAnchorSide="right" /> • touchAnchorId • touchAnchorSide • maxVelocity • dragDirection • maxAcceleration • moveWhenScrollAtTop OnSwipe
32. KeyFrame
33. <KeyFrameSet> <KeyPosition motion:framePosition="25" motion:keyPositionType="pathRelative" motion:motionTarget="@id/testImage1" motion:percentX="0.75" motion:percentY="-0.3" /> <KeyPosition motion:framePosition="50" motion:keyPositionType="pathRelative" motion:motionTarget="@id/testImage1" motion:percentY="-0.4" /> <KeyPosition motion:framePosition="75" motion:keyPositionType="pathRelative" motion:motionTarget="@id/testImage1" motion:percentX="0.25" motion:percentY="-0.3" /> </KeyFrameSet>
34. Keyframes
35. • target: the widget the keyframe apply to • framePosition: from 0 to 100, when does the keyframe applies • keyPositionType: the coordinate system used, parentRelative, deltaRelative, pathRelative • percentX / percentY : the (x,y) coordinate of the position <KeyPosition> ... </KeyPosition> <KeyFrameSet> <KeyPosition motion:framePosition="25" motion:keyPositionType="pathRelative" motion:motionTarget="@id/testImage1" motion:percentX="0.75" motion:percentY="-0.3" />
36. Alpha-3 Alpha-4 <KeyPosition> ... </KeyPosition>
37. parentRelative This is a very straightforward and intuitive way to express the position of the keyframe
38. deltaRelative This second coordinate system addresses this exact issue, by being defined using the start/end positions. The coordinates express a percentage of the distance between the start and end positions.
39. pathRelative This last coordinate system is defined as relative to the straight path between the start and end states
40. <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/testImage1"> <Layout app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="1.0" motion:layout_height="50dp" motion:layout_width="50dp" /> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="@color/colorPrimaryDark" /> </Constraint> <Constraint android:id="@+id/testImage2"> <Layout app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="1.0" app:layout_marginStart="50dp" motion:layout_height="50dp" motion:layout_width="50dp" /> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="@color/colorPrimaryDark" /> </Constraint> </ConstraintSet> start
41. end <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/testImage1"> <Layout app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.0" motion:layout_height="50dp" motion:layout_width="50dp" /> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="@color/colorAccent" /> <Transform android:rotation="-75" /> </Constraint> <Constraint android:id="@id/testImage2"> <Layout app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.0" motion:layout_height="50dp" motion:layout_width="50dp" /> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="@color/colorAccent" /> <Transform android:rotation="55" /> </Constraint> </ConstraintSet>
42. start vc end <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/testImage1"> <Layout app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="1.0" motion:layout_height="50dp" motion:layout_width="50dp" /> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="@color/colorPrimaryDark" /> </Constraint> <Constraint android:id="@+id/testImage2"> <Layout app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="1.0" app:layout_marginStart="50dp" motion:layout_height="50dp" motion:layout_width="50dp" /> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="@color/colorPrimaryDark" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/testImage1"> <Layout app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.0" motion:layout_height="50dp" motion:layout_width="50dp" /> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="@color/colorAccent" /> <Transform android:rotation="-75" /> </Constraint> <Constraint android:id="@id/testImage2"> <Layout app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.0" motion:layout_height="50dp" motion:layout_width="50dp" /> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="@color/colorAccent" /> <Transform android:rotation="55" /> </Constraint> </ConstraintSet>
44. That's all?
45. Motion Layout versions
46. Thanks!!!