Earlier than Compose, altering the anchoring level of a rotation transformation was no huge deal. As an illustration, RotateAnimation helps you to change the pivot immediately in its constructor:
public RotateAnimation (
float fromDegrees,
float toDegrees,
float pivotX,
float pivotY
)
With Compose, the rotate technique doesn’t allow you to change its pivot, nor every other seemingly associated modifiers. Till you discover it: transformOrigin.
It issues first to know that the entire modifier transformation strategies wrap layer operations on a composable. The rotate technique isn’t any stranger to that:
@Secure
enjoyable Modifier.rotate(levels: Float) =
if (levels != 0f) graphicsLayer(rotationZ = levels) else this
It modifies the layer’s rotationZ property with the given angle. This hints to us that shifting the pivot would come from modifying a graphicLayer property.
The graphicLayer modifier has a transformOrigin property that defaults to TransformOrigin.Middle. Should you look nearer at its implementation, it takes two attributes: pivotFractionX and pivotFractionY. By altering the origin, we will orient it to our nail location.
Given the nail place, which means heart horizontally and practically on the prime of the y-axis. Then we apply our rotation immediately on the rotationZ attribute.
It produces the next impact:
Precisely what we needed to do! What about if the ingredient is already rotated as we might see within the introductory animation.
We’d first have to rotate our Swing composable:
Discover the Field’s alignment has modified to TopStart.
We’ve additionally adjusted our transformation origin as a result of we’ve modified our referential by rotating the Field.
It provides the next animation:
