--- title: Creating animation graphs with Reality Composer Pro and RealityKit framework: visionOS role: sampleCode role_heading: Sample Code platforms: [iOS 27.0+, iPadOS 27.0+, Mac Catalyst 27.0+, macOS 27.0+, visionOS 27.0+, xcode 27.0+] path: visionos/creating-animation-graphs-with-reality-composer-pro-and-realitykit --- # Creating animation graphs with Reality Composer Pro and RealityKit Animate RealityKit entities using blend spaces and state machines with the Animation Graph feature. ## Overview Overview This sample code project demonstrates how to create an AnimationGraphComponent inside Reality Composer Pro 3 to procedurally drive an owl’s animations using Swift. An animation graph is a data driven way to describe how an entity’s animations change over time. Animation graphs use simple parameters and conditions to sequence and blend animations in ways that can be complicated to manage by hand in code. This sample uses an AnimationGraphComponent to drive an owl’s pose based on parameters like the owl’s speed. note: For more details on navigating the Reality Composer Pro’s user interface, visit Working with the Animation Graph. Prepare your animations The sample authors its animation graph inside of Reality Composer Pro. Before preparing the animation graph, you import the model and animations you plan to use by either dragging and dropping the USD files into the Project Browser or by clicking the import button on the top left of the Project Browser tab and selecting your assets. The animations in this sample loop seamlessly. Adjust the repeat behavior of animations by selecting the imported asset in the project browser, then expand the Animation Settings drop-down menu, and change Repeat Mode to Repeat. Create an animation graph The sample creates an animation graph asset in the root of the Reality Composer Pro project named Owl Animation Graph. The animation graph uses the owl_skeldef and Owl Character imported assets for its Skeleton Definition and Preview Entity, respectively. The sample creates two input parameters for the Owl Animation Graph. First, moving is a Boolean parameter that changes the graph between a perched and flying state. Then, speed is a float parameter that controls a blend between an in-place hovering animation and a faster-moving flying animation. The Owl Animation Graph contains a Blend 1D node to drive the owl’s pose while it’s moving. The speed parameter of the graph controls the blending of two incoming animations. Two Animation Clip nodes, one for hover and one for fly, link into the blend node. Hover connects into the first input at position 0 within the blend space, and fly connects into the second input at position 1. The blend space node connects into a state machine node’s Moving input parameter. This parameter represents the animation that plays during the Moving state of that state machine. Another Animation Clip node for the perch animation connects into a Perched state on the state machine. The final output pin of the state machine connects to the Final Pose node of the animation graph and selects the blend space and perch animations based on the provided state machine. The Owl Animation Graph uses a state machine with two states, Moving and Perched, to determine its final pose. This sample configures the perch state to be the start state, and places a transition from perched to moving, which responds to a true moving state. Another transition from moving to perched uses the opposite condition. The two parameters speed and moving procedurally control which animation is playing for the owl. tip: To test out the graph, press play at the top of a Reality Composer Pro window, then modify the parameters and review the behavior in real time. Prepare an entity hierarchy This sample loads the world entity asset from the Reality Composer Pro project. Select the owl_model, add an AnimationGraphComponent, and assign the Owl Animation Graph component to it. note: You can only place AnimationGraphComponent on entities with a Skeleton component. To test changes within your app, export the world entity asset from Reality Composer Pro. Either export the entity directly using the context menu on the world asset, or by launching the app using the Run with Xcode workflow. For more information on Xcode linking and the Run with Xcode workflow, see Configuring the project workspace. Drive the animation graph from your application The AnimationGraphComponent reads the parameters to drive its state during runtime. The sample keeps track of the values for moving and speed on the ContentView, as seen below. The sample displays controls for these values on the window toolbar of the application. struct ContentView: View { @State var owl: Entity? @State var moving = false @State var speed: Float = 0.0 // ... @ViewBuilder var animationControls: some View { Toggle("Moving", isOn: $moving) Slider(value: $speed, in: 0...1) { Text("Speed") } } } When the sample constructs its RealityView, it loads the world Entity exported from Reality Composer Pro. Then, it assigns default values to the owl Entity within that hierarchy, like this: // Load the world scene from the reality file // Reality Composer Pro exported. let mainScene = try await Entity(named: OwlConstants.worldEntity) content.add(mainScene) // Find the owl entity in the scene. self.owl = mainScene.findEntity(named: OwlConstants.owlName) guard let owl else { // ... } // Assign initial values to animation parameters. owl.parameters[OwlConstants.movingParameter] = BindableValue(moving) owl.parameters[OwlConstants.speedParameter] = BindableValue(speed) When users modify the properties in the UI, the sample uses onChange(of:perform:) callbacks to detect the changes and propagate them to the entity like so: var body: some View { VStack { RealityView { content in // ... }.onChange(of: moving) { owl?.parameters["moving"]?.value = moving }.onChange(of: speed) { owl?.parameters["speed"]?.value = speed } // ... } } The AnimationGraphComponent reads from the entity’s parameters to drive the animation.