In a World of Pure Android Animation 🍭🍫

In a World of Pure Android Animation 🍭🍫

Have you dreamed of deliciously sweet animations in your app but have no idea where to start? 🍫 What about creating some delightful UI treats to keep your users intrigued and wanting to discover more? 🍦 Join Rebecca on this journey into a World of Pure Android Animation ✨. From creating custom view animations on a Canvas to using MotionLayout to create complex layout animations, there is something for everyone. We will also see how to create your own AnimatedVectorDrawable using Shape Shifter. No golden ticket required.

Rebecca is an Android Engineer from South Africa. She is a Google Developer Expert in Android and loves helping other developers learn new things. During the day, she works for a company called Over, where she helps to contribute to the graphic design app on a day to day basis. She loves travelling and baking.

Links:
https://bit.ly/animation-ex
https://bit.ly/cl-samples
https://proandroiddev.com/android-bring-life-to-your-custom-view-8604ab3967b3
https://android-developers.googleblog.com/2011/05/introducing-viewpropertyanimator.html
https://twitter.com/chrisbanes/status/1030365248694312960
https://youtu.be/N_x7SV3I3P0
https://medium.com/s23nyc-tech/geometric-android-animations-using-the-canvas-dd687c43f3f4

2a37bf1e025cc1523124774c760df91a?s=128

Rebecca Franks

April 23, 2019
Tweet

Transcript

  1. None
  2. None
  3. Hi Android Developer @ Over Google Developer Expert in Android

    @riggaroo riggaroo.co.za I’m Rebecca Franks "
  4. JellyToolbar https://github.com/Yalantis/JellyToolbar Alexio Mota & Nick Butcher https://twitter.com/alexiomota TiVi -

    Chris Banes https://github.com/chrisbanes/tivi Examples of Animations Android Dev Summit 2018 App
  5. But how?

  6. None
  7. All Kinds of Animations ✨ • AnimatedVectorDrawables • Shape Shifter

    • Property Animations • Custom View Animations • Physics-based Animations • MotionLayout
  8. Sample App - Github bit.ly/animation-ex

  9. None
  10. AnimatedVectorDrawable • VectorDrawable and AnimatorSet / ObjectAnimator • VectorDrawable: Scalable,

    density-independent asset • Represented by paths • Subset of SVG spec • Fire and forget animation
  11. None
  12. None
  13. Shape Shifter • Create Animations for Android, iOS and Web

    • Animate pathData, alpha, color, strokeWidth • Made by Alex Lockwood
  14. None
  15. Step 1 : Choose/Make your icons Step 2 : Import

    them into Shape Shifter Step 3 : Animate pathData between them Step 4 : Magic?
  16. Step 1 : Choose your icons Might need to split

    the icons up logically in Sketch
  17. Step 2 : Import into Shape Shifter

  18. Step 3 : Animate pathData

  19. (Maybe) Step 4 : Pair sub paths

  20. (Maybe) Step 5 : Correct points

  21. Final Animation

  22. AnimatedVectorDrawable • Export from Shape Shifter as AVD file

  23. val drawable = AppCompatResources.getDrawable(this, R.drawable.avd_center_justify) imageViewAvd.setImageDrawable(drawable) AnimatedVectorDrawableCompat.registerAnimationCallback(drawable, object : Animatable2Compat.AnimationCallback()

    { override fun onAnimationEnd(drawable: Drawable?) { Toast.makeText(applicationContext, "Animation finished", Toast.LENGTH_LONG).show() } }) imageViewAvd.setOnClickListener { (drawable as Animatable).start() }
  24. val drawable = AppCompatResources.getDrawable(this, R.drawable.avd_center_justify) imageViewAvd.setImageDrawable(drawable) AnimatedVectorDrawableCompat.registerAnimationCallback(drawable, object : Animatable2Compat.AnimationCallback()

    { override fun onAnimationEnd(drawable: Drawable?) { Toast.makeText(applicationContext, "Animation finished", Toast.LENGTH_LONG).show() } }) imageViewAvd.setOnClickListener { (drawable as Animatable).start() }
  25. val drawable = AppCompatResources.getDrawable(this, R.drawable.avd_center_justify) imageViewAvd.setImageDrawable(drawable) AnimatedVectorDrawableCompat.registerAnimationCallback(drawable, object : Animatable2Compat.AnimationCallback()

    { override fun onAnimationEnd(drawable: Drawable?) { Toast.makeText(applicationContext, "Animation finished", Toast.LENGTH_LONG).show() } }) imageViewAvd.setOnClickListener { (drawable as Animatable).start() }
  26. None
  27. None
  28. Lottie • Useful for Cross platform complex Animations • Created

    by Airbnb • Use AfterEffects & export using Bodymovin’ • setProgress() • Download on demand • lottiefiles.com
  29. Lottie <com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view" android:layout_width="match_parent" android:layout_height="match_parent" app:lottie_rawRes="@raw/happy_birthday" app:lottie_loop="true" app:lottie_autoPlay="true" />

  30. None
  31. ViewPropertyAnimator • Animate specific, common properties on a view •

    Fire and Forget • User-friendly API to use • More efficient when doing multiple animations at once
  32. Property Animations imageView .animate() .alpha(0f) .rotationBy(360f) .scaleX(0f) .scaleY(0f) .setDuration(2000) .withEndAction

    { // Animation Finished } .start()
  33. None
  34. None
  35. Custom View Animations • Built in animations just don’t cut

    it • Custom properties on a view • Color, radius, shadow, matrix
  36. PropertyValuesHolder • Holds info about a property & values during

    animation • Create animations with ValueAnimator or ObjectAnimator
  37. fun animateSizeColorChange(toSize: Float, @ColorInt toColor: Int) { val propColor =

    PropertyValuesHolder.ofInt(PROP_TEXT_COLOR, textColor, toColor) val propTextSize = PropertyValuesHolder.ofFloat(PROP_TEXT_SIZE, size, toSize) ValueAnimator.ofPropertyValuesHolder(propColor, propertyTextSize).apply { setEvaluator(ArgbEvaluator()) duration = 500 addUpdateListener { animation -> val textSize = animation.getAnimatedValue(PROP_TEXT_SIZE) as Float val textColor = animation.getAnimatedValue(PROP_TEXT_COLOR) as Int setTextSizeColor(textSize, textColor) } start()
  38. fun animateSizeColorChange(toSize: Float, @ColorInt toColor: Int) { val propColor =

    PropertyValuesHolder.ofInt(PROP_TEXT_COLOR, textColor, toColor) val propTextSize = PropertyValuesHolder.ofFloat(PROP_TEXT_SIZE, size, toSize) ValueAnimator.ofPropertyValuesHolder(propColor, propertyTextSize).apply { setEvaluator(ArgbEvaluator()) duration = 500 addUpdateListener { animation -> val textSize = animation.getAnimatedValue(PROP_TEXT_SIZE) as Float val textColor = animation.getAnimatedValue(PROP_TEXT_COLOR) as Int setTextSizeColor(textSize, textColor) } start() } }
  39. None
  40. None
  41. None
  42. Physics-Based Animations / Dynamic Animations • Driven by force -

    ie gestures • More natural looking • Don’t specify duration • Can reconfigure and velocity is recalculated • SpringAnimation & FlingAnimation
  43. Fling Animation FlingAnimation(imageView, DynamicAnimation.TRANSLATION_Y) .apply { setStartVelocity(700f) // Pixels per

    second friction = 0.1f }.start() https://developer.android.com/guide/topics/graphics/fling-animation
  44. None
  45. Spring Animation

  46. Spring Animation private val floatPropertyAnimX = object : FloatPropertyCompat<ColorView>(PROPERTY_X) {

    override fun setValue(dropper: ColorView?, value: Float) { dropper?.setDropperX(value) } override fun getValue(dropper: ColorView?): Float { return dropper?.getDropperX() ?: 0f } }
  47. Spring Animation SpringAnimation(this, floatPropertyAnimX, point.x).apply { spring.stiffness = SpringForce.STIFFNESS_MEDIUM spring.dampingRatio

    = SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY start() }
  48. Spring Animation - KTX ✨ springAnimationOf(::setDropperX, ::getDropperX, point.x).apply { spring.stiffness

    = SpringForce.STIFFNESS_MEDIUM spring.dampingRatio = SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY start() }
  49. STIFFNESS_LOW STIFFNESS_MEDIUM STIFFNESS_HIGH

  50. DAMPING_RATIO_LOW_BOUNCY DAMPING_RATIO_MEDIUM_BOUNCY DAMPING_RATIO_HIGH_BOUNCY

  51. None
  52. MotionLayout • Subclass of ConstraintLayout • Complex UI element animations

    • Gesture driven UI changes • Useful for transitions between layout states • Defined in XML
  53. MotionLayout - Basic Example • dragUp on RecyclerView

  54. <MotionScene xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android"> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" app:duration="1000"> <OnSwipe app:touchAnchorId="@+id/recyclerViewStatus" app:touchAnchorSide="top"

    app:dragDirection="dragUp" /> </Transition>
  55. <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" app:duration="1000"> <OnSwipe app:touchAnchorId="@+id/recyclerViewStatus" app:touchAnchorSide="top" app:dragDirection="dragUp" /> </Transition>

    <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/background"> <PropertySet app:alpha="0"/> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/imageViewAvatar" android:layout_width="40dp"
  56. <Constraint android:id="@id/background"> <PropertySet app:alpha="0"/> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/imageViewAvatar"

    android:layout_width="40dp" android:layout_height="40dp" android:layout_marginTop="16dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="16dp"> </Constraint> <Constraint android:id="@id/background"> <PropertySet app:alpha="1"/> </Constraint> </ConstraintSet> </MotionScene>
  57. None
  58. MotionLayout - KeyFrames • Specify certain animations at certain time

    within complex animation Start state End state framePosition = 0 100 60 View is fully visible
  59. <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" app:interpolator="easeInOut" app:duration="2000"> <KeyFrameSet> <KeyAttribute android:alpha="1" app:framePosition="60" android:translationY="0dp"

    app:target=“@id/imageViewBannerMiddle”/> </KeyFrameSet> […]
  60. subscriptionMotionLayout.transitionToEnd()

  61. KeyFrames

  62. Examples • bit.ly/animation-ex • bit.ly/cl-samples

  63. Recap • AVDs • Shape Shifter • Lottie • Property

    Animations • Custom View Animations • MotionLayout
  64. There are other ways… • Transitions • TransitionManager • Activity

    Scenes • AnimatorSets • ….
  65. Spend time learning the available tools, so you can make

    some great animations ✨
  66. @riggaroo

  67. Resources • https://proandroiddev.com/android-bring-life-to-your-custom- view-8604ab3967b3 • https://android-developers.googleblog.com/2011/05/ introducing-viewpropertyanimator.html • https://twitter.com/chrisbanes/status/1030365248694312960

  68. Resources • https://youtu.be/N_x7SV3I3P0 • https://medium.com/s23nyc-tech/geometric-android- animations-using-the-canvas-dd687c43f3f4