Chapters
Chapters

Chapters

Hide chapters

SwiftUI Animations by Tutorials

First Edition · iOS 16 · Swift 5.7 · Xcode 14

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: SwiftUI Animations by Tutorials

Section 1: 11 chapters
Show chapters Hide chapters

5. Applying Complex Transformations & Interactions
Written by Irina Galata

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

In the previous chapter, you learned how to draw a custom seating chart with tribunes using SwiftUI’s Path. However, quite a few things are still missing. Users must be able to preview the seats inside a tribune and select them to purchase tickets. To make the user’s navigation through the chart effortless and natural, you’ll implement gesture handling, such as dragging, magnifying and rotating.

As usual, fetch the starter project for this chapter from the materials, or continue where you left off in the previous chapter.

Open SportFan.xcodeproj and head straight to SeatingChartView.

Manipulating SwiftUI Shapes Using CGAffineTransform

You need two things to display seats for each tribune: a Shape containing the Path drawing the seat and a CGRect representing its bounds. To accomplish the former, create a new struct named SeatShape:

struct SeatShape: Shape {
  func path(in rect: CGRect) -> Path {
    Path { path in

    }
  }
}

The shape you’re about to draw consists of a few parts: the seat’s back, squab, and rod connecting them. Start by defining a few essential properties right below inside the Path’s trailing closure:

let verticalSpacing = rect.height * 0.1
let cornerSize = CGSize(
  width: rect.width / 15.0,
  height: rect.height / 15.0
)
let seatBackHeight = rect.height / 3.0 - verticalSpacing
let squabHeight = rect.height / 2.0 - verticalSpacing
let seatWidth = rect.width

To emulate the top-to-bottom perspective, you calculate the seat back rectangle as slightly shorter vertically than the squab.

Then, right below these variables, define the CGRect’s for the back and squab and draw the corresponding rounded rectangles:

let backRect = CGRect(
  x: 0, y: verticalSpacing,
  width: seatWidth, height: seatBackHeight
)
let squabRect = CGRect(
  x: 0, y: rect.height / 2.0,
  width: seatWidth, height: squabHeight
)

path.addRoundedRect(in: backRect, cornerSize: cornerSize)
path.addRoundedRect(in: squabRect, cornerSize: cornerSize)

Now, draw the rod:

path.move(to: CGPoint(
  x: rect.width / 2.0,
  y: rect.height / 3.0
))
path.addLine(to: CGPoint(
  x: rect.width / 2.0,
  y: rect.height / 2.0
))

You still have a long way to go before looking at the seat’s shape as part of a tribune. To get a quick preview for the time being, create a new struct called SeatPreview:

struct SeatPreview: View {
  let seatSize = 100.0
  var body: some View {
    ZStack {
      SeatShape().path(in: CGRect(
        x: 0, y: 0,
        width: seatSize, height: seatSize
      ))
      .fill(.blue) // 1

      SeatShape().path(
        in: CGRect(
          x: 0, y: 0,
          width: seatSize, height: seatSize
        ))
        .stroke(lineWidth: 2) // 2
    }
    .frame(width: seatSize, height: seatSize)
  }
}

This process is similar to the shapes you’ve drawn in the previous chapter:

  1. Inside a ZStack, you use one instance of SeatShape as a background with .blue fill.
  2. You use the second shape’s instance to draw the seat’s stroke.

Finally, you must make Xcode show the SeatPreview in the previews window. Create a new PreviewProvider:

struct Seat_Previews: PreviewProvider {
  static var previews: some View {
    SeatPreview()
  }
}

Your seat preview should look like this, for the time being:

The seat is there but looks relatively flat. You’ll skew it back to give it a slightly more realistic perspective. Don’t forget that you drew the tribunes all around the stadium field, which means the seats should always face the center of the field. Head to the next section to learn how to transform shapes!

Matrices Transformations

Check Path‘s API, and you’ll notice there are many methods, such as addRoundedRect or addEllipse, accepting an argument of type CGAffineTransform called transform. Via just one argument, you can manipulate a subpath in 2D space in several ways: rotate, skew, scale or translate.

a h 7 g r 0 q ​y g v 0

4 8 2 1 7 6 8 2 2

7 3 7 0 7 3 g ​b p l 8

Q ​h n 4 0 4 M 9 7 5 4

o yon a lek 8 a —bav a muy 3 9 4 4

8 0 2 1 2 5 6 V ​d q S

Applying the Skewing Operation

Back in SeatShape’s Path, find the seatWidth you previously added, and add the following line above it:

fauzFifsBuejtb jkocMdizy zjuzOnjqe

Rotating the Seat

To allow SeatShape to rotate, add a new property to the struct:

Rotating an Object Around an Arbitrary Point

Applying a rotation matrix rotates an object around its origin (minX, minY). To perform the transformation around an arbitrary point like its center, you first need to shift the object to that point, perform the rotation and then translate the object back.

Locating Rectangular Tribunes’ Seats

With your animation’s performance in mind, you’ll ensure the seat locations are computed only once, assigned to the respective tribune and drawn only when a user picks a specific tribune. Otherwise, it would be a waste to draw each one when they’re barely visible due to the scale of the seating chart.

Displaying the Seats

To access each tribune’s seats when rendering the seating chart, add a new property to Tribune:

Computing Positions of the Arc Tribune’s Seats

Calculating the bounds of an arc tribune’s seats is similar to building an arc tribune’s Path. Since you move along an arc, not a straight line, you operate with angles. You used an angle value for a tribune and another for the spacing. In the same way, you’ll calculate the angle needed for a seat and the spacing between neighboring seats.

Processing User Gestures

Navigating through the seating chart is somewhat cumbersome and extremely limited right now. Users should be as free with gestures as possible to speed up a tribune and seat selection.

Dragging

To obtain the offset value from the user’s drag gesture, you’ll use SwiftUI’s DragGesture. First, add these new properties to SeatingChartView:

Zooming

Like DragGesture, you can use MagnificationGesture to obtain the current gesture’s scale.

Rotating

The 2D rotating gesture is as easily implemented in SwiftUI as the others. You know what to do! Add another @GestureState property, and add a rotation property keep track of the applied rotation:

Handling Seat Selection

To keep track of the selected seats, add a new property to SeatingChartView:

Final Animating Touches

Since a seat is essentially a Path, just like a tribune, it’s pretty easy to animate it by trimming it. Add a new property of type CGFloat to SeatingChartView:

Key Points

  1. CGAffineTransform represents a transformation matrix, which you can apply to a subpath to perform rotation, scaling, translating or skewing.
  2. A transformation matrix in 2D graphics is of size 3x3, where the first two columns are responsible for all the applied transformations. The last one is constant to preserve the matrices’ concatenation ability.
  3. An object rotates around its origin when manipulated by a rotation matrix. To use a different point as an anchor, move the object towards that point first, apply the desired rotation and then shift it back.
  4. SwiftUI can process multiple gestures, like DragGesture, MagnificationGesture, RotationGesture or TapGesture, simultaneously when you attach them with the .simultaneousGesture modifier.

Where to Go From Here?

Transformation matrices are still universally used in computer graphics regardless of the programming language, framework or platform. Learning them once will be handy when working with animations outside the Apple ecosystem. The Wikipedia article on the topic offers a good overview of transformation matrices as a mathematical concept, also in the context of 2D or 3D computer graphics.

4. Drawing Custom Components
6. Intro to Custom Animations
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now