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

Transcript

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?
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
10. AnimatedVectorDrawable • VectorDrawable and AnimatorSet / ObjectAnimator • VectorDrawable: Scalable, density-independent asset • Represented by paths • Subset of SVG spec • Fire and forget animation
13. Shape Shifter • Create Animations for Android, iOS and Web • Animate pathData, alpha, color, strokeWidth • Made by Alex Lockwood
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() }
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" />
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()
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() } }
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
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
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>
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