ComplexAnimations

Almost every 2D animation is built from five primitive transforms. Drag the controls below — this single shape is doing everything a UI animation ever does.

On Android you rarely write the math — you animate a property and the framework interpolates it:

ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    duration = 1000
    start()
}

But a single property only gets you so far. To compose translate, scale and rotate together, you animate a matrix and let a MatrixEvaluator blend between the start and end:

val target = Matrix().apply {
    postTranslate(100f, 100f)
    postScale(1.2f, 1.2f)
}

ObjectAnimator.ofObject(
    view,
    "animationMatrix",
    MatrixEvaluator(),
    view.animationMatrix ?: Matrix(),
    target,
).apply {
    duration = 1000
    start()
}

So… how does a matrix actually move a point?

Each transform is a 3×3 matrix; applying it is one multiply against a point written as [x, y, 1]. Pick a transform and drag the point — the matrix and the result update live.

Order matters

Matrix multiplication is not commutative. Translate × Scale is not the same as Scale × Translate — the second scales your offset too. Watch the same point reach two different homes:

Interpolators give motion its feel

A transform tells you where; an interpolator tells you how it gets there. The same move feels mechanical as a straight line and lively with an overshoot. Watch four dots race the same distance under four different curves:

1. 1
   Snapshot the view into a bitmap.
2. 2
   Split that bitmap into one particle per Nth pixel.
3. 3
   Animate every particle independently until it dies.

A particle is tiny — just where it started, its color, and a few motion parameters. It exposes one method: advance yourself by deltaTime, and report whether you're still alive.

data class Particle(
    val initialX: Int,
    val initialY: Int,
    val color: Int,
    val lifeTime: Long = 2000,
    val initialRadius: Float = 6f,
    val velocity: Float = 25f,
    val translationX: Float = 250f,
    val translationY: Float = 250f,
    val initialAlpha: Int = Color.alpha(color),
) {
    var x = initialX.toFloat()
    var y = initialY.toFloat()
    var r = initialRadius
    var alpha = initialAlpha
    private var time = 0f

    fun update(deltaTime: Float): Boolean = TODO()
}

Generating them is a double loop over the bitmap; drawing them is a loop over the list. Stepping by perPx pixels keeps the particle count sane.

// 1 — snapshot the view into a bitmap
fun View.takePicture(): Bitmap =
    Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
        .also { draw(Canvas(it)) }

// 2 — split that bitmap into one particle per Nth pixel
fun generateParticles(bitmap: Bitmap, perPx: Int = 6) = buildList {
    for (x in 0 until bitmap.width step perPx)
        for (y in 0 until bitmap.height step perPx)
            add(Particle(x, y, color = bitmap.getPixel(x, y)))
}

// 3 — draw every living particle, each frame
fun draw(canvas: Canvas, paint: Paint, deltaTime: Float) {
    for (p in particles) {
        if (p.update(deltaTime)) {
            paint.color = p.color
            paint.alpha = p.alpha
            canvas.drawCircle(p.x, p.y, p.r, paint)
        }
    }
}

The update function — the whole effect, really

Each particle pushes outward from the centre (so the edges fly faster than the middle), gets a parabolic gravity nudge, then shrinks and fades as its life runs out:

fun update(deltaTime: Float): Boolean {
    time += deltaTime
    val fraction = time / lifeTime
    if (fraction >= 1f) return false   // particle has died

    // spread outward, relative to each particle's distance from center
    x = initialX + (initialX - centerX) / centerX * translationX * fraction
    y = initialY + (initialY - centerY) / centerY * translationY * fraction

    // a touch of gravity: rise, then fall
    y -= (fraction * velocity).pow(2f)

    // shrink and fade as it dies
    r = max(0.5f, initialRadius * (1f - fraction))
    alpha = (initialAlpha * min(1.2f - fraction, 1f)).toInt()
    return true
}

With uniform values it reads like a grid exploding. Add the randomness from the talk — varied lifetimes, radii, velocities, and a noise-driven sideways drift biased 75% one way — and it finally looks like dust:

data class Particle(
    // …
    val lifeTime: Long = 1200L + (0..800).random(),
    val initialRadius: Float = 6f / (1..4).random(),
    val velocity: Float = 15f + (0..20).random(),
    val translationX: Float = 250f + (0..200).random(),
    val translationY: Float = 150f + (0..200).random(),
    val initialAlpha: Int = min(Color.alpha(color), (76..255).random()),
)

// …and inside update(), let noise wobble the path:
y -= noiseFunction(fraction)
x += noiseFunction(fraction) *
    arrayOf(-1f, 1f, 1f, 1f).random()   // bias 75% one way

A GPU runs your code in parallel across every vertex and every pixel. Two small programs — shaders — do the work:

A circle, with no circle-drawing

We render each particle as a square point sprite, then carve a circle out of it in the fragment shader. gl_PointCoord runs 0→1 across the sprite; remap it to −1→1 and discard any pixel outside the unit circle. Drag to scale the sprite and watch the discarded corners:

// gl_PointCoord runs [0, 1] across the point sprite
vec2 coord = 2.0 * gl_PointCoord - 1.0;   // remap to [-1, 1]

// outside the unit circle? throw the pixel away
if (dot(coord, coord) > 1.0) discard;

gl_FragColor = v_color;

That single discard is the whole trick — no curves, no anti-aliasing cost, just throwing away corner pixels. Multiply by tens of thousands of points running in parallel and the effect that murdered the Canvas now runs effortlessly.

And in Jetpack Compose, it's one modifier

All of that — capture, particle generation, GPU rendering — collapses into a single modifier. Tap the image, it turns to dust:

@Composable
fun MainScreen() {
    val scope = rememberCoroutineScope()
    val thanos = rememberThanosEffect()
    val context = LocalContext.current

    Box {
        if (!thanos.hasEffectStarted()) {
            Image(
                painter = painterResource(R.drawable.img),
                contentDescription = null,
                modifier = Modifier
                    .thanosEffect(thanos)
                    .clickable {
                        scope.launch { thanos.start(context) }
                    },
            )
        }
    }
}

Take it further

Source & further reading