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

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

Rebecca Franks

April 23, 2019
Tweet

More Decks by Rebecca Franks

Other Decks in Programming

Transcript

  1. Hi Android Developer @ Over Google Developer Expert in Android

    @riggaroo riggaroo.co.za I’m Rebecca Franks "
  2. 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
  3. All Kinds of Animations ✨ • AnimatedVectorDrawables • Shape Shifter

    • Property Animations • Custom View Animations • Physics-based Animations • MotionLayout
  4. AnimatedVectorDrawable • VectorDrawable and AnimatorSet / ObjectAnimator • VectorDrawable: Scalable,

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

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

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

    the icons up logically in Sketch
  8. 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() }
  9. 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() }
  10. 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() }
  11. Lottie • Useful for Cross platform complex Animations • Created

    by Airbnb • Use AfterEffects & export using Bodymovin’ • setProgress() • Download on demand • lottiefiles.com
  12. ViewPropertyAnimator • Animate specific, common properties on a view •

    Fire and Forget • User-friendly API to use • More efficient when doing multiple animations at once
  13. Custom View Animations • Built in animations just don’t cut

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

    animation • Create animations with ValueAnimator or ObjectAnimator
  15. 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()
  16. 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() } }
  17. 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
  18. 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
  19. 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 } }
  20. Spring Animation - KTX ✨ springAnimationOf(::setDropperX, ::getDropperX, point.x).apply { spring.stiffness

    = SpringForce.STIFFNESS_MEDIUM spring.dampingRatio = SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY start() }
  21. MotionLayout • Subclass of ConstraintLayout • Complex UI element animations

    • Gesture driven UI changes • Useful for transitions between layout states • Defined in XML
  22. <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"
  23. <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>
  24. MotionLayout - KeyFrames • Specify certain animations at certain time

    within complex animation Start state End state framePosition = 0 100 60 View is fully visible
  25. Recap • AVDs • Shape Shifter • Lottie • Property

    Animations • Custom View Animations • MotionLayout