Rotate a cube through a series of keyframes using quaternion interpolation to transition between them.

SDKs

- iOS 11.3+
- Xcode 11.0+Beta

Framework

- Accelerate

## Overview

Quaternions are fundamental to 3D drawing and animation. You can rotate a 3D object in space by applying unit quaternion actions to each of its vertices. You can interpolate between a series of rotational keyframes—defined by unit quaternions—with either the `simd`

or the `simd`

functions.

This sample shows how you can define a cube using eight vertices and transform it through a series of rotations. It shows how transitioning between the keyframes with a series of discrete spherical interpolations (that is, a series of separate arcs between each keyframe) yields a different result than transitioning with a continuous spline (that is, a single, smooth path between each keyframe).

### Define a Cube by Its Vertices

Define a cube with eight `simd`

structures: one for each corner:

The quaternions will act upon the vertex origins, mutating `cube`

to rotate the cube:

This sample uses SceneKit to render the cube defined by the vertices in the `cube`

array, but you can use the technique discussed to rotate geometry in other technologies like Metal. The following image shows the cube, defined by the vertices above, rendered in SceneKit:

### Define the Quaternion Rotation Keyframes

As discussed in Working with Quaternions, spline interpolation requires a quaternion before the current value and a quaternion after the next value to compute the interpolated value. To support this, define the series of rotations with additional values at the beginning and end. In this sample, the first and last elements are duplicated:

### Animate Between Keyframes with Spherical Interpolation

This sample uses a `CADisplay`

instance to schedule updates to the cube’s vertices, calling the `vertex`

function every frame:

The following variables define the current index in `vertex`

and the time, between zero and one, for the current interpolation:

With each display link notification, inside the `vertex`

function, the vertex rotation time variable is incremented by a small amount. Changing the value of increment controls the speed of the animation:

The `simd`

function returns a quaternion that is spherically interpolated between the current and next quaternion keyframe at the specified time:

The quaternion acts upon each of the cube’s original vertices, rotating the cube around its center:

If the vertex rotation time is greater than or equal to one, you need to progress to the next keyframe: Increment the index to the rotations array and reset the rotation time to zero. Furthermore, when the code has reached the last usable quaternion in the array of rotations, end the animation by invalidating the display link:

Over time, the cube animates through the series of keyframes. By tracing the path (shown as a thin line) of one of the vertices (marked by the dot), you can see the sharp change in direction as the cube rotates between the keyframes:

### Animate Between Keyframes with Spline Interpolation

Use the identical code to the spherical interpolation sample for spline interpolation, apart from one change: Rather than generating the quaternion that acts upon the vertices with `simd`

, use `simd`

:

With spline interpolation, the transition between the quaternion keyframes is far smoother as shown in the image below: