Skip to main content

​
Overview

RiveAlignment is an enumeration that specifies how a Rive animation should be positioned within its container. It works in conjunction with RiveFit to control both sizing and positioning.

​
Definition

typedef NS_ENUM(NSInteger, RiveAlignment) {
    topLeft,
    topCenter,
    topRight,
    centerLeft,
    center,
    centerRight,
    bottomLeft,
    bottomCenter,
    bottomRight
}

​
Cases

​
topLeft

Aligns the animation to the top-left corner of the container.

​
topCenter

Aligns the animation to the top-center of the container.

​
topRight

Aligns the animation to the top-right corner of the container.

​
centerLeft

Aligns the animation to the center-left of the container.

​
center

Aligns the animation to the center of the container. This is the default alignment.

​
centerRight

Aligns the animation to the center-right of the container.

​
bottomLeft

Aligns the animation to the bottom-left corner of the container.

​
bottomCenter

Aligns the animation to the bottom-center of the container.

​
bottomRight

Aligns the animation to the bottom-right corner of the container.

​
Usage

// UIKit with RiveViewModel
let viewModel = RiveViewModel(
    fileName: "animation",
    fit: .contain,
    alignment: .center
)

// SwiftUI with RiveViewModel
RiveViewModel(fileName: "animation").alignment = .topLeft

// Changing alignment dynamically
viewModel.alignment = .bottomRight

​
Usage with RiveRenderer

let renderer = RiveRenderer(context: context)
renderer.align(
    with: containerRect,
    withContentRect: contentRect,
    withAlignment: .center,
    withFit: .contain
)
  • RiveFit - Controls how the animation is scaled within its container
  • RiveViewModel - View model that uses RiveAlignment for rendering configuration
  • RiveView - View that uses alignment for rendering

Build docs developers (and LLMs) love

Get started for freeTalk to us