You can create interesting effects by allowing objects to animate between layout positions. Flexalon provides three components to do animations, and you can create your own by implementing the FlexalonTransformUpdater interface.
Curve Animator
The Curve Animator animates objects along specified curve. The curve is restarted each time the layout results changes. This is ideal for scenarios in which the layout results do not change often.
In this drag and drop example, the squares are positioned in a flexible layout. A drag-drop script (included in the samples) handles mouse input to drag the selected object and swap its position in the layout. Each square has a Curve Animator, which ensures the swapping happens smoothly.
| Animate In World Space | Determines if the object should be animated in world space or local space. Use local space if the parent is moving or animating and you want the parent and child to stick together. |
| Curve | The curve to apply. Should begin at 0 and end at 1. |
| Animate Position | Determines if the position should be animated. |
| Animate Rotation | Determines if the rotation should be animated. |
| Animate Scale | Determines if the scale should be animated. |
Lerp Animator
The lerp animator constantly performs a linear interpolation between the object's current position and its layout position. This is useful if the layout position is continuously changing.
In this example, each block uses a Flexalon Constraint to position itself on top of the one beneath it. When the user drags the white block, it cause the one above to follow, which causes the one above that to follow, and so on.
Since we are constantly changing the position of the white block, a Curve Animator would not work well, as the curve would have to restart on each frame. Instead, each block has a Lerp Animator, which animates the blocks smoothly, increasing their speed as needed when the blocks get farther away.
| Animate In World Space | Determines if the object should be animated in world space or local space. Use local space if the parent is moving or animating and you want the parent and child to stick together. |
| Interpolation Speed | Amount the object should be interpolated towards the target at each frame. This value is multiplied by Time.deltaTime. |
| Animate Position | Determines if the position should be animated. |
| Animate Rotation | Determines if the rotation should be animated. |
| Animate Scale | Determines if the scale should be animated. |
Rigid Body Animator
If you add a Rigid Body to an object which is managed by Flexalon, then the physics system will compete with Flexalon for control over the object's position and rotation. Adding a Rigid Body animator will resolve this by applying forces to the rigid body component instead of changing the transform directly.
In this example, the tiles and chess pieces are all positioned with grid layouts and all have Rigid Body Animators. When the bowling ball disturbes their positions, the animators use forces to push the objects back into their layout positions.
| Position Force | How much force should be applied each frame to move the object to the layout position. |
| Rotation Force | How much force should be applied each frame to rotation the object to the layout rotation. |
| Scale Interpolation Speed | Amount the object's scale should be interpolated towards the layout size at each frame. This value is multiplied by Time.deltaTime. |
Animating Layouts
You can also create interesting motions by animating different layout properties using standard Unity animators. For example, you can animate the Start At property of the curve layout to move objects along the curve. Learn more about using standard Unity animators.
In this example, we have a separate object for each letter positioned aloing a Curve Layout. A Unity Animator is configured to modify the curve layout's 'Start At' property over time.