How to Motion Editor - Report from Android Dev Summit 2019

Transcript

1. How to Motion Editor Report from Android Dev Summit 2019 @mochico
2. About me mochico（@_mochicon_） Android / Java / Kotlin Techbooster / 技術書典
3. Memory of Android Dev Summit 2019
4. What's New in Android Studio Design Tools https://youtu.be/vqDwSK5t7Hk?t=1172
5. What is Motion Editor
6. What is the MotionLayout Subclass of ConstraintLayout Define motions by XML Included in ConstraintLayout2.0
7. How to use Motion Editor
8. Prepare to use Motion Editor Android Studio 4.0+ implementation ‘androidx.constraintlayout:constraintlayout:2.0.0-beta3' classpath 'com.android.tools.build:gradle:4.0.0-alpha03'
10. layout.xml <androidx.constraintlayout.motion.widget.MotionLayout 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" app:layoutDescription="@xml/fragment_first_scene" tools:context=".FirstFragment">
11. fragment_first_scene.xml <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="1000"> <KeyFrameSet> </KeyFrameSet> </Transition> <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> </ConstraintSet> </MotionScene>
12. Motion Scene
14. start to end
16. Action Icons Create ConstraintSet Create Transition Create Handler
17. Create from Action Icons
18. Create Handler <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000"> <OnClick motion:targetId="@+id/imageButton" /> </Transition>
20. KeyFrames KeyPosition KeyAttribute KeyTrigger KeyCycle KeyTimeCycle
21. KeyCycle <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000"> <KeyFrameSet> <KeyCycle motion:motionTarget="@+id/imageButton" motion:framePosition="0" motion:wavePeriod="1" android:scaleX="0.3" motion:waveOffset="1" />
22. Selection Panel
24. Attributes Select Transition Select KeyFrame
25. demo (if I can)
26. Wrap up Motion Editor Cool visualization for KeyFrames Not for CoordinatorLayout, DrawerLayout etc Easy to add properties for animation as XML AS4.0 still canary, Motion Editor still beta
27. References What's New in Android Studio Design Tools (Android Dev Summit '19) - YouTube : https:// www.youtube.com/watch?v=vqDwSK5t7Hk Defining motion paths in MotionLayout - Google Developers - Medium : https://medium.com/ google-developers/defining-motion-paths-in-motionlayout-6095b874d37 Manage motion and widget animation with MotionLayout : https://developer.android.com/ training/constraint-layout/motionlayout googlearchive/android-ConstraintLayoutExamples: Migrated: : https://github.com/googlearchive/ android-ConstraintLayoutExamples Animation with MotionLayout : https://codelabs.developers.google.com/codelabs/motion- layout/#0 DroidKaigi 2019 - Deep dive into MotionLayout / thagikura, John Hoford, Nicolas Roard - YouTube : https://www.youtube.com/watch?v=r8cYDlBOPaA Thank you!