README.md

So, I've decided to improve my animations.

Compose Strikethrough Icon

It's basically a copy-paste from a great article of Mark Allison: Compose: Strikethru Animation

Pro-tips:

If you want to draw on a Canvas as in good old days - DrawScope is you friend. Also, an animation progress should be a lambda, not a state -- more details on this in the article.

Compose Pager

Pro-tips:

I've implemented such behavior few years ago with RecyclerView. Compose code take much less space. But it's really hard to find out, how to do it with compose. Pager from accompanist is used. And there is calculateCurrentOffsetForPage, that speaks for itself.

Biathlon target

Pro-tips:

Use AnimatorSet to chain animations

    private val animations = mutableListOf<ValueAnimator>()
    private val animatorSet = AnimatorSet()

    private fun startAnimation() {
        val list = animations as List<Animator>?
        animatorSet.playSequentially(list)
        animatorSet.start()
    }

And here is the second one, could be loading indicator for flights booking app. Try it, in real life it looks smooth, somehow converting to GIF makes it uglier.

Flight

Pro-tips:

To tint bitmap but keep transparent background - use PorterDuffColorFilter

In the same time, if you don't want to see anything (line in this case) behind transparent background - use PorterDuffXfermode

And, don't forget to set software layer type to your view, in other case PorterDuffXfermode will make background black.

    private val planeBitmap: Bitmap
    private val planePaint = Paint()
    //...
    init {
        planeBitmap = BitmapFactory.decodeResource(resources, R.drawable.airplane_white_48dp)
        planePaint.colorFilter = PorterDuffColorFilter(color, PorterDuff.Mode.SRC_IN)
        planePaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC)
        setLayerType(LAYER_TYPE_SOFTWARE, null)
    }

Read more about PorterDuff.Mode

I've found next animation on uplabs.com, Roy Tan implemented it with CSS and JS, I've decided to try animated vector drawable.

Checkbox loader

Further reading:

Whole work could be done in a single xml file, you need kotlin (java) only to start animation. Read more: Vector drawables overview, AnimatedVectorDrawable

This example was inspired by Nick Butcher's series on vector assets in Android.

Progress Ring

Pro-tips:

When you are using PorterDuff, everything, what is already on a canvas, is considered as destination. To separate progress background and use only progress itself as destination (e.g. as mask for a gradient), one could use Canvas.saveLayer() and canvas.restore

Glow effect is reachable simply with Paint.setShadowLayer()

Further reading:

This example is compilation of A glowing progress ring with rounded ends for Android and this answer on SO