Animating Path Vertices

Summary

This lesson explores how to animate individual path vertices and Bezier handles in Rive. Unlike other software where moving a point keys the entire path, Rive allows for independent keying of specific vertex properties like position, corner radius, handle angle, and handle length, which optimizes performance and file size.

Step by Step

1. 00:12
   Accessing Vertices

   Select a custom shape and double-click or open its path hierarchy to access individual vertices.
2. 00:20
   Keying Specific Properties

   Select a vertex to see its properties in the Inspector (e.g., Position, Corner Radius). Click the diamond icon to set a keyframe for that specific property.
3. 00:46
   Animating Bezier Handles

   For curved vertices (e.g., Mirrored), you can independently animate the handle angle and length to morph the shape.
4. 01:34
   Key All Vertices

   Use the "Key All Vertices" button in the Inspector if you want to capture the entire state of the path at once, which creates keyframes for every property of every vertex.
5. 01:55
   Optimizing Performance

   Avoid unnecessary keyframes. Keying only the required vertices keeps file sizes smaller and improves runtime performance.

Notes About Current Rive

• Granular Control: Rive's ability to key individual vertex properties (rather than the whole path) is a unique feature that offers more control and efficiency.
• Vertex Types: Remember that available properties change based on the vertex type (Straight vertices have Corner Radius, while Mirrored/Asymmetric vertices have Bezier handles).
• Performance Tip: Overusing "Key All Vertices" can significantly bloat your file size. Stick to keying only what moves whenever possible.