Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to Motion Editor - Report from Android Dev Summit 2019

November 15, 2019

How to Motion Editor - Report from Android Dev Summit 2019


November 15, 2019

More Decks by mochico

Other Decks in Technology


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

  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!