Blog Infos
Author
Published
Topics
Published

Clock animation with a little bit of colours

Step 6: Single animation
val positionY = halfStroke + stepHeight * it * 
    (1 - disassembleAnimations[it].value)
The basic animation

Dots are animated from 0 to 1 . Every  a new hour starts. That behaviour might be easily described with a 

    // 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 

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

...   
 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!

animation = tween(duration, easing = LinearEasing)
fun interface Easing {
    fun transform(fraction: Float): Float
}

Job Offers

Job Offers


    Information Security Engineer

    MongoDB
    London, UK
    • Full Time
    apply now

    Developer Relations Engineer

    Embrace
    United States
    • Full Time
    apply now

    Android Team Lead

    Komoot
    Remote EMEA
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

,

Exploration of Touch & Input in Jetpack Compose

etpack Compose has a layered approach to user interaction handling, all the way from high-level onClick parameters to dealing directly with low-level touch input. In this talk we’ll cover all these levels, discussing composable parameters,…
Watch Video

Exploration of Touch & Input in Jetpack Compose

Jolanda Verhoef
Android Developer Relations Engineer
Google

Exploration of Touch & Input in Jetpack Compose

Jolanda Verhoef
Android Developer Re ...
Google

Exploration of Touch & Input in Jetpack Compose

Jolanda Verhoef
Android Developer Relatio ...
Google

Jobs

This method is exactly what we need for our case! We can just apply any easing on our 0..1 fraction.
Then our code will look like this

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

That’s how our animation will look! Exactly as we expected!

Final animation!

 

cubic-bezier.com

Step 7: Adding slider
...
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) {

Controlling animation with a slider

 

Step 8: Adding more colours 🌈!

Coloured version!

Rounding corners
drawLine(
    ...
    cap = StrokeCap.Round,
    ...
)

The problem is that StrokeCap.Round takes some extra space when drawn, so we have to take it into account. To fix that we have remove a   during drawing.

Difference between Butt and Round caps

// Instead of 
val start = Offset(size.width / 2, positionY — halfStroke)
// Remove halfStroke
val start = Offset(size.width / 2, positionY)
Colouring
// Set Blend mode as DstOut for underlying elements
drawLine(
...
    cap = StrokeCap.Round,
    blendMode = BlendMode.DstOut
)

For colouring we’ll use a Brush with . We will also  that gradient for making animation more interesting

// 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
)
}

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

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE
blog
Yes! You heard it right. We’ll try to understand the complete OTP (one time…
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