A layer’s rotation is defined in degrees between
# A rotated layer layer = new Layer size: 300 borderRadius: 30 backgroundColor: "#7DDD11" point: Align.center rotation: 45
You can use values higher than 360º in animations. This layer, for instance, gets rotated to 720º (360 x 2):
# After a delay of one second the layer will # rotate to 720º in 3 seconds’ time. layer.animate rotation: 360*2 options: delay: 1 time: 3
Note that the layer does not ‘rotate 720º’ but ‘rotates to 720º’. It was already turned 45º, so it ended up rotating 720 – 45 = 675 degrees, clockwise.
How do you rotate counter-clockwise? Simple: negative values.
rotation property is an alias for
rotationZ, because you’re actually rotating around the z-axis which goes through the layer.
With the properties for the other two axes,
rotationY, you can rotate in 3D space. You will also see perspective applied when you rotate around these axes.
Here’s an example that combines z-axis and y-axis rotation:
# rotate around the Z axis purpleSquare.animate rotation: 360 # and also around the Y axis purpleSquare.animate rotationY: 360
A layer will rotate around its center because that’s the default ‘origin’ for its ‘transformations.’ It will also grow or shrink from this point when you change its
scale. This ‘transform origin’ is sometimes also called the ‘anchor point.’
You can place this origin somewhere else, though. A higher
originX will place it more to the right, and a higher
originY will place it closer to the bottom of the layer. Both values can be between
1, so by default they’re in the middle:
This can be confusing, but the project below will hopefully make it more understandable. In it, you can change these properties and see the result.