Blog Infos
Author
Published
Topics
Published

Animations can be challenging. Especially if your designer asks you to implement an animation like this one 😱

 

Animation by Oleg Frolov

 

Decoupling animations

Sizing
Step 1: Implement Rotation of a clock hand
@Composable
fun ClockAnimation(duration: Int) {
val infiniteTransition = rememberInfiniteTransition()
// Creates a child animation of float type as a part of the [InfiniteTransition].
val clockAnimation by infiniteTransition.animateFloat(
initialValue = 0f,
targetValue = 720f,
animationSpec = infiniteRepeatable(
animation = tween(duration, easing = LinearEasing),
repeatMode = RepeatMode.Restart
)
)
}

Now we have to draw an clock hand and rotate it with this animation

var strokeWidth by remember { mutableStateOf(0f) }
Spacer(modifier = Modifier
.fillMaxSize()
// Set strokeWidth based on the size of the viewport
.onGloballyPositioned {
strokeWidth = (it.size.width / 24).toFloat()
}
.drawBehind {
val center = Offset(size.width / 2, size.height / 2)
val endOffset = Offset(size.width / 2, 0f)
// Rotate the line around the pivot point, which is the
// center of the screen. Rotation goes from 0 to 720 degrees
rotate(clockAnimation, pivot = center) {
drawLine(
color = Color.White,
start = center,
end = endOffset,
strokeWidth = strokeWidth,
)
}
}
)

And that’s how our animation will look so far:

 

Animation after Step 1

 

Step 2: Shrink and extend a Clock hand step by step

Job Offers

Job Offers

There are currently no vacancies.

OUR VIDEO RECOMMENDATION

, ,

Migrating to Jetpack Compose – an interop love story

Most of you are familiar with Jetpack Compose and its benefits. If you’re able to start anew and create a Compose-only app, you’re on the right track. But this talk might not be for you…
Watch Video

Migrating to Jetpack Compose - an interop love story

Simona Milanovic
Android DevRel Engineer for Jetpack Compose
Google

Migrating to Jetpack Compose - an interop love story

Simona Milanovic
Android DevRel Engin ...
Google

Migrating to Jetpack Compose - an interop love story

Simona Milanovic
Android DevRel Engineer f ...
Google

Jobs

val currentHour by remember(clockAnimation) {
        derivedStateOf { clockAnimation.toInt() / 30 }
    }

Then we write a function which calculates the length of the clock hand

//Function which calculates the length of the clock hand
private fun calculateClockHandLength(maxHeight: Float, currentHour: Int): Float {
val stepHeight = maxHeight / 12
// Height decreases first 360 deg, then increases again
return stepHeight * if (currentHour < 12) {
12 - 1 - currentHour
} else {
currentHour - 12
}
}

And then use it as the endOffset inside of the Spacer’s drawBehind

Spacer(...
.drawBehind {
...
val endOffset = Offset(
size.width / 2,
size.height / 2 - calculateClockHandLength( size.height / 2, currentHour)
)
...
rotate(animationAngle, pivot = center) {
drawLine(
color = Color.White,
start = center,
end = endOffset,
strokeWidth = strokeWidth,
)
}
...

And that’s how our animation will look like after step 2

Animation after Step 2

 

Step 3: Adding Dots
val hours: List<Int> = remember { List(12) { it } }
val dotsVisibility = remember(currentHour) {
hours.map { index ->
when {
index > currentHour -> false
index > currentHour - 12 -> true
else -> false
}
}
}
Spacer(...
.drawBehind {
...
hours.forEach {
if (!dotsVisibility[it]) return@forEach
val degree = it * 30f
rotate(degree) {
val start = Offset(size.width / 2, 0f)
val end = Offset(size.width / 2, strokeWidth)
drawLine(
color = Color.White,
start = start,
end = end,
strokeWidth = strokeWidth,
)
}
}
...
}
)

And that’s how our animation will look like after Step 3. Cool 😎, heh?🔥

 

Animation after Step 3

 

Summary

This article was previously published on proandroiddev.com

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
It’s one of the common UX across apps to provide swipe to dismiss so…
READ MORE
blog
In this part of our series on introducing Jetpack Compose into an existing project,…
READ MORE
blog
In the world of Jetpack Compose, where designing reusable and customizable UI components is…
READ MORE
blog

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu