$30 off During Our Annual Pro Sale. View Details »

How to Motion Editor - Report from Android Dev Summit 2019

mochico
November 15, 2019

How to Motion Editor - Report from Android Dev Summit 2019

mochico

November 15, 2019
Tweet

More Decks by mochico

Other Decks in Technology

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