Amazing Clock ⏰ animation with Jetpack Compose (Part 3)- optimisation + adding some 🌈colours

Blog Infos

Author

Mikhail Kulaha

Published

16. March 2023

Topics

Jetpack Compose

Author

Mikhail Kulaha

Published

16. March 2023

Topics

Jetpack Compose

In this series of articles we will only try to recreate this amazing clock animation, but actually improve it!

Clock animation with a little bit of colours

This is a third part of our animation series. Part 1 is here, Part 2 is here

TLDR:

– The source code of the final version of this animation could be found here.

– We have two different approaches to recreate the same animation — one by using parallel threads and another by using a little bit of math.

So far in Part 1 and in Part 2 we managed to :

Create an endless rotating animation
Draw an clock hand which shrinks first 12h and then extends back during the following 12h
Draw 12 dots which disappear and appear back when necessary
Create dots assemble animation
Create 12 parallel disassemble animations.

In this Part 3 we will:

Recreate the same animation by using a single formula for replacing 12 threads for spreading out animation.
Change shape to the rounded edges and add some 🌈 colours 🔥
Stop an endless animation upon request

Step 6: Single animation

In the previous part 2 we came up with an algorithm which required to have 12 parallel animations for each of the spreading-out dots.

As you already guessed that was not optimal. We actually can replace it with a single formula and do not need to create separate threads. We know that animation starts every hour. And based on the current hour it animates from the tip of the arrow to the outer edge of the circle by using this formula

val positionY = halfStroke + stepHeight * it * 
    (1 - disassembleAnimations[it].value)

Where disassembleAnimations[it].value is an animation value from 0 to 1. It’s calculated based on the animation value, which starts every hour with appropriate easing and duration. That’s the part which we want to change.

The basic animation

We might imagine the movement of the dots with this graph.

Dots are animated from 0 to 1 starting and ending every hour. Every 30 degrees a new hour starts. That behaviour might be easily described with a linear interpolation formula.

    // currentDot is an index of the dot. 
val startAngle = currentDot * 30f
val currentDeg = (animationAngle - startAngle).coerceIn(0f, 30f)
currentDeg/30f

Let’s improve our code with this formula. Instead of using parallel animations and channels, we’ll just create 12 dot positions.

val dotsPositions = remember(animationAngle) {
        List(12) { currentDot ->
            val startAngle = currentDot * 30f
            val currentDeg = (animationAngle - startAngle).coerceIn(0f, 30f)
            currentDeg/30f
        }
}

And will use these positions instead of disassembleAnimations values

hours.forEach {
    if (!dotsVisibility[it]) return@forEach
        val degree = it * 30f
            rotate(degree) {
                val positionY = halfStroke +
                        stepHeight * it * (1 - dotsPositions[it])
...
     }
}

Improving animation

As we’ve seen from the initial animation, dots are not really following this pattern. They might end the transition when another one has already started.

So we have to look for something like this

Good news is that it’ll not require a lot of changes. Starting points are the same. Now we just can’t relate to the ending point every 30 degrees. Instead we have to use 45 degrees or more as we would want.

For that we’ll introduce a new variable degreeLimit and rewrite our formula.

...   
 val degreeLimit = 45f
 // currentDot is an index of the dot. 
 val startAngle = currentDot * 30f
 val currentDeg = (animationAngle - startAngle).coerceIn(0f, degreeLimit)
 currentDeg/degreeLimit

And that’s what we will see. Amazing!

“But it’s still not exactly the same! In the original animation it has this nice and smooth touch in the end !” — you might say. And you will be right.

We actually should have something like this.

We have a fast start, but then slow down at the end. Actually that .. looks exactly like a classic bezier curve.

Fortunately Compose Animation framework has exactly what we need for that! Easing!

While creating animation specs, we add an Easing parameter to it. In animation it usually set up like this

animation = tween(duration, easing = LinearEasing)

When we look at the Easing interface, we’ll find a single method transform, which accepts a fraction between 0 and 1, and returns the same 0..1 fraction with applied transformation.

fun interface Easing {
    fun transform(fraction: Float): Float
}

	...
	Column(
	verticalArrangement = Arrangement.Center,
	horizontalAlignment = Alignment.CenterHorizontally
	) {
	val size = 300.dp
	var progress by remember { mutableStateOf(0f) }
	var animationAngle by remember { mutableStateOf(0f) }
	Box(
	modifier = Modifier
	.size(size)
	.background(Color.Black)
	) {
	ClockAnimation(animationAngle)
	}
	Text("Control animation with a slider!")
	Slider(
	modifier = Modifier.padding(16.dp),
	value = progress,
	onValueChange = {
	progress = it
	animationAngle = it * 720f
	}
	)
	} ...
	}

	@Composable
	fun ClockAnimation(animationAngle: Float) {
	…

	// Rotation of the gradient
	rotate(animationAngle / 2, pivot = center) {
	drawRect(
	Brush.linearGradient(
	colors = listOf(
	Color.Red, Color.Yellow, Color.Green, Color.Blue, Color.Magenta
	)
	),
	blendMode = BlendMode.DstAtop
	)
	}