How to Motion Editor - Report from Android Dev Summit 2019

Transcript

1. How to Motion Editor
   Report from Android Dev Summit 2019
   @mochico
   

   View Slide

2. About me
   mochico（@_mochicon_）
   Android / Java / Kotlin
   Techbooster / 技術書典
   

   View Slide

3. Memory of Android Dev Summit 2019
   

   View Slide

4. What's New in Android Studio Design Tools
   https://youtu.be/vqDwSK5t7Hk?t=1172
   

   View Slide

5. What is Motion Editor
   

   View Slide

6. What is the MotionLayout
   Subclass of ConstraintLayout
   Define motions by XML
   Included in ConstraintLayout2.0
   

   View Slide

7. How to use
   Motion Editor
   

   View Slide

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'
   

   View Slide

9. View Slide

10. layout.xml
    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">
    

    View Slide

11. fragment_first_scene.xml
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">
    motion:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@id/start"
    motion:duration="1000">
    
    
    
    
    
    
    
    
    

    View Slide

12. Motion Scene
    

    View Slide

13. View Slide

14. start to end
    

    View Slide

15. View Slide

16. Action Icons
    Create ConstraintSet
    Create Transition
    Create Handler
    

    View Slide

17. Create from Action Icons
    

    View Slide

18. Create Handler
    motion:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@id/start"
    motion:duration="1000">
    
    
    

    View Slide

19. View Slide

20. KeyFrames
    KeyPosition
    KeyAttribute
    KeyTrigger
    KeyCycle
    KeyTimeCycle
    

    View Slide

21. KeyCycle
    motion:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@id/start"
    motion:duration="1000">
    
    motion:motionTarget="@+id/imageButton"
    motion:framePosition="0"
    motion:wavePeriod="1"
    android:scaleX="0.3"
    motion:waveOffset="1" />
    

    View Slide

22. Selection Panel
    

    View Slide

23. View Slide

24. Attributes
    Select Transition
    Select KeyFrame
    

    View Slide

25. demo (if I can)
    

    View Slide

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
    

    View Slide

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!
    

    View Slide