VectorArithmetic on Software Development Notes

How to animate a Shape change in SwiftUI

Eric Callanan — Sunday, 13 Jun 2021

Building on previous articles on Path animation in SwiftUI, this article demonstrates how to animate the smooth transition form one random shape to another. This is done by defining a custom AnimatableData for a list of cubic curves and using this in a custom shape so that SwiftUI can present a smooth transition from one shape to another.

This is the sixth article in a series on SwiftUI animation:

Animating a shape change in SwiftUI
Create a blob shape in SwiftUI
How to animate a line move in SwiftUI
How to animate a quadratic curve change in SwiftUI
How to animate a Cubic Curve change in SwiftUI
How to animate a Shape change in SwiftUI

Creating a random shape

A structure is defined for a CubicSegment that holds the end point and two control points to create the cubic Bézier curve. The function CreateRandomShape takes in the number of sides or segments in the shape and creates that number of random cubic Bézier curves around a central point in a 1 by 1 frame.

 1struct CubicSegment {
 2    let point: CGPoint
 3    let control1: CGPoint
 4    let control2: CGPoint
 5}
 6
 7func Cartesian(length:Double, angle:Double) -> CGPoint {
 8    return CGPoint(x: length * cos(angle), y: length * sin(angle))
 9}
10
11func CreateRandomShape(sides:Int) -> [CubicSegment] {
12    var segments:[CubicSegment] = []
13
14    let r = 0.5
15    let c = CGPoint(x: 0.5, y: 0.5)
16    let sectorAngle = 2.0 * Double.pi / Double(sides)
17    var previousSectorIn = true
18    for i in 0..<sides {
19        let segmentAngle = sectorAngle * Double.random(in: 0.7...1.3)
20        let angle = (sectorAngle * Double(i-0)) + segmentAngle
21        let radius = r * Double.random(in: 0.45...0.85)
22        let pt = Cartesian(length: radius, angle: angle)
23
24        let ctlAngle1 = angle - (segmentAngle * 0.75)
25        let ctlDistance1 = previousSectorIn ? radius*1.45 : radius*0.55
26        let ctl1 = Cartesian(length: ctlDistance1, angle: ctlAngle1)
27
28        let ctlAngle2 = angle - (segmentAngle * 0.25)
29        let ctlDistance2 = radius * Double.random(in: 0.55...1.45)
30        previousSectorIn = ctlDistance2 < radius
31        let ctl2 = Cartesian(length: ctlDistance2, angle: ctlAngle2)
32
33        let s:CubicSegment = CubicSegment(
34            point: CGPoint(x: pt.x + c.x, y: pt.y + c.y),
35            control1: CGPoint(x: ctl1.x + c.x, y: ctl1.y + c.y),
36            control2: CGPoint(x: ctl2.x + c.x, y: ctl2.y + c.y))
37        segments.append(s)
38    }
39    segments.append(segments[0])
40    return segments
41}

A Random shape is created from the array of CubicSegments with the size adjusted to fit into the containing frame. This conforms to the Shape protocol.

 1struct RandomShape: Shape {
 2    var segments:[CubicSegment]
 3
 4    func path(in rect: CGRect) -> Path {
 5        func adjustPoint(p: CGPoint) -> CGPoint {
 6            return CGPoint(x: p.x * rect.width, y: p.y * rect.height)
 7        }
 8
 9        var path = Path()
10        path.move(to: adjustPoint(p: segments[0].point))
11        for i in 1..<segments.count {
12            path.addCurve(to: adjustPoint(p: segments[i].point),
13                          control1: adjustPoint(p: segments[i].control1),
14                          control2: adjustPoint(p: segments[i].control2))
15        }
16        path.closeSubpath()
17        return path
18    }
19}

Two variables of RandomShape are created and these shapes are swapped when the "Change" button is selected. Some attributes are animated such as color, but the actual shape change is not animated. This is because the SwiftUI framework does not know how to animate the transition from one list of CubicSegment to another.

 1struct ChangeShapeView: View {
 2    @State private var changeShape = true
 3
 4    let segmentsShape1 = CreateRandomShape(sides: 5)
 5    let segmentsShape2 = CreateRandomShape(sides: 5)
 6
 7    var body: some View {
 8        VStack {
 9            RandomShape(segments: changeShape ? segmentsShape1 : segmentsShape2)
10                .stroke(changeShape ? Color.purple : .red, lineWidth: 6.0)
11                .frame(width: 200, height: 200)
12                .animation(.easeInOut(duration: 2))
13
14            RandomShape(segments: changeShape ? segmentsShape1 : segmentsShape2)
15                .fill(changeShape ? Color.purple : .red)
16                .frame(width: 200, height: 200)
17                .animation(.linear(duration: 2))
18
19            Button("Change") {
20                self.changeShape.toggle()
21            }
22            .buttonStyle(BlueButtonStyle())
23
24            Spacer()
25        }
26    }
27}

Random shape created with array of cubic curves

Random shape created with array of cubic curves

Use array of Animatable Cubic Curve

An AnimatableCubicCurve was defined in How to animate a Cubic Curve change in SwiftUI and these were combined in a view in a ZStack to create a shape. Each of these curves is Animatable, so could an array of these curves be used to define a shape and allow animation of a shape change? The short answer is no, because even if the individual segments are animatable, the shape of an array is not animatable. In order to animate a shape change, the SwiftUI framework needs to be able to calculate intermediate stage in the transition.

 1struct AnimatableCubicCurve : VectorArithmetic {
 2    var start: CGPoint
 3    var end: CGPoint
 4    var control1: CGPoint
 5    var control2: CGPoint
 6
 7    var length: Double {
 8        return Double(((end.x - start.x) * (end.x - start.x)) +
 9                        ((end.y - start.y) * (end.y - start.y))).squareRoot()
10    }
11
12    var magnitudeSquared: Double {
13        return length * length
14    }
15
16    mutating func scale(by rhs: Double) {
17        self.start.x.scale(by: rhs)
18        self.start.y.scale(by: rhs)
19        self.end.x.scale(by: rhs)
20        self.end.y.scale(by: rhs)
21        self.control1.x.scale(by: rhs)
22        self.control1.y.scale(by: rhs)
23        self.control2.x.scale(by: rhs)
24        self.control2.y.scale(by: rhs)
25    }
26
27    static var zero: AnimatableCubicCurve {
28        return AnimatableCubicCurve(start: CGPoint(x: 0.0, y: 0.0),
29                                    end: CGPoint(x: 0.0, y: 0.0),
30                                    control1: CGPoint(x: 0.0, y: 0.0),
31                                    control2: CGPoint(x: 0.0, y: 0.0))
32    }
33
34    static func - (lhs: AnimatableCubicCurve, rhs: AnimatableCubicCurve) -> AnimatableCubicCurve {
35        return AnimatableCubicCurve(
36            start: CGPoint(
37                x: lhs.start.x - rhs.start.x,
38                y: lhs.start.y - rhs.start.y),
39            end: CGPoint(
40                x: lhs.end.x - rhs.end.x,
41                y: lhs.end.y - rhs.end.y),
42            control1: CGPoint(
43                x: lhs.control1.x - rhs.control1.x,
44                y: lhs.control1.y - rhs.control1.y),
45            control2: CGPoint(
46                x: lhs.control2.x - rhs.control2.x,
47                y: lhs.control2.y - rhs.control2.y))
48    }
49
50    static func -= (lhs: inout AnimatableCubicCurve, rhs: AnimatableCubicCurve) {
51        lhs = lhs - rhs
52    }
53
54    static func + (lhs: AnimatableCubicCurve, rhs: AnimatableCubicCurve) -> AnimatableCubicCurve {
55        return AnimatableCubicCurve(
56            start: CGPoint(
57                x: lhs.start.x + rhs.start.x,
58                y: lhs.start.y + rhs.start.y),
59            end: CGPoint(
60                x: lhs.end.x + rhs.end.x,
61                y: lhs.end.y + rhs.end.y),
62            control1: CGPoint(
63                x: lhs.control1.x + rhs.control1.x,
64                y: lhs.control1.y + rhs.control1.y),
65            control2: CGPoint(
66                x: lhs.control2.x + rhs.control2.x,
67                y: lhs.control2.y + rhs.control2.y))
68    }
69
70    static func += (lhs: inout AnimatableCubicCurve, rhs: AnimatableCubicCurve) {
71        lhs = lhs + rhs
72    }
73
74    static func * (lhs: AnimatableCubicCurve, rhs: Double) -> AnimatableCubicCurve {
75        return AnimatableCubicCurve(
76            start: CGPoint(
77                x: lhs.start.x * CGFloat(rhs),
78                y: lhs.start.y * CGFloat(rhs)),
79            end: CGPoint(
80                x: lhs.end.x * CGFloat(rhs),
81                y: lhs.end.y * CGFloat(rhs)),
82            control1: CGPoint(
83                x: lhs.control1.x * CGFloat(rhs),
84                y: lhs.control1.y * CGFloat(rhs)),
85            control2: CGPoint(
86                x: lhs.control2.x * CGFloat(rhs),
87                y: lhs.control2.y * CGFloat(rhs)))
88    }
89}

 1struct CubicCurveShape: Shape {
 2    var startPoint: CGPoint
 3    var endPoint: CGPoint
 4    var controlPoint1: CGPoint
 5    var controlPoint2: CGPoint
 6
 7    private var animatableSegment: AnimatableCubicCurve
 8
 9    var animatableData: AnimatableCubicCurve {
10        get { AnimatableCubicCurve(
11            start: startPoint, end: endPoint, control1: controlPoint1, control2: controlPoint2) }
12        set {
13            startPoint = newValue.start
14            endPoint = newValue.end
15            controlPoint1 = newValue.control1
16            controlPoint2 = newValue.control2
17        }
18    }
19
20    init(startPoint: CGPoint, endPoint: CGPoint, controlPoint1: CGPoint, controlPoint2: CGPoint) {
21        self.startPoint = startPoint
22        self.endPoint = endPoint
23        self.controlPoint1 = controlPoint1
24        self.controlPoint2 = controlPoint2
25        self.animatableSegment = AnimatableCubicCurve(
26            start: startPoint,
27            end: endPoint,
28            control1: controlPoint1,
29            control2: controlPoint2)
30    }
31
32    init(curve: AnimatableCubicCurve) {
33        self.init(startPoint: curve.start,
34                  endPoint: curve.end,
35                  controlPoint1: curve.control1,
36                  controlPoint2: curve.control2)
37    }
38
39    func path(in rect: CGRect) -> Path {
40        let start = CGPoint(x: startPoint.x * rect.width,
41                            y: startPoint.y * rect.height)
42        let end = CGPoint(x: rect.width * endPoint.x,
43                          y: rect.height * endPoint.y)
44        let control1 = CGPoint(x: rect.width * controlPoint1.x,
45                               y: rect.height * controlPoint1.y)
46        let control2 = CGPoint(x: rect.width * controlPoint2.x,
47                               y: rect.height * controlPoint2.y)
48
49        var path = Path()
50        path.move(to: start)
51        path.addCurve(to: end, control1: control1, control2: control2)
52        return path
53    }
54}

 1func CreateRandomShape2(segments:Int) -> [AnimatableCubicCurve] {
 2    var curves:[AnimatableCubicCurve] = []
 3
 4    let r = 0.5
 5    let c = CGPoint(x: 0.5, y: 0.5)
 6    let sectorAngle = 2.0 * Double.pi / Double(segments)
 7    var previousSectorIn = true
 8    var previousPoint = CGPoint(x: 0.0, y: 0.0)
 9    for i in 0..<segments {
10        let segmentAngle = sectorAngle * Double.random(in: 0.7...1.3)
11        let angle = (sectorAngle * Double(i-0)) + segmentAngle
12        let radius = r * Double.random(in: 0.45...0.85)
13        let pt = Cartesian(length: radius, angle: angle)
14
15        let ctlAngle1 = angle - (segmentAngle * 0.75)
16        let ctlDistance1 = previousSectorIn ? radius*1.45 : radius*0.55
17        let ctl1 = Cartesian(length: ctlDistance1, angle: ctlAngle1)
18
19        let ctlAngle2 = angle - (segmentAngle * 0.25)
20        let ctlDistance2 = radius * Double.random(in: 0.55...1.45)
21        previousSectorIn = ctlDistance2 < radius
22        let ctl2 = Cartesian(length: ctlDistance2, angle: ctlAngle2)
23
24        let curve: AnimatableCubicCurve = AnimatableCubicCurve (
25            start: previousPoint,
26            end: CGPoint(x: pt.x + c.x, y: pt.y + c.y),
27            control1: CGPoint(x: ctl1.x + c.x, y: ctl1.y + c.y),
28            control2: CGPoint(x: ctl2.x + c.x, y: ctl2.y + c.y))
29        curves.append(curve)
30        previousPoint = curve.end
31    }
32    curves.append(curves[0])
33    return curves
34}

 1struct ShapeWithCubicCurveView: View {
 2    @State private var changeShape = true
 3
 4    let segmentsShape1 = CreateRandomShape2(segments: 8)
 5    let segmentsShape2 = CreateRandomShape2(segments: 8)
 6
 7    var body: some View {
 8        VStack {
 9            RandomShape2(segments: changeShape ? segmentsShape1 : segmentsShape2)
10                .stroke(changeShape ? Color.purple : .red, lineWidth: 6.0)
11                .frame(width: 200, height: 200)
12                .animation(.easeInOut(duration: 2))
13
14            RandomShape2(segments: changeShape ? segmentsShape1 : segmentsShape2)
15                .fill(changeShape ? Color.purple : .red)
16                .frame(width: 200, height: 200)
17                .animation(.linear(duration: 2))
18
19            Button("Change") {
20                self.changeShape.toggle()
21            }
22            .buttonStyle(BlueButtonStyle())
23
24            Spacer()
25        }
26    }
27}

Random shape created with array of animatable curves

Random shape created with array of animatable curves

Animate an array of values

Previous shapes were animated by implementing Animatable protocol and supplying the AnimatableData. The AnimatableData has either been a single value or a number of values representing a single point or curve. Now we want to animate a series of values and the number of values in the series is open ended.

First animate a line that is composed of a list of doubles for it's "y" coordinates, while the "x" coordinates are distributed horizontally across the containing frame. The AnimatableLine structure is defined to contain the array of doubles and to conform to VectorArithmetic protocol. This is used as the AnimatableData for the LineShape shape.

This shows that it is possible to animate the transition from one set of values to another once the AnimatableData structure conforms to VectorArithmetic. This code will only work well with arrays that have the same number of samples. We'll deal with arrays of unequal length later when we deal with arrays of cubic curves.

 1struct AnimatableLine : VectorArithmetic {
 2    var values:[Double]
 3
 4    var magnitudeSquared: Double {
 5        return values.map{ $0 * $0 }.reduce(0, +)
 6    }
 7
 8    mutating func scale(by rhs: Double) {
 9        values = values.map{ $0 * rhs }
10    }
11
12    static var zero: AnimatableLine {
13        return AnimatableLine(values: [0.0])
14    }
15
16    static func - (lhs: AnimatableLine, rhs: AnimatableLine) -> AnimatableLine {
17        return AnimatableLine(values: zip(lhs.values, rhs.values).map(-))
18    }
19
20    static func -= (lhs: inout AnimatableLine, rhs: AnimatableLine) {
21        lhs = lhs - rhs
22    }
23
24    static func + (lhs: AnimatableLine, rhs: AnimatableLine) -> AnimatableLine {
25        return AnimatableLine(values: zip(lhs.values, rhs.values).map(+))
26    }
27
28    static func += (lhs: inout AnimatableLine, rhs: AnimatableLine) {
29        lhs = lhs + rhs
30    }
31}

 1struct LineShape: Shape {
 2    var yValues: [Double]
 3
 4    var animatableData: AnimatableLine {
 5        get { AnimatableLine(values: yValues) }
 6        set { yValues = newValue.values }
 7    }
 8
 9    func path(in rect: CGRect) -> Path {
10        let xIncrement = (rect.width / CGFloat(yValues.count))
11        var path = Path()
12        path.move(to: CGPoint(x: 0.0, y: yValues[0] * Double(rect.width)))
13        for i in 1..<yValues.count {
14            let pt = CGPoint(x: (Double(i) * Double(xIncrement)), y: (yValues[i] * Double(rect.height)))
15            path.addLine(to: pt)
16        }
17        return path
18    }
19}

 1struct LineView: View {
 2    @State private var changeShape = true
 3
 4    let line1 = [0.2, 0.4, 0.2, 0.8, 0.9, 0.1]
 5    let line2 = [0.3, 0.9, 0.9, 0.8, 0.2, 0.5]
 6
 7    var body: some View {
 8        VStack {
 9            Text("Animated Line")
10
11            LineShape(yValues: changeShape ? line1 : line2)
12                .stroke(changeShape ? Color.blue : .red, lineWidth: 4.0)
13                .frame(width: 350, height: 420)
14                .animation(.easeInOut(duration: 2))
15
16            Button("Change") {
17                self.changeShape.toggle()
18            }
19            .buttonStyle(BlueButtonStyle())
20
21            Spacer()
22        }
23    }
24}

Animate line change with an array of doubles

Animate line change with an array of doubles

Animate between shapes with the same number of sections

We started with a list of doubles for an animatable line to demonstrate specifying AnimatableData with a list of values. We can build on this by first defining a struct CubicCurve to contain the three points required for a Cubic Bézier curve that conforms to VectorArithmetic.

 1struct CubicCurve : VectorArithmetic {
 2    var point: CGPoint
 3    var control1: CGPoint
 4    var control2: CGPoint
 5
 6    var magnitudeSquared: Double {
 7        return 0.0
 8    }
 9
10    mutating func scale(by rhs: Double) {
11        self.point.x.scale(by: rhs)
12        self.point.y.scale(by: rhs)
13        self.control1.x.scale(by: rhs)
14        self.control1.y.scale(by: rhs)
15        self.control2.x.scale(by: rhs)
16        self.control2.y.scale(by: rhs)
17    }
18
19    static var zero: CubicCurve {
20        return CubicCurve(point: CGPoint(x: 0.0, y: 0.0),
21                          control1: CGPoint(x: 0.0, y: 0.0),
22                          control2: CGPoint(x: 0.0, y: 0.0))
23    }
24
25    static func - (lhs: CubicCurve, rhs: CubicCurve) -> CubicCurve {
26        return CubicCurve(
27            point: CGPoint(
28                x: lhs.point.x - rhs.point.x,
29                y: lhs.point.y - rhs.point.y),
30            control1: CGPoint(
31                x: lhs.control1.x - rhs.control1.x,
32                y: lhs.control1.y - rhs.control1.y),
33            control2: CGPoint(
34                x: lhs.control2.x - rhs.control2.x,
35                y: lhs.control2.y - rhs.control2.y))
36    }
37
38    static func -= (lhs: inout CubicCurve, rhs: CubicCurve) {
39        lhs = lhs - rhs
40    }
41
42    static func + (lhs: CubicCurve, rhs: CubicCurve) -> CubicCurve {
43        return CubicCurve(
44            point: CGPoint(
45                x: lhs.point.x + rhs.point.x,
46                y: lhs.point.y + rhs.point.y),
47            control1: CGPoint(
48                x: lhs.control1.x + rhs.control1.x,
49                y: lhs.control1.y + rhs.control1.y),
50            control2: CGPoint(
51                x: lhs.control2.x + rhs.control2.x,
52                y: lhs.control2.y + rhs.control2.y))
53    }
54
55    static func += (lhs: inout CubicCurve, rhs: CubicCurve) {
56        lhs = lhs + rhs
57    }
58
59    static func * (lhs: CubicCurve, rhs: Double) -> CubicCurve {
60        return CubicCurve(
61            point: CGPoint(
62                x: lhs.point.x * CGFloat(rhs),
63                y: lhs.point.y * CGFloat(rhs)),
64            control1: CGPoint(
65                x: lhs.control1.x * CGFloat(rhs),
66                y: lhs.control1.y * CGFloat(rhs)),
67            control2: CGPoint(
68                x: lhs.control2.x * CGFloat(rhs),
69                y: lhs.control2.y * CGFloat(rhs)))
70    }
71}

Next define a struct AnimatableCubicCurveList that contains a list of these CubicCurve and also conforms to VectorArithmetic. We ignore dot product here and return zero for magnitudeSquared. In vector math, doProduct is commonly used to determine how aligned two vectors are and this is not appropriate for a list of cubic curves. This does not appear to be used for basic shape animation.

 1struct AnimatableCubicCurveList : VectorArithmetic {
 2    var values:[CubicCurve]
 3
 4    var magnitudeSquared: Double {
 5        // dotProduct has no meaning on a list of cubic curves
 6        return 0.0
 7    }
 8
 9    mutating func scale(by rhs: Double) {
10        values = values.map { $0 * rhs }
11    }
12
13    static var zero: AnimatableCubicCurveList {
14        return AnimatableCubicCurveList(values: [CubicCurve.zero])
15    }
16
17    static func - (lhs: AnimatableCubicCurveList, rhs: AnimatableCubicCurveList) ->
18    AnimatableCubicCurveList {
19        let result = zip(lhs.values, rhs.values).map(-)
20        return AnimatableCubicCurveList(values: result)
21    }
22
23    static func -= (lhs: inout AnimatableCubicCurveList, rhs: AnimatableCubicCurveList) {
24        lhs = lhs - rhs
25    }
26
27    static func + (lhs: AnimatableCubicCurveList, rhs: AnimatableCubicCurveList) ->
28    AnimatableCubicCurveList {
29        let result = zip(lhs.values, rhs.values).map(+)
30        return AnimatableCubicCurveList(values: result)
31    }
32
33    static func += (lhs: inout AnimatableCubicCurveList, rhs: AnimatableCubicCurveList) {
34        lhs = lhs + rhs
35    }
36}

 1struct AnimatableShape: Shape {
 2    var curves:[CubicCurve]
 3
 4    var animatableData: AnimatableCubicCurveList {
 5        get { AnimatableCubicCurveList(values: curves) }
 6        set { curves = newValue.values }
 7    }
 8
 9    func path(in rect: CGRect) -> Path {
10        func adjustPoint(p: CGPoint) -> CGPoint {
11            return CGPoint(x: p.x * rect.width, y: p.y * rect.height)
12        }
13
14        var path = Path()
15        path.move(to: adjustPoint(p: curves[0].point))
16        for i in 1..<curves.count {
17            path.addCurve(to: adjustPoint(p: curves[i].point),
18                          control1: adjustPoint(p: curves[i].control1),
19                          control2: adjustPoint(p: curves[i].control2))
20        }
21        path.closeSubpath()
22        return path
23    }
24}

A helper function is defined to generate a random shape consisting of an array of CubicCurves. Note that the first point is appended to the end of the array as the point in this curve is first used to move the path to this point. This same point at the end of the path is used to define the cubic curve back to the starting point.

 1func CreateRandomShape3(segments:Int) -> [CubicCurve] {
 2    var curves:[CubicCurve] = []
 3
 4    let r = 0.5
 5    let c = CGPoint(x: 0.5, y: 0.5)
 6    let sectorAngle = 2.0 * Double.pi / Double(segments)
 7    var previousSectorIn = true
 8    for i in 0..<segments {
 9        let segmentAngle = sectorAngle * Double.random(in: 0.7...1.3)
10        let angle = (sectorAngle * Double(i-0)) + segmentAngle
11        let radius = r * Double.random(in: 0.45...0.85)
12        let pt = Cartesian(length: radius, angle: angle)
13
14        let ctlAngle1 = angle - (segmentAngle * 0.75)
15        let ctlDistance1 = previousSectorIn ? radius*1.45 : radius*0.55
16        let ctl1 = Cartesian(length: ctlDistance1, angle: ctlAngle1)
17
18        let ctlAngle2 = angle - (segmentAngle * 0.25)
19        let ctlDistance2 = radius * Double.random(in: 0.55...1.45)
20        previousSectorIn = ctlDistance2 < radius
21        let ctl2 = Cartesian(length: ctlDistance2, angle: ctlAngle2)
22
23        let curve = CubicCurve (
24            point: CGPoint(x: pt.x + c.x, y: pt.y + c.y),
25            control1: CGPoint(x: ctl1.x + c.x, y: ctl1.y + c.y),
26            control2: CGPoint(x: ctl2.x + c.x, y: ctl2.y + c.y))
27        curves.append(curve)
28    }
29    curves.append(curves[0])
30
31    return curves
32}

This shape now demonstrates a smooth animation from one shape to another.

 1struct AnimatableShapeView: View {
 2    @State private var changeShape = true
 3
 4    let shape1 = CreateRandomShape3(segments: 19)
 5    let shape2 = CreateRandomShape3(segments: 19)
 6
 7    var body: some View {
 8        VStack {
 9            Text("Shape Change - Equal Segments")
10
11            AnimatableShape(curves: changeShape ? shape1 : shape2)
12                .stroke(changeShape ? Color.purple : .red, lineWidth: 3.0)
13                .frame(width: 200, height: 200)
14                .animation(.easeInOut(duration: 2))
15
16            AnimatableShape(curves: changeShape ? shape1 : shape2)
17                .fill(changeShape ? Color.green : .yellow)
18                .frame(width: 200, height: 200)
19                .animation(.easeInOut(duration: 2))
20
21            Button("Change") {
22                self.changeShape.toggle()
23            }
24            .buttonStyle(BlueButtonStyle())
25
26            Spacer()
27        }
28    }
29}

AnimatableShape that conforms to shape protocol and implements animatableData

AnimatableShape that conforms to shape protocol and implements animatableData

Animate shape change when shapes have equal number of segments

Animate shape change when shapes have equal number of segments

Animate between shapes of different number of segments

The above AnimatableShape works well when the number of Cubic Curves in the shapes to change are the same. However, when there is a difference in the number of curves the animation only works where the number of curves overlap. When switching from the larger one to the smaller one, the extra curves are first removed and then the remaining part of the shape is animated. Similarly, when transitioning to the larger one, the smaller shape is first animated and then the extra section just appears.

 1struct UnequalSegmentsView: View {
 2    @State private var changeShape = true
 3
 4    let shape1 = CreateRandomShape3(segments: 8)
 5    let shape2 = CreateRandomShape3(segments: 12)
 6
 7    var body: some View {
 8        VStack {
 9            Text("Shape Change - Unequal Segments")
10
11            AnimatableShape(curves: changeShape ? shape1 : shape2)
12                .stroke(changeShape ? Color.blue : .red, lineWidth: 3.0)
13                .frame(width: 200, height: 200)
14                .animation(.easeInOut(duration: 2))
15
16            AnimatableShape(curves: changeShape ? shape1 : shape2)
17                .fill(changeShape ? Color.green : .yellow)
18                .frame(width: 200, height: 200)
19                .animation(.easeInOut(duration: 2))
20
21            Button("Change") {
22                self.changeShape.toggle()
23            }
24            .buttonStyle(BlueButtonStyle())
25
26            Spacer()
27        }
28    }
29}

Jumpy animation of shape change when shapes have unequal numbers of segments

Animate shape change when shapes have unequal number of segments

Improving animation of shape with different number of segments

We need to change the + and - functions on the AnimatableCubicCurveList to address the smooth animation between shapes with different numbers of curves. Essentially, we need to add curves to the shorter list so that the two shapes contain the same number of curves. Two helper functions are added in AnimatableCubicCurveList2; equalizeArrays is a function to ensure the two arrays are of equal size and this is used in both the + and - functions; padShorterList functions is called by equalizeArrays and creates a curve matching all three points in the curve with the first point of the shorter array and adding repeats of this to the end of the array until the sizes match. This will have the effect of collapsing all the extra curves in the larger shape onto the first/last point of the smaller shape during the transition. The new curves for the larger shape will animate from the start point of the smaller shape.

 1struct AnimatableCubicCurveList2 : VectorArithmetic {
 2    var values:[CubicCurve]
 3
 4    var magnitudeSquared: Double {
 5        // dotProduct has no meaning on a list of cubic curves
 6        return 0.0
 7    }
 8
 9    mutating func scale(by rhs: Double) {
10        values = values.map { $0 * rhs }
11    }
12
13    static var zero: AnimatableCubicCurveList2 {
14        return AnimatableCubicCurveList2(values: [CubicCurve.zero])
15    }
16
17    fileprivate static func padShorterList(_ shortList: inout [CubicCurve], _ longList: [CubicCurve]) {
18        // Create a curve with all points set to the first/last point
19        // Extend the shorter list with repeats of this point
20        let point = shortList[0].point
21        let curve = CubicCurve(point: point, control1: point, control2: point)
22        for _ in(shortList.count..<longList.count) {
23            shortList.append(curve)
24        }
25    }
26
27    fileprivate static func equalizeArrays(_ lhs: AnimatableCubicCurveList2, _ rhs: AnimatableCubicCurveList2) -> ([CubicCurve], [CubicCurve]) {
28        var leftValues = lhs.values
29        var rightValues = rhs.values
30        if leftValues.count < rightValues.count {
31            padShorterList(&leftValues, rightValues)
32        }
33        else if rightValues.count < leftValues.count {
34            padShorterList(&rightValues, leftValues)
35        }
36        return (leftValues, rightValues)
37    }
38
39    static func - (lhs: AnimatableCubicCurveList2, rhs: AnimatableCubicCurveList2) -> AnimatableCubicCurveList2 {
40        // Ensure the shapes have the same number of curves
41        let lists = equalizeArrays(lhs, rhs)
42        let result = zip(lists.0, lists.1).map(-)
43        return AnimatableCubicCurveList2(values: result)
44    }
45
46    static func -= (lhs: inout AnimatableCubicCurveList2, rhs: AnimatableCubicCurveList2) {
47        lhs = lhs - rhs
48    }
49
50    static func + (lhs: AnimatableCubicCurveList2, rhs: AnimatableCubicCurveList2) -> AnimatableCubicCurveList2 {
51        // Ensure the shapes have the same number of curves
52        let lists = equalizeArrays(lhs, rhs)
53        let result = zip(lists.0, lists.1).map(+)
54        return AnimatableCubicCurveList2(values: result)
55    }
56
57    static func += (lhs: inout AnimatableCubicCurveList2, rhs: AnimatableCubicCurveList2) {
58        lhs = lhs + rhs
59    }
60}

 1struct AnimatableShape2: Shape {
 2    var curves:[CubicCurve]
 3
 4    var animatableData: AnimatableCubicCurveList3 {
 5        get { AnimatableCubicCurveList3(values: curves) }
 6        set { curves = newValue.values }
 7    }
 8
 9    func path(in rect: CGRect) -> Path {
10        func adjustPoint(p: CGPoint) -> CGPoint {
11            return CGPoint(x: p.x * rect.width, y: p.y * rect.height)
12        }
13
14        var path = Path()
15        path.move(to: adjustPoint(p: curves[0].point))
16        for i in 1..<curves.count {
17            path.addCurve(to: adjustPoint(p: curves[i].point),
18                          control1: adjustPoint(p: curves[i].control1),
19                          control2: adjustPoint(p: curves[i].control2))
20        }
21        path.closeSubpath()
22        return path
23    }
24}

Smooth animation of shape change when shapes have unequal numbers of segments

Smooth animation of shape change when shapes have unequal numbers of segments

Animation random shape change with many segments

Animation random shape change with many segments

Conclusion

This article built on the previous articles on animating various paths. Animation of a shape is dependent on providing the SwiftUI framework with information to calculate intermediate states. This is done by defining the AnimatableData for the custom shape so that SwiftUI can present a smooth transition from one shape to another.

In a previous article, an array of AnimatableCubicCurve were arranged in a ZStack to present a shape. This provided a good outline of a shape, but cannot be used as a shape, such as the fill modifier cannot be applied. The AnimatableShape2 defined in this article defines a random shape composed of a number of cubic Bézier curves and is a true shape. It allows for smooth animation between different random shapes as well as scaling and color change.

How to animate a Cubic Curve change in SwiftUI

Eric Callanan — Sunday, 06 Jun 2021

Continuing on the exploration of animating Paths in SwiftUI. This article shows how to animate the movement of a cubic Bézier curve from one position to another. The smooth transition from a straight line to a curved line is also shown by adjusting the two control points.

The path structure can be used to create a cubic Bézier curve using the addCurve function that takes the end point and two control points as parameters.

Animate Cubic Curve Shape

First define a struct AnimatableCubicCurve that conforms to VectorArithmetic protocol. This is similar to the AnimatableQuadCurve that was defined in How to animate a quadratic curve change in SwiftUI.

 1struct AnimatableCubicCurve : VectorArithmetic {
 2    var start: CGPoint
 3    var end: CGPoint
 4    var control1: CGPoint
 5    var control2: CGPoint
 6    
 7    var length: Double {
 8        return Double(((end.x - start.x) * (end.x - start.x)) +
 9                        ((end.y - start.y) * (end.y - start.y))).squareRoot()
10    }
11    
12    var magnitudeSquared: Double {
13        return length * length
14    }
15    
16    mutating func scale(by rhs: Double) {
17        self.start.x.scale(by: rhs)
18        self.start.y.scale(by: rhs)
19        self.end.x.scale(by: rhs)
20        self.end.y.scale(by: rhs)
21        self.control1.x.scale(by: rhs)
22        self.control1.y.scale(by: rhs)
23        self.control2.x.scale(by: rhs)
24        self.control2.y.scale(by: rhs)
25    }
26    
27    static var zero: AnimatableCubicCurve {
28        return AnimatableCubicCurve(start: CGPoint(x: 0.0, y: 0.0),
29                                    end: CGPoint(x: 0.0, y: 0.0),
30                                    control1: CGPoint(x: 0.0, y: 0.0),
31                                    control2: CGPoint(x: 0.0, y: 0.0))
32    }
33    
34    static func - (lhs: AnimatableCubicCurve, rhs: AnimatableCubicCurve) -> AnimatableCubicCurve {
35        return AnimatableCubicCurve(
36            start: CGPoint(
37                x: lhs.start.x - rhs.start.x,
38                y: lhs.start.y - rhs.start.y),
39            end: CGPoint(
40                x: lhs.end.x - rhs.end.x,
41                y: lhs.end.y - rhs.end.y),
42            control1: CGPoint(
43                x: lhs.control1.x - rhs.control1.x,
44                y: lhs.control1.y - rhs.control1.y),
45            control2: CGPoint(
46                x: lhs.control2.x - rhs.control2.x,
47                y: lhs.control2.y - rhs.control2.y))
48    }
49    
50    static func -= (lhs: inout AnimatableCubicCurve, rhs: AnimatableCubicCurve) {
51        lhs = lhs - rhs
52    }
53    
54    static func + (lhs: AnimatableCubicCurve, rhs: AnimatableCubicCurve) -> AnimatableCubicCurve {
55        return AnimatableCubicCurve(
56            start: CGPoint(
57                x: lhs.start.x + rhs.start.x,
58                y: lhs.start.y + rhs.start.y),
59            end: CGPoint(
60                x: lhs.end.x + rhs.end.x,
61                y: lhs.end.y + rhs.end.y),
62            control1: CGPoint(
63                x: lhs.control1.x + rhs.control1.x,
64                y: lhs.control1.y + rhs.control1.y),
65            control2: CGPoint(
66                x: lhs.control2.x + rhs.control2.x,
67                y: lhs.control2.y + rhs.control2.y))
68    }
69    
70    static func += (lhs: inout AnimatableCubicCurve, rhs: AnimatableCubicCurve) {
71        lhs = lhs + rhs
72    }
73}

Next, define a CubicCurveShape Shape that uses the AnimatableCubicCurve for the AnimatableData. This can be constructed either with the four points or with an AnimatableCubicCurve.

 1struct CubicCurveShape: Shape {
 2    var startPoint: CGPoint
 3    var endPoint: CGPoint
 4    var controlPoint1: CGPoint
 5    var controlPoint2: CGPoint
 6    
 7    private var animatableSegment: AnimatableCubicCurve
 8    
 9    var animatableData: AnimatableCubicCurve {
10        get { AnimatableCubicCurve(
11            start: startPoint, end: endPoint, control1: controlPoint1, control2: controlPoint2) }
12        set {
13            startPoint = newValue.start
14            endPoint = newValue.end
15            controlPoint1 = newValue.control1
16            controlPoint2 = newValue.control2
17        }
18    }
19    
20    init(startPoint: CGPoint, endPoint: CGPoint, controlPoint1: CGPoint, controlPoint2: CGPoint) {
21        self.startPoint = startPoint
22        self.endPoint = endPoint
23        self.controlPoint1 = controlPoint1
24        self.controlPoint2 = controlPoint2
25        self.animatableSegment = AnimatableCubicCurve(
26            start: startPoint,
27            end: endPoint,
28            control1: controlPoint1,
29            control2: controlPoint2)
30    }
31    
32    init(curve: AnimatableCubicCurve) {
33        self.init(startPoint: curve.start,
34                  endPoint: curve.end,
35                  controlPoint1: curve.control1,
36                  controlPoint2: curve.control2)
37    }
38    
39    func path(in rect: CGRect) -> Path {
40        let start = CGPoint(x: startPoint.x * rect.width,
41                            y: startPoint.y * rect.height)
42        let end = CGPoint(x: rect.width * endPoint.x,
43                          y: rect.height * endPoint.y)
44        let control1 = CGPoint(x: rect.width * controlPoint1.x,
45                               y: rect.height * controlPoint1.y)
46        let control2 = CGPoint(x: rect.width * controlPoint2.x,
47                               y: rect.height * controlPoint2.y)
48        
49        var path = Path()
50        path.move(to: start)
51        path.addCurve(to: end, control1: control1, control2: control2)
52        return path
53    }
54}

Display AnimatableCubicCurve

Two cubic curves are defined and CubicCurveShape is used to transition from one curve to another when the button is selected. The line move is animated as well as the color change. The start point, end point and control points all transition smoothly from one location to another.

 1struct CurveView1: View {
 2    @State private var changeCurve = true
 3    
 4    let segment1 = AnimatableCubicCurve(
 5        start: CGPoint(x: 0.8, y: 0.0),
 6        end: CGPoint(x: 0.2, y: 1.0),
 7        control1: CGPoint(x: 0.1, y: 0.25),
 8        control2: CGPoint(x: 0.9, y: 0.75)
 9    )
10    let segment2 = AnimatableCubicCurve(
11        start: CGPoint(x: 0.2, y: 0.9),
12        end: CGPoint(x: 0.9, y: 0.7),
13        control1: CGPoint(x: 1.0, y: 1.0),
14        control2: CGPoint(x: 0.0, y: 0.0)
15    )
16    
17    var body: some View {
18        VStack(spacing:30) {
19            Text("Animatable Cubic Curve")
20            
21            CubicCurveShape(curve: changeCurve ? segment1 : segment2)
22                .stroke(changeCurve ? Color(.purple) : .orange, lineWidth: 4.0)
23                .frame(width: 250, height: 250)
24                .animation(.linear(duration: 1))
25            
26            Button("Change") {
27                changeCurve.toggle()
28            }
29            .buttonStyle(BlueButtonStyle())
30            
31            Spacer()
32        }
33    }
34}

Animatable cubic curve

Animate a cubic curve transition

Animate a cubic curve

Animate a cubic curve

Animate a sequence of curve lines

An array of AnimatableCubicCurve is defined and the index of the selected curve is changed with a Timer. The timer is set to update every second and increment the index of the selected curve some the series of Cubic curves is cycled through and each transition is animated.

 1struct curves {
 2    static let segments = createSegments()
 3    static func createSegments() -> [AnimatableCubicCurve] {
 4        var segs = [AnimatableCubicCurve]()
 5        for i in (0...5) {
 6            let seg = AnimatableCubicCurve(
 7                start: CGPoint(x: 0.0 + (0.2 * Double(i)), y: 0.0 + (0.2 * Double(i))),
 8                end: CGPoint(x: 1.0 - (0.2 * Double(i)), y: 1.0 - (0.2 * Double(i))),
 9                control1: CGPoint(x: 0.0, y: 0.0 + (0.2 * Double(i))),
10                control2: CGPoint(x: 1.0, y: 1.0 - (0.2 * Double(i))))
11            segs.append(seg)
12        }
13        for i in (0...5) {
14            let seg = AnimatableCubicCurve(
15                start: CGPoint(x: 1.0, y: 1.0 - (0.2 * Double(i))),
16                end: CGPoint(x: 0.0, y: 0.0 + (0.2 * Double(i))),
17                control1: CGPoint(x: 1.0 - (0.2 * Double(i)), y: 1.0 - (0.2 * Double(i))),
18                control2: CGPoint(x: 1.0 - (0.2 * Double(i)), y: 0.0 + (0.2 * Double(i))))
19            segs.append(seg)
20        }
21        return segs
22    }
23}

 1struct CurveView2: View {
 2    @State private var index = 0
 3    @State private var counter = 0
 4    
 5    let timer = Timer.publish(every: 1,
 6                              on: .main,
 7                              in: .common)
 8        .autoconnect()
 9    let colors:[Color] = [.red, .orange, .yellow, .green, .blue, .purple]
10    let segments = curves.segments
11    
12    var body: some View {
13        VStack(spacing:30) {
14            Text("Animatable Cubic Curve")
15            
16            CubicCurveShape(curve: segments[index])
17                .stroke(colors[index % colors.count], lineWidth: 4.0)
18                .frame(width: 250, height: 300)
19                .animation(.linear(duration: 1))
20                .onReceive(timer) { time in
21                    if self.counter == (segments.count * 3) {
22                        self.timer.upstream.connect().cancel()
23                    } else {
24                        self.index = (self.index + 1) % segments.count
25                    }
26                    
27                    self.counter += 1
28                }
29            
30            Spacer()
31        }
32    }
33}

Animate a series of curves

Animate a series of curves

Combining curves to make a shape

This code defines the shapes of the Playing card suits as an array of AnimatableCubicCurves. These are variations on the shapes used in Create a blob shape in SwiftUI except All segments of the shapes are defined using AnimatableCubicCurve.

 1struct Suit {
 2    static let spade = [
 3        AnimatableCubicCurve(start: CGPoint(x: 0.50, y: 0.00), end: CGPoint(x: 0.85, y: 0.40), control1: CGPoint(x: 0.60, y: 0.30), control2: CGPoint(x: 0.60, y: 0.30)),
 4        AnimatableCubicCurve(start: CGPoint(x: 0.85, y: 0.40), end: CGPoint(x: 0.55, y: 0.65), control1: CGPoint(x: 1.15, y: 0.50), control2: CGPoint(x: 0.95, y: 1.20)),
 5        AnimatableCubicCurve(start: CGPoint(x: 0.55, y: 0.65), end: CGPoint(x: 0.70, y: 0.90), control1: CGPoint(x: 0.55, y: 0.80), control2: CGPoint(x: 0.55, y: 0.80)),
 6        AnimatableCubicCurve(start: CGPoint(x: 0.70, y: 0.90), end: CGPoint(x: 0.70, y: 1.00), control1: CGPoint(x: 0.80, y: 0.98), control2: CGPoint(x: 0.80, y: 0.98)),
 7        AnimatableCubicCurve(start: CGPoint(x: 0.70, y: 1.00), end: CGPoint(x: 0.30, y: 1.00), control1: CGPoint(x: 0.70, y: 1.00), control2: CGPoint(x: 0.70, y: 1.00)),
 8        AnimatableCubicCurve(start: CGPoint(x: 0.30, y: 1.00), end: CGPoint(x: 0.30, y: 0.90), control1: CGPoint(x: 0.20, y: 0.98), control2: CGPoint(x: 0.20, y: 0.98)),
 9        AnimatableCubicCurve(start: CGPoint(x: 0.30, y: 0.90), end: CGPoint(x: 0.45, y: 0.65), control1: CGPoint(x: 0.45, y: 0.80), control2: CGPoint(x: 0.45, y: 0.80)),
10        AnimatableCubicCurve(start: CGPoint(x: 0.45, y: 0.65), end: CGPoint(x: 0.15, y: 0.40), control1: CGPoint(x: 0.05, y: 1.20), control2: CGPoint(x: -0.15, y: 0.50)),
11        AnimatableCubicCurve(start: CGPoint(x: 0.15, y: 0.40), end: CGPoint(x: 0.50, y: 0.00), control1: CGPoint(x: 0.40, y: 0.30), control2: CGPoint(x: 0.40, y: 0.30))
12    ]
13
14    static let club = [
15        AnimatableCubicCurve(start: CGPoint(x: 0.30, y: 0.30), end: CGPoint(x: 0.70, y: 0.30), control1: CGPoint(x: 0.0, y: -0.1), control2: CGPoint(x: 1.0, y: -0.1)),
16        AnimatableCubicCurve(start: CGPoint(x: 0.70, y: 0.30), end: CGPoint(x: 0.55, y: 0.45), control1: CGPoint(x: 0.70, y: 0.30), control2: CGPoint(x: 0.70, y: 0.30)),
17        AnimatableCubicCurve(start: CGPoint(x: 0.55, y: 0.45), end: CGPoint(x: 0.55, y: 0.70), control1: CGPoint(x: 1.15, y: 0.0), control2: CGPoint(x: 1.15, y: 1.20)),
18        AnimatableCubicCurve(start: CGPoint(x: 0.55, y: 0.70), end: CGPoint(x: 0.70, y: 1.0), control1: CGPoint(x: 0.55, y: 0.70), control2: CGPoint(x: 0.55, y: 0.70)),
19        AnimatableCubicCurve(start: CGPoint(x: 0.70, y: 1.0), end: CGPoint(x: 0.30, y: 1.0), control1: CGPoint(x: 0.70, y: 1.0), control2: CGPoint(x: 0.70, y: 1.0)),
20        AnimatableCubicCurve(start: CGPoint(x: 0.30, y: 1.0), end: CGPoint(x: 0.45, y: 0.70), control1: CGPoint(x: 0.30, y: 1.0), control2: CGPoint(x: 0.30, y: 1.0)),
21        AnimatableCubicCurve(start: CGPoint(x: 0.45, y: 0.70), end: CGPoint(x: 0.45, y: 0.45), control1: CGPoint(x: -0.15, y: 1.2), control2: CGPoint(x: -0.15, y: 0.0)),
22        AnimatableCubicCurve(start: CGPoint(x: 0.45, y: 0.45), end: CGPoint(x: 0.3, y: 0.3), control1: CGPoint(x: 0.45, y: 0.45), control2: CGPoint(x: 0.45, y: 0.45))
23    ]
24
25    static let diamond = [
26        AnimatableCubicCurve(start: CGPoint(x: 0.5, y: 0.0), end: CGPoint(x: 1.0, y: 0.5), control1: CGPoint(x: 0.7, y: 0.3), control2: CGPoint(x: 0.7, y: 0.3)),
27        AnimatableCubicCurve(start: CGPoint(x: 1.0, y: 0.5), end: CGPoint(x: 0.5, y: 1.0), control1: CGPoint(x: 0.7, y: 0.7), control2: CGPoint(x: 0.7, y: 0.7)),
28        AnimatableCubicCurve(start: CGPoint(x: 0.5, y: 1.0), end: CGPoint(x: 0.0, y: 0.5), control1: CGPoint(x: 0.3, y: 0.7), control2: CGPoint(x: 0.3, y: 0.7)),
29        AnimatableCubicCurve(start: CGPoint(x: 0.0, y: 0.5), end: CGPoint(x: 0.5, y: 0.0), control1: CGPoint(x: 0.3, y: 0.3), control2: CGPoint(x: 0.3, y: 0.3))
30    ]
31
32    static let heart = [
33        AnimatableCubicCurve(start: CGPoint(x: 0.5, y: 0.25), end: CGPoint(x: 1.0, y: 0.25), control1: CGPoint(x: 0.5, y: -0.1), control2: CGPoint(x: 1.0, y: 0.0)),
34        AnimatableCubicCurve(start: CGPoint(x: 1.0, y: 0.25), end: CGPoint(x: 0.5, y: 1.0), control1: CGPoint(x: 1.0, y: 0.6), control2: CGPoint(x: 0.5, y: 0.8)),
35        AnimatableCubicCurve(start: CGPoint(x: 0.5, y: 1.0), end: CGPoint(x: 0.0, y: 0.25), control1: CGPoint(x: 0.5, y: 0.8), control2: CGPoint(x: 0.0, y: 0.6)),
36        AnimatableCubicCurve(start: CGPoint(x: 0.0, y: 0.25), end: CGPoint(x: 0.5, y: 0.25), control1: CGPoint(x: 0.0, y: 0.0), control2: CGPoint(x: 0.5, y: -0.1))
37    ]
38}

The cubic line segments are arranged in a ZStack to create the shape of the card suit. A loop is used inside the ZStack to add a stroke for the shape. The card suit is changed from one suit to another with the use of a state variable changeCurve. This codes switches from Club to Spade and also from heard to diamond. These shapes have similar number of lines and the animation effect shows the shape breaking up into component lines and rearranging into the new shape.

 1struct SuitChangeView1: View {
 2    @State private var changeCurve = true
 3    
 4    var body: some View {
 5        VStack(spacing:30) {
 6            Text("Shape change with Animatable Cubic Curve")
 7            
 8            Spacer()
 9                .frame(height:20)
10            
11            HStack(spacing:30) {
12                ZStack {
13                    ForEach(0..<max(Suit.club.count, Suit.spade.count)) { i in
14                        CubicCurveShape(curve: changeCurve ? Suit.club[(i % Suit.club.count)] : Suit.spade[(i % Suit.spade.count)])
15                            .stroke(changeCurve ? Color(.black) : .blue, lineWidth: 4.0)
16                    }
17                }
18                .frame(width: 150, height: 150)
19                .animation(.linear(duration: 1))
20                
21                ZStack {
22                    ForEach(0..<max(Suit.heart.count, Suit.diamond.count)) { i in
23                        CubicCurveShape(curve: changeCurve ? Suit.heart[(i % Suit.heart.count)] : Suit.diamond[(i % Suit.diamond.count)])
24                            .stroke(changeCurve ? Color(.red) : .orange, lineWidth: 4.0)
25                    }
26                }
27                .frame(width: 150, height: 150)
28                .animation(.linear(duration: 1))
29                
30            }
31            
32            Spacer()
33                .frame(height:20)
34                        
35            Button("Change") {
36                self.changeCurve.toggle()
37            }
38            .buttonStyle(BlueButtonStyle())
39            
40            Spacer()
41        }
42    }
43}

Transition to shape with similar number of segments

Transition to shape with similar number of segments

Shapes with different number of segments

The transition from one shape to another using the AnimatableCubicCurve in a ZStack works much better when the number of segments are equal. This can be seen in the animation from heart to diamond and back again. The code that loops through the shape segments does allow for shapes with different number of segments by cycling around to the start of the shape. If you look closely it can be seen that there are duplicate lines in the simpler shapes like heart when it is transitioned from the club shape.

 1struct SuitChangeView2: View {
 2    @State private var changeCurve = true
 3    
 4    var body: some View {
 5        VStack(spacing:50) {
 6            Text("Shape change with Animatable Cubic Curve")
 7            
 8            HStack(spacing:40) {
 9                ZStack {
10                    ForEach(0..<max(Suit.club.count, Suit.heart.count)) { i in
11                        CubicCurveShape(curve: changeCurve ?
12                                            Suit.club[(i % Suit.club.count)] :
13                                            Suit.heart[(i % Suit.heart.count)])
14                            .stroke(changeCurve ? Color(.black) : .red, lineWidth: 4.0)
15                    }
16                }
17                .frame(width: 200, height: 200)
18                .animation(.linear(duration: 1))
19                
20                ZStack {
21                    ForEach(0..<max(Suit.heart.count, Suit.spade.count)) { i in
22                        CubicCurveShape(curve: changeCurve ?
23                                            Suit.heart[(i % Suit.heart.count)] :
24                                            Suit.spade[(i % Suit.spade.count)])
25                            .stroke(changeCurve ? Color(.red) : .black, lineWidth: 4.0)
26                    }
27                }
28                .frame(width: 200, height: 200)
29                .animation(.linear(duration: 1))
30                
31                ZStack {
32                    ForEach(0..<max(Suit.diamond.count, Suit.spade.count)) { i in
33                        CubicCurveShape(curve: changeCurve ?
34                                            Suit.spade[(i % Suit.spade.count)] :
35                                            Suit.diamond[(i % Suit.diamond.count)])
36                            .stroke(changeCurve ? Color(.black) : .red, lineWidth: 4.0)
37                    }
38                }
39                .frame(width: 200, height: 200)
40                .animation(.linear(duration: 1))
41                
42                ZStack {
43                    ForEach(0..<max(Suit.club.count, Suit.diamond.count)) { i in
44                        CubicCurveShape(curve: changeCurve ?
45                                            Suit.diamond[(i % Suit.diamond.count)] :
46                                            Suit.club[(i % Suit.club.count)])
47                            .stroke(changeCurve ? Color(.red) : .black, lineWidth: 4.0)
48                    }
49                }
50                .frame(width: 200, height: 200)
51                .animation(.linear(duration: 1))
52            }
53            
54            Button("Change") {
55                self.changeCurve.toggle()
56            }
57            .buttonStyle(BlueButtonStyle())
58            
59            Spacer()
60        }
61    }
62}

Transition to shape with different number of segments

Transition to shape with different number of segments

Conclusion

This article built on the animation of quadratic Bézier curve by defining AnimatableCubicCurve to animate changes to cubic Bézier curves.The animation of a cubic curve requires the animation of eight values - the coordinates of the start, end and two control points of the cubic curve path. This is achieved by defining a structure for AnimatableCubicCurve that conforms to the VectorArithmetic protocol and using this new type as the AnimatableData in a shape structure. The CubicCurveShape structure can be used in views to animate the transition from straight lines, through quadratic curves to cubic curves as all these paths can be defined as cubic Bézier paths.

The cubic line segments can be arranged in a ZStack to create shapes. The change from one shape to another can be animated by changing the individual segments. The transition from one shape to another is better when the number of segments are equal. Animation of shape change between shapes with different number of segments is shown and duplicate segments can be seen in the more simpler shapes during the transition.

How to animate a quadratic curve change in SwiftUI

Eric Callanan — Sunday, 30 May 2021

Continuing on the exploration of animating Paths in SwiftUI. This article shows how to animate the movement of a quadratic curved line from one position to another. The smooth transition from a straight line to a curved line is also shown by adjusting the control point.

Animated Quadratic Curve Change

In How to animate a line move in SwiftUI we defined an AnimatableSegment that conforms to VectorArithmetic protocol, so it can be used in the animatableData instance property of an animatable line segment Shape. We now do the same for the quadratic curve path. This code defines AnimatableQuadCurve that conforms to VectorArithmetic. It takes three CGPoints for the start point, end point and the quadratic curve control point. With the three points that define a quadratic curve in a struct that conforms to VectorArithmetic, it can be used as the animatableData for a shape so SwiftUI will be able to animate transition from one quadratic curve to another.

 1struct AnimatableQuadCurve : VectorArithmetic {
 2    var start: CGPoint
 3    var end: CGPoint
 4    var control: CGPoint
 5
 6    var length: Double {
 7        return Double(((end.x - start.x) * (end.x - start.x)) +
 8                        ((end.y - start.y) * (end.y - start.y))).squareRoot()
 9    }
10
11    var magnitudeSquared: Double {
12        return length * length
13    }
14
15    mutating func scale(by rhs: Double) {
16        self.start.x.scale(by: rhs)
17        self.start.y.scale(by: rhs)
18        self.end.x.scale(by: rhs)
19        self.end.y.scale(by: rhs)
20        self.control.x.scale(by: rhs)
21        self.control.y.scale(by: rhs)
22    }
23
24    static var zero: AnimatableQuadCurve {
25        return AnimatableQuadCurve(start: CGPoint(x: 0.0, y: 0.0),
26                                   end: CGPoint(x: 0.0, y: 0.0),
27                                   control: CGPoint(x: 0.0, y: 0.0))
28    }
29
30    static func - (lhs: AnimatableQuadCurve, rhs: AnimatableQuadCurve) -> AnimatableQuadCurve {
31        return AnimatableQuadCurve(
32            start: CGPoint(
33                x: lhs.start.x - rhs.start.x,
34                y: lhs.start.y - rhs.start.y),
35            end: CGPoint(
36                x: lhs.end.x - rhs.end.x,
37                y: lhs.end.y - rhs.end.y),
38            control: CGPoint(
39                x: lhs.control.x - rhs.control.x,
40                y: lhs.control.y - rhs.control.y))
41    }
42
43    static func -= (lhs: inout AnimatableQuadCurve, rhs: AnimatableQuadCurve) {
44        lhs = lhs - rhs
45    }
46
47    static func + (lhs: AnimatableQuadCurve, rhs: AnimatableQuadCurve) -> AnimatableQuadCurve {
48        return AnimatableQuadCurve(
49            start: CGPoint(
50                x: lhs.start.x + rhs.start.x,
51                y: lhs.start.y + rhs.start.y),
52            end: CGPoint(
53                x: lhs.end.x + rhs.end.x,
54                y: lhs.end.y + rhs.end.y),
55            control: CGPoint(
56                x: lhs.control.x + rhs.control.x,
57                y: lhs.control.y + rhs.control.y))
58    }
59
60    static func += (lhs: inout AnimatableQuadCurve, rhs: AnimatableQuadCurve) {
61        lhs = lhs + rhs
62    }
63}

A QuadCurveShape is defined that uses the AnimatableQuadCurve as the animatableData and implements the Path function for the quadratic curve from the start point to the end point with the specified control point. The points are defined with coordinates between 0.0 and 1.0 and the path adjusted to fit inside the allocated frame for the shape.

 1struct QuadCurveShape: Shape {
 2    var startPoint: CGPoint
 3    var endPoint: CGPoint
 4    var controlPoint: CGPoint
 5
 6    private var animatableSegment: AnimatableQuadCurve
 7
 8    var animatableData: AnimatableQuadCurve {
 9        get { AnimatableQuadCurve(
10            start: startPoint, end: endPoint, control: controlPoint) }
11        set {
12            startPoint = newValue.start
13            endPoint = newValue.end
14            controlPoint = newValue.control
15        }
16    }
17
18    init(startPoint: CGPoint, endPoint: CGPoint, controlPoint: CGPoint) {
19        self.startPoint = startPoint
20        self.endPoint = endPoint
21        self.controlPoint = controlPoint
22        self.animatableSegment = AnimatableQuadCurve(
23            start: startPoint,
24            end: endPoint,
25            control: controlPoint)
26    }
27
28    func path(in rect: CGRect) -> Path {
29        let start = CGPoint(x: startPoint.x * rect.width,
30                            y: startPoint.y * rect.height)
31        let end = CGPoint(x: endPoint.x * rect.width,
32                          y: endPoint.y * rect.height)
33        let control = CGPoint(x: controlPoint.x * rect.width,
34                          y: controlPoint.y * rect.height)
35        var path = Path()
36        path.move(to: start)
37        path.addQuadCurve(to: end, control: control)
38        return path
39    }
40}

This code shows the use of the QuadCurveShape in a view smoothly animating when the button is clicked.

 1struct QuadCurveView1: View {
 2    @State private var changeCurve = true
 3
 4    var body: some View {
 5        VStack(spacing:50) {
 6            Text("Animatable Quadratic Curve")
 7
 8            HStack {
 9                QuadCurveShape(startPoint: CGPoint(
10                                x: changeCurve ? 0.2 : 0.8,
11                                y: changeCurve ? 0.3 : 0.9),
12                               endPoint: CGPoint(
13                                x: changeCurve ? 0.5 : 0.9,
14                                y: changeCurve ? 0.9 : 0.4),
15                               controlPoint: CGPoint(x: 0.5, y: 0.2))
16                    .stroke(changeCurve ? Color(.red) : .purple, lineWidth: 4.0)
17                    .frame(width: 200, height: 250)
18                    .animation(.linear(duration: 1))
19
20                QuadCurveShape(startPoint: CGPoint(
21                                x: 0.5,
22                                y: changeCurve ? 0.1 : 0.9),
23                               endPoint: CGPoint(
24                                x: 0.5,
25                                y: changeCurve ? 0.9 : 0.1),
26                               controlPoint: CGPoint(
27                                x: changeCurve ? 0.1 : 0.9,
28                                y: 0.5))
29                    .stroke(changeCurve ? Color(.red) : .purple, lineWidth: 4.0)
30                    .frame(width: 200, height: 250)
31                    .animation(.linear(duration: 1))
32
33                QuadCurveShape(startPoint: CGPoint(
34                                x: 0.5,
35                                y: 0.9),
36                               endPoint: CGPoint(
37                                x: 0.5,
38                                y: 0.1),
39                               controlPoint: CGPoint(
40                                x: changeCurve ? 0.1 : 0.9,
41                                y: 0.5))
42                    .stroke(changeCurve ? Color(.red) : .purple, lineWidth: 4.0)
43                    .frame(width: 200, height: 250)
44                    .animation(.linear(duration: 1))
45            }
46
47            Button("Change Curve") {
48                changeCurve.toggle()
49            }
50            .buttonStyle(BlueButtonStyle())
51
52            Spacer()
53        }
54    }
55}

Animate movement of quadratic curves

Animate movement of quadratic curves

Add initializer to take AnimatableQuadCurve

In a view with QuadCurveShape all three points have to be specified. It would be nice to be able to define a number of curves and set the animation to change from one curve to another. This is done by adding another initializer to the QuadCurveShape that takes an AnimatableQuadCurve as the only parameter.

 1struct QuadCurveShape: Shape {
 2
 3    ...
 4
 5    init(startPoint: CGPoint, endPoint: CGPoint, controlPoint: CGPoint) {
 6        self.startPoint = startPoint
 7        self.endPoint = endPoint
 8        self.controlPoint = controlPoint
 9        self.animatableSegment = AnimatableQuadCurve(
10            start: startPoint,
11            end: endPoint,
12            control: controlPoint)
13    }
14
15    init(curve: AnimatableQuadCurve) {
16        self.init(startPoint: curve.start, endPoint: curve.end, controlPoint: curve.control)
17    }
18
19    ...

With this change to QuadCurveShape, it is possible to define curve shapes and switch from one curve to another. The change in curve is smoothly animated.

 1struct QuadCurveView2: View {
 2    @State private var changeCurve = true
 3
 4    let quadCurve1 = AnimatableQuadCurve(
 5        start: CGPoint(x: 0.2, y: 0.8),
 6        end: CGPoint(x: 0.8, y: 0.9),
 7        control: CGPoint(x: 0.5, y: 0.2))
 8
 9    let quadCurve2 = AnimatableQuadCurve(
10        start: CGPoint(x: 0.1, y: 0.2),
11        end: CGPoint(x: 0.9, y: 0.2),
12        control: CGPoint(x: 0.6, y: 1.2))
13
14    var body: some View {
15        VStack(spacing:50)  {
16            Text("Animatable Quadratic Curve")
17
18            QuadCurveShape(curve: changeCurve ? quadCurve1 : quadCurve2)
19                .stroke(changeCurve ? Color(.red) : .purple, lineWidth: 4.0)
20                .frame(width: 450, height: 250)
21                .animation(.linear(duration: 1))
22
23            Button("Change Curve") {
24                changeCurve.toggle()
25            }
26            .buttonStyle(BlueButtonStyle())
27
28            Spacer()
29        }
30    }
31}

Animate movement of a quadratic curve

Animate movement of a quadratic curve

Animate Quadratic Curved line to Straight line

Is is possible to use the AnimatableQuadCurve structure to specify a straight line if the control point is on the straight line between the two end points. This code defines three AnimatableQuadCurves that change the control point through the line between the two endpoints. The change from a curved line to a straight line is animated. The color is cycled through three colors to demonstrate how the line position and color are changed simultaneously.

 1struct CurveToLineView: View {
 2    @State private var index = 0
 3
 4    let colors:[Color] = [.red, .green, .blue]
 5    let quadCurves = [
 6        AnimatableQuadCurve(start: CGPoint(x: 0.0, y: 1.0), end: CGPoint(x: 1.0, y: 0.0), control: CGPoint(x: 0.0, y: 0.0)),
 7        AnimatableQuadCurve(start: CGPoint(x: 0.0, y: 1.0), end: CGPoint(x: 1.0, y: 0.0), control: CGPoint(x: 0.5, y: 0.5)),
 8        AnimatableQuadCurve(start: CGPoint(x: 0.0, y: 1.0), end: CGPoint(x: 1.0, y: 0.0), control: CGPoint(x: 1.0, y: 1.0))
 9    ]
10
11    var body: some View {
12        VStack(spacing:50) {
13            Text("Animatable Curve to Line")
14
15            QuadCurveShape(curve: quadCurves[index])
16                .stroke(colors[index], lineWidth: 4.0)
17                .frame(width: 450, height: 250)
18                .animation(.linear(duration: 1))
19
20            Button("Change Curve") {
21                self.index = (self.index + 1) % 3
22            }
23            .buttonStyle(BlueButtonStyle())
24
25            Spacer()
26        }
27    }
28}

Animate movement of a quadratic curve to a straight line

Animate movement of a quadratic curve to a straight line

Diamond Shape

The diamond shape can be created by combining four quadratic curves. A view is created by combining four quadratic curves in a ZStack. The diamond can be animated by animating each curve change.

 1struct DiamondView: View {
 2    @State private var index = 0
 3
 4    let colors:[Color] = [.red, .orange, .yellow, .green]
 5    let diamond = [
 6        AnimatableQuadCurve(start: CGPoint(x: 0.5, y: 0.0), end: CGPoint(x: 1.0, y: 0.5), control: CGPoint(x: 0.6, y: 0.4)),
 7        AnimatableQuadCurve(start: CGPoint(x: 1.0, y: 0.5), end: CGPoint(x: 0.5, y: 1.0), control: CGPoint(x: 0.6, y: 0.6)),
 8        AnimatableQuadCurve(start: CGPoint(x: 0.5, y: 1.0), end: CGPoint(x: 0.0, y: 0.5), control: CGPoint(x: 0.4, y: 0.6)),
 9        AnimatableQuadCurve(start: CGPoint(x: 0.0, y: 0.5), end: CGPoint(x: 0.5, y: 0.0), control: CGPoint(x: 0.4, y: 0.4))
10    ]
11
12    var body: some View {
13        VStack(spacing:50) {
14            Text("Animatable Diamond Shape")
15
16            ZStack {
17                ForEach(0..<diamond.count) { i in
18                    QuadCurveShape(curve: diamond[(i+index)%diamond.count])
19                        .stroke(colors[index], lineWidth: 8.0)
20                }
21            }
22            .frame(width: 300, height: 300)
23            .animation(.linear(duration: 1))
24
25            Button("Change") {
26                self.index = (self.index + 1) % diamond.count
27            }
28            .buttonStyle(BlueButtonStyle())
29
30            Spacer()
31        }
32    }
33}

Animate rotation of diamond shape by moving quadratic curves

Animate rotation of diamond shape by moving quadratic curves

Animate shape change

The animation can be modified by changing the quadratic curves that are moved. This code defines three shapes and animates change between them changing the AnimatableQuadCurves.

 1struct ShapeChangeView: View {
 2    @State private var shapeIndex = 0
 3    @State private var colorIndex = 0
 4    @State private var index1 = 0
 5    @State private var index2 = 0
 6
 7    let colors:[Color] = [.red, .orange, .yellow, .green, .blue, .purple]
 8    let shapes = [[
 9        AnimatableQuadCurve(start: CGPoint(x: 0.5, y: 0.0), end: CGPoint(x: 1.0, y: 0.5), control: CGPoint(x: 0.6, y: 0.4)),
10        AnimatableQuadCurve(start: CGPoint(x: 1.0, y: 0.5), end: CGPoint(x: 0.5, y: 1.0), control: CGPoint(x: 0.6, y: 0.6)),
11        AnimatableQuadCurve(start: CGPoint(x: 0.5, y: 1.0), end: CGPoint(x: 0.0, y: 0.5), control: CGPoint(x: 0.4, y: 0.6)),
12        AnimatableQuadCurve(start: CGPoint(x: 0.0, y: 0.5), end: CGPoint(x: 0.5, y: 0.0), control: CGPoint(x: 0.4, y: 0.4))
13    ],
14    [
15        AnimatableQuadCurve(start: CGPoint(x: 0.5, y: 0.0), end: CGPoint(x: 1.0, y: 0.5), control: CGPoint(x: 0.75, y: 0.25)),
16        AnimatableQuadCurve(start: CGPoint(x: 1.0, y: 0.5), end: CGPoint(x: 0.5, y: 1.0), control: CGPoint(x: 0.75, y: 0.75)),
17        AnimatableQuadCurve(start: CGPoint(x: 0.5, y: 1.0), end: CGPoint(x: 0.0, y: 0.5), control: CGPoint(x: 0.25, y: 0.75)),
18        AnimatableQuadCurve(start: CGPoint(x: 0.0, y: 0.5), end: CGPoint(x: 0.5, y: 0.0), control: CGPoint(x: 0.25, y: 0.25))
19    ],
20    [
21        AnimatableQuadCurve(start: CGPoint(x: 0.5, y: 0.0), end: CGPoint(x: 1.0, y: 0.5), control: CGPoint(x: 1.0, y: 0.0)),
22        AnimatableQuadCurve(start: CGPoint(x: 1.0, y: 0.5), end: CGPoint(x: 0.5, y: 1.0), control: CGPoint(x: 1.0, y: 1.0)),
23        AnimatableQuadCurve(start: CGPoint(x: 0.5, y: 1.0), end: CGPoint(x: 0.0, y: 0.5), control: CGPoint(x: 0.0, y: 1.0)),
24        AnimatableQuadCurve(start: CGPoint(x: 0.0, y: 0.5), end: CGPoint(x: 0.5, y: 0.0), control: CGPoint(x: 0.0, y: 0.0))
25    ]]
26
27    var body: some View {
28        VStack(spacing:120) {
29            Text("Animatable Quadratic Curve")
30
31            HStack(spacing:50) {                
32                ZStack {
33                    ForEach(0..<4) { i in
34                        QuadCurveShape(curve: shapes[shapeIndex][i])
35                            .stroke(colors[colorIndex], lineWidth: 6.0)
36                    }
37                }
38                .frame(width: 250, height: 250)
39                .animation(.linear(duration: 1))
40
41                ZStack {
42                    ForEach(0..<4) { i in
43                        QuadCurveShape(curve: shapes[shapeIndex][(i+index1)%4])
44                            .stroke(colors[colorIndex], lineWidth: 6.0)
45                    }
46                }
47                .frame(width: 250, height: 250)
48                .animation(.linear(duration: 1))
49
50                ZStack {
51                    ForEach(0..<4) { i in
52                        QuadCurveShape(curve: shapes[shapeIndex][(i+index2)%4])
53                            .stroke(colors[colorIndex], lineWidth: 6.0)
54                    }
55                }
56                .frame(width: 250, height: 250)
57                .animation(.linear(duration: 1))
58            }
59
60            Button("Change") {
61                self.shapeIndex = (self.shapeIndex + 1) % self.shapes.count
62                self.colorIndex = (self.colorIndex + 1) % self.colors.count
63                self.index1 = (self.index1 + 1) % 4
64                self.index2 = (self.index2 + 2) % 4
65            }
66            .buttonStyle(BlueButtonStyle())
67
68            Spacer()
69        }
70    }
71}

Animate rotation and shape changing by moving quadratic curves

Animate rotation and shape changing by moving quadratic curves

Conclusion

Animation works well when there is a predefined transition from one state to another such as a color change. Animation of a quadratic curve requires the animation of six values - the coordinates of the start, end and control points of the quadratic curve path. This is achieved by defining a structure for AnimatableQuadCurve that conforms to the VectorArithmetic protocol and using this new type as the AnimatableData in a shape structure. The QuadCurveShape structure can be used in views and combined with other view layouts to create interesting animations.

How to animate a line move in SwiftUI

Eric Callanan — Sunday, 23 May 2021

Following on from creating blob shapes in SwiftUI, I started looking into animating a change from one shape to another. This article shows how to animate the movement of a straight line from one position to another.

Color and Scale change

As mentioned previously in Animating a shape change in SwiftUI, SwiftUI is great for animation with many feature provided by the SwiftUI framework. This code shows how to animate the size and color of a line segment that is defined using Path. The transition in size and color is animated smoothly when the button is pressed.

 1struct LineSegmentView: View {
 2    @State private var changeLine = false
 3
 4    var body: some View {
 5        VStack {
 6            Text("Scale animation")
 7
 8            LineSegment()
 9                .stroke(changeLine ? Color(.red) : .purple, lineWidth: 4.0)
10                .frame(width: 200, height: 150)
11                .scaleEffect(changeLine ? 0.5 : 1.0)
12                .animation(.linear(duration: 1))
13
14            Button("Change Line") {
15                changeLine.toggle()
16            }
17            .buttonStyle(BlueButtonStyle())
18
19            Spacer()
20        }
21    }
22}

 1struct LineSegment: Shape {
 2    func path(in rect: CGRect) -> Path {
 3        let start = CGPoint(x: 0.0, y: 0.0)
 4        let end = CGPoint(x: rect.width, y: rect.height)
 5
 6        var path = Path()
 7        path.move(to: start)
 8        path.addLine(to: end)
 9        return path
10    }
11}

A ButtonStyle is used to style the button.

 1struct BlueButtonStyle: ButtonStyle {
 2    func makeBody(configuration: Configuration) -> some View {
 3        configuration.label
 4            .font(.system(size: 24, weight:.bold, design: .rounded))
 5            .foregroundColor(.white)
 6            .padding(.horizontal)
 7            .padding(5)
 8            .background(Color.blue)
 9            .cornerRadius(10)
10            .shadow(color:.black, radius:3, x:3.0, y:3.0)
11            .opacity(configuration.isPressed ? 0.6 : 1.0)
12            .scaleEffect(configuration.isPressed ? 0.95 : 1.0)
13    }
14}

Animate a change in scale and color for a straight line

Animate a change in scale and color for a straight line

Move one point

Scale does move the line by scaling the line down, but this resizes the width and length of the line. What if we want to change the length of the line or move one end of a line, but not change the width? This code changes one point of the line as well as the color. The movement of the line is not animated, although the color change is.

LineSegment2 takes one parameter for the endpoint of the line and draws a line from (0,0) to this point. The coordinates for the point are between 0.0 and 1.0 and represent a proportion of the containing view. Remember that iOS coordinate system starts with (0,0) in the top left corner with x increasing across the screen and y increasing down the screen.

 1struct LineSegment2: Shape {
 2    var endPoint: CGPoint
 3
 4    func path(in rect: CGRect) -> Path {
 5        let start = CGPoint(x: 0.0, y: 0.0)
 6        let end = CGPoint(x: endPoint.x * rect.width,
 7                          y: endPoint.y * rect.height)
 8        var path = Path()
 9        path.move(to: start)
10        path.addLine(to: end)
11        return path
12    }
13}

 1struct LineSegment2View: View {
 2    @State private var changeLine = false
 3
 4    var body: some View {
 5        VStack {
 6            Text("Line move not animated")
 7
 8            LineSegment2(endPoint: CGPoint(
 9                            x: changeLine ? 0.3 : 1.0,
10                            y: changeLine ? 0.9: 1.0))
11                .stroke(changeLine ? Color(.red) : .purple, lineWidth: 4.0)
12                .frame(width: 200, height: 150)
13                .animation(.linear(duration: 2))
14
15            Button("Change Line") {
16                changeLine.toggle()
17            }
18            .buttonStyle(BlueButtonStyle())
19
20            Spacer()
21        }
22    }
23}

Move one point of line not animated by default

Move one point of line not animated by default

Use of AnimatablePair

The movement of the line is not animated because there are two pieces of data changing; the x coordinate; and the y coordinate. The Shape struct already conforms to Animatable protocol and has animatableData, but this is defaulted to EmptyAnimatableData. Modify the LineSegment3 shape to implement the animatableData instance property with an AnimatablePair. This AnimatablePair consists of the x and y coordinates of the line end point. SwiftUI now knows how to transition progressively from a line with one endpoint to another and produces a smooth animation.

 1struct LineSegment3: Shape {
 2    var endPoint: CGPoint
 3
 4    var animatableData: AnimatablePair<CGFloat, CGFloat> {
 5        get { AnimatablePair(endPoint.x, endPoint.y) }
 6        set {
 7            endPoint.x = newValue.first
 8            endPoint.y = newValue.second
 9        }
10    }
11
12    func path(in rect: CGRect) -> Path {
13        let start = CGPoint(x: 0.0, y: 0.0)
14        let end = CGPoint(x: endPoint.x * rect.width,
15                          y: endPoint.y * rect.height)
16        var path = Path()
17        path.move(to: start)
18        path.addLine(to: end)
19        return path
20    }
21}

Animate movement of one point of a line with AnimatablePair

Animate movement of one point of a line with AnimatablePair

AnimatableData and VectorArithmetic

The animatableData instance property works with data types that conform to VectorArithmetic protocol. We can create a structure that conforms to VectorArithmetic protocol if we want to animate the movement of a straight line when both endpoints are changing. This code defines an AnimatableSegment composed of two CGPoints.

 1struct AnimatableSegment : VectorArithmetic {
 2    var startPoint: CGPoint
 3    var endPoint: CGPoint
 4
 5    var length: Double {
 6        return Double(((endPoint.x - startPoint.x) * (endPoint.x - startPoint.x)) +
 7                        ((endPoint.y - startPoint.y) * (endPoint.y - startPoint.y))).squareRoot()
 8    }
 9
10    var magnitudeSquared: Double {
11        return length * length
12    }
13
14    mutating func scale(by rhs: Double) {
15        self.startPoint.x.scale(by: rhs)
16        self.startPoint.y.scale(by: rhs)
17        self.endPoint.x.scale(by: rhs)
18        self.endPoint.y.scale(by: rhs)
19    }
20
21    static var zero: AnimatableSegment {
22        return AnimatableSegment(startPoint: CGPoint(x: 0.0, y: 0.0),
23                                 endPoint: CGPoint(x: 0.0, y: 0.0))
24    }
25
26    static func - (lhs: AnimatableSegment, rhs: AnimatableSegment) -> AnimatableSegment {
27        return AnimatableSegment(
28            startPoint: CGPoint(x: lhs.startPoint.x - rhs.startPoint.x,
29                                y: lhs.startPoint.y - rhs.startPoint.y),
30            endPoint: CGPoint(x: lhs.endPoint.x - rhs.endPoint.x,
31                              y: lhs.endPoint.y - rhs.endPoint.y))
32    }
33
34    static func -= (lhs: inout AnimatableSegment, rhs: AnimatableSegment) {
35        lhs = lhs - rhs
36    }
37
38    static func + (lhs: AnimatableSegment, rhs: AnimatableSegment) -> AnimatableSegment {
39        return AnimatableSegment(
40            startPoint: CGPoint(x: lhs.startPoint.x + rhs.startPoint.x,
41                                y: lhs.startPoint.y + rhs.startPoint.y),
42            endPoint: CGPoint(x: lhs.endPoint.x + rhs.endPoint.x,
43                              y: lhs.endPoint.y + rhs.endPoint.y))
44    }
45
46    static func += (lhs: inout AnimatableSegment, rhs: AnimatableSegment) {
47        lhs = lhs + rhs
48    }
49}

Animate line segment move

The AnimatableSegment conforms to VectorArithmetic protocol, so it can be used in the animatableData instance property. This will provide enough information to SwiftUI to be able to transition both points at the same time and display intermediary paths between these points. A private variable is used for the AnimatableSegment, so the parameters required are still just a start point and end point. An initializer needs to be added to create the animatableSegment from the line points.

 1struct LineSegment4: Shape {
 2    var startPoint: CGPoint
 3    var endPoint: CGPoint
 4
 5    private var animatableSegment: AnimatableSegment
 6
 7    var animatableData: AnimatableSegment {
 8        get { AnimatableSegment(startPoint: startPoint, endPoint: endPoint) }
 9        set {
10            startPoint = newValue.startPoint
11            endPoint = newValue.endPoint
12        }
13    }
14
15    init(startPoint: CGPoint, endPoint: CGPoint) {
16        self.startPoint = startPoint
17        self.endPoint = endPoint
18        self.animatableSegment = AnimatableSegment(startPoint: startPoint, endPoint: endPoint)
19    }
20
21    func path(in rect: CGRect) -> Path {
22        let start = CGPoint(x: startPoint.x * rect.width,
23                            y: startPoint.y * rect.height)
24        let end = CGPoint(x: rect.width * endPoint.x,
25                          y: rect.height * endPoint.y)
26        var path = Path()
27        path.move(to: start)
28        path.addLine(to: end)
29        return path
30    }
31}

 1struct LineSegment4View: View {
 2    @State private var changeLine = false
 3
 4    var body: some View {
 5        VStack {
 6            Text("Animatable Line Segment")
 7
 8            LineSegment4(startPoint: CGPoint(
 9                            x: changeLine ? 0.2 : 0.8,
10                            y: changeLine ? 0.3 : 0.9),
11                         endPoint: CGPoint(
12                            x: changeLine ? 0.5 : 0.9,
13                            y: changeLine ? 0.9 : 0.4))
14                .stroke(changeLine ? Color(.red) : .purple, lineWidth: 4.0)
15                .frame(width: 250, height: 150)
16                .animation(.linear(duration: 2))
17
18            HStack {
19                LineSegment4(startPoint: CGPoint(
20                                x: changeLine ? 0.0 : 0.2,
21                                y: changeLine ? 0.0 : 0.9),
22                             endPoint: CGPoint(
23                                x: changeLine ? 0.2 : 0.9,
24                                y: changeLine ? 0.9 : 0.4))
25                    .stroke(Color.green, lineWidth: 4.0)
26                    .frame(width: 150, height: 150)
27                    .animation(.linear(duration: 2))
28                LineSegment4(startPoint: CGPoint(
29                                x: changeLine ? 1.0 : 0.1,
30                                y: changeLine ? 1.0 : 0.2),
31                             endPoint: CGPoint(
32                                x: changeLine ? 0.8 : 0.4,
33                                y: changeLine ? 0.1 : 0.7))
34                    .stroke(Color.orange, lineWidth: 4.0)
35                    .frame(width: 150, height: 150)
36                    .animation(.linear(duration: 2))
37            }
38
39            Button("Change Line") {
40                changeLine.toggle()
41            }
42            .buttonStyle(BlueButtonStyle())
43
44            Spacer()
45        }
46    }
47}

Animatable line segments using AnimatableData

Animatable line segments using AnimatableData

Conclusion

As discussed in Animating a shape change in SwiftUI, the SwiftUI framework does not know how to animate a Path change from one path to another. Animation works well when there is a predefined transition from one state to another such as a color change. The Shape struct already conforms to Animatable protocol, but has animatableData set to EmptyAnimatableData by default.

The movement of one point of a line requires the change of two values (the x and y coordinates). This can be implemented using an AnimatablePair in the animatableData instance property. The full animation of a line segment requires the animation of four values. AnimatableData can be set to one value or and AnimatablePair. The solution is to create a custom type that conforms to the VectorArithmetic protocol and use this new type as the AnimatableData.