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'
9. None

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

13. None

14. start to end

15. None

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>

19. None

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

23. None

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!