Skip to content
Kapow
Esc
↑↓navigate↵open⌘Jpreview
On this page

Change: spin

The element turns full circles and settles when a value changes.

Spin turns the element around an axis and lands it exactly where it started. Use it for a toggle that flipped or an icon that confirms an action.

Usage

The sample turns a coin like a coin on a table each time the balance changes.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.jantursky.kapow.ChangeEffect
import com.jantursky.kapow.SpinAxis
import com.jantursky.kapow.SpinRate
import com.jantursky.kapow.changeEffect

@Composable
fun Coin(balance: Int) {
    Box(
        Modifier
            .size(48.dp)
            .background(Color(0xFFFFB547), CircleShape)
            .changeEffect(balance, ChangeEffect.spin(axis = SpinAxis.Y, rate = SpinRate.Fast)),
    )
}

Parameters

Parameter Default Description
axis SpinAxis.Y X flips top over bottom, Y turns like a coin on a table, Z turns like a wheel.
rate SpinRate.Default How fast the spin starts. SpinRate.Fast starts quicker.
turns null How many full turns a change makes. Null takes one for SpinRate.Default and two for SpinRate.Fast. Must be positive.
duration null How long the spin takes. Null lets a spring decide, which starts fast, overshoots and settles on its own. A duration replaces the spring with a plain animation along easing.
easing FastOutSlowInEasing The curve of the spin when there is a duration.
reverse false Spins the other way round.
pivot TransformOrigin.Center The point the element turns around, as fractions of its width and height.
cameraDistance 12.dp How far the viewer is from the element. Closer makes the turn on X and Y more dramatic. Must be positive.
shading 0.35f How much darker the element gets as it turns edge-on, from 0 (not at all) to 1. Z spins are never shaded.
overshoot 0.35f How far the spring swings past its end and back, from 0 (settles smoothly) to 0.95. It applies when there is no duration.

Reduced motion

The element does not rotate. It brightens briefly. With reducedMotion(ReducedMotionMode.EndState) nothing shows at all, since the effect ends at rest.

Notes

  • The spin ends at a rotation of 0 degrees, so the element is back in its normal pose.
  • A change while the element is still spinning adds a turn and speed instead of restarting.
  • Around X or Y the element darkens a little as it turns edge-on, so the turn reads as a solid card.
  • There is no cooldown.
  • The rotation is applied to the element’s layer, so it does not change layout. Neighbors do not move.

Live example

Was this page helpful?