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

Practical Animations with MotionLayout

Practical Animations with MotionLayout

MotionLayout is a new animation tool built into ConstraintLayout 2.0 that lets you easily create animations on Android. In this session, Layale will cover the basics of MotionLayout and how to get started with it using the Motion Editor in Android Studio to quickly add motion to your application!

3dd7fa1a14b226188b648df94d0462b9?s=128

Layale Matta

February 27, 2021
Tweet

Transcript

  1. Layale Matta Android Engineer, Neo Technologies Practical Animations with MotionLayout

    TECH(K)NOW DAY
  2. yalematta.dev TECH(K)NOW DAY Layale Matta [LAYÄL]

  3. Why Animations? TECH(K)NOW DAY

  4. We can use animations to: • Show changes • Draw

    attention • Build beautiful designs TECH(K)NOW DAY
  5. Get Started TECH(K)NOW DAY

  6. Get Started • MotionLayout • Motion Scene • Motion Editor

    • Demo TECH(K)NOW DAY
  7. So, what is MotionLayout? TECH(K)NOW DAY

  8. MotionLayout • Subclass of ConstraintLayout • Easily coordinate animations of

    multiple views • Complex animations driven by interactions • Seekable and reversible animations • Compatible back to API 14 TECH(K)NOW DAY
  9. What is Motion Editor? TECH(K)NOW DAY

  10. Motion Editor • New animation tool • Built into Android

    Studio 4.0 • Helps build, edit and preview animations TECH(K)NOW DAY
  11. d.android.com/training/constraint-layout/motionlayout TECH(K)NOW DAY AndroidStudio 4.1 ConstraintLayout-2.0.4

  12. dependencies { implementation "androidx.constraintlayout:constraintlayout:2.0.4" } Add gradle dependency

  13. <androidx.constraintlayout.widget.ConstraintLayout 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"> <ImageView android:id="@+id/iv_droid" android:layout_width="180dp" android:layout_height="180dp"

    android:src="@drawable/ic_droid" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
  14. <androidx.constraintlayout.widget.ConstraintLayout 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"> <ImageView android:id="@+id/iv_droid" android:layout_width="180dp" android:layout_height="180dp"

    android:src="@drawable/ic_droid" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
  15. None
  16. <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/activity_main_scene"> <ImageView android:id="@+id/iv_droid" android:layout_width="180dp" android:layout_height="180dp"

    android:src="@drawable/ic_droid" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.motion.widget.MotionLayout>
  17. <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/activity_main_scene"> <ImageView android:id="@+id/iv_droid" android:layout_width="180dp" android:layout_height="180dp"

    android:src="@drawable/ic_droid" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.motion.widget.MotionLayout>
  18. Motion Scene • XML file • Contains multiple states and

    transitions between them • Defines all animations for the scene • Can be defined programmatically TECH(K)NOW DAY
  19. <MotionScene> <Transition> <KeyFrameSet> <OnClick> <OnSwipe> <ConstraintSet> <Constraint> <Transform> <PropertySet> <Layout>

    <CustomAttribute> Components of a Motion Scene
  20. ConstraintSet TECH(K)NOW DAY

  21. ConstraintSet / State <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet

    android:id="@+id/end"> </ConstraintSet> </MotionScene>
  22. ... <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> </ConstraintSet> ... ConstraintSet /

    State
  23. ConstraintSet / State ... <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint

    android:id="@+id/iv_droid" android:layout_width="180dp" android:layout_height="180dp" motion:layout_constraintRight_toRightOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> ...
  24. ConstraintSet / State ... <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/iv_droid" android:layout_width="180dp" android:layout_height="180dp"

    motion:layout_constraintRight_toRightOf="parent" motion:layout_constraintTop_toTopOf="parent"> <Transform android:rotation="45" android:translationZ="20dp" android:rotationY="10"/> </Constraint> </ConstraintSet> ...
  25. Transition TECH(K)NOW DAY

  26. Transition <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"/> <ConstraintSet android:id="@+id/start">

    </ConstraintSet> <ConstraintSet android:id="@+id/end"> </ConstraintSet> </MotionScene>
  27. Transition ... <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000"/> <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet

    android:id="@+id/end"> <Constraint android:id="@+id/iv_droid" android:layout_width="180dp" android:layout_height="180dp" motion:layout_constraintRight_toRightOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> ...
  28. Transition Attributes TECH(K)NOW DAY android:id Name your transition transitionDisable Disable/Enable

    your transition pathMotionArc All layout movement in arcs autoTransition Automatically transition motionInterpolator Configure easing duration Time to go from start to end in ms staggered Sequentially execute individual transitions
  29. <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" motion:autoTransition="animateToEnd"/> ... </MotionScene>

    autoTransition
  30. <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" motion:autoTransition="animateToEnd" motion:motionInterpolator="bounce"> ...

    </MotionScene> motionInterpolator
  31. OnClick TECH(K)NOW DAY

  32. Launching a Transition TECH(K)NOW DAY Automatically autoTransition=”animateToEnd” Programatically ml.transitionTo(R.id.end) <OnClick/>

    <OnSwipe>
  33. <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"> <OnClick/> </Transition> ...

    </MotionScene> OnClick
  34. OnClick <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"> <OnClick motion:targetId="@+id/iv_droid"

    motion:clickAction="toggle"/> </Transition> ... </MotionScene>
  35. KeyFrameSet TECH(K)NOW DAY

  36. ... <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000"> <KeyFrameSet> <KeyAttribute motion:motionTarget="@+id/iv_heart" motion:framePosition="60" android:alpha="0"/>

    </KeyFrameSet> </Transition> ... KeyFrameSet
  37. ... <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000"> <KeyFrameSet> <KeyAttribute motion:motionTarget="@+id/iv_droid" motion:framePosition="60" android:alpha="0"/>

    </KeyFrameSet> </Transition> ... KeyFrameSet
  38. Motion Editor TECH(K)NOW DAY

  39. Learn More TECH(K)NOW DAY Documentation d.android.com/training/constraint-layout/motionlayout Codelab d.android.com/codelabs/motion-layout GitHub Samples

    github.com/android/views-widgets-samples/tree/master/ConstraintLayoutExamples