This document discusses animations in SwiftUI. It provides an overview of basic animation properties like position, size, angle, shape, and color that can be animated. It also covers transformation animations using translation, scaling, rotation, and opacity. Different timing functions for animations like linear, easeIn, easeOut, easeInOut, and spring are demonstrated. The key concepts of Animatable and VectorArithmetic protocols that enable property animation are explained. Examples are provided to illustrate animating a star shape by modifying its edges property over time. Custom animatable modifiers like PercentageModifier are also demonstrated to create progress indicators. The document concludes by emphasizing the effective way to implement animation in SwiftUI.

1. Hoc Tran, iOS Developer at Seven Peaks Software
SwiftUI Animation
The basic overview

2. An overview

3. Basic animation properties
• Positio
n
• Siz
e
• Angl
e
• Shap
e
• Colo
r
• Etc

4. Transformation
Translatio
n
PCircle().offset(x: isOn ? 100 : 0, y: 0)
Scalin
g
PCircle().scaleEffect(isOn ? 1.5 : 0.5)
Rotatio
n
PCircle().rotationEffect(isOn ? .init(degrees: 360) : .zero)
Opacit
y
PCircle().opacity(isOn ? 1.0 : 0.2)
Background colo
r
PCircle().background(isOn ? Color.gray : Color.white)

5. Timing functions
Text(“Linear")
PCircle()
.offset(x: isOn ? 100 : 0, y: 0)
.animation(.linear(duration: 2.0))
Text("EaseIn")
PCircle()
.offset(x: isOn ? 100 : 0, y: 0)
.animation(.easeIn(duration: 2.0))
Text("EaseOut")
PCircle()
.offset(x: isOn ? 100 : 0, y: 0)
.animation(.easeOut(duration: 2.0))
Text("EaseInOut")
PCircle()
.offset(x: isOn ? 100 : 0, y: 0)
.animation(.easeInOut(duration: 2.0))
Text("Spring")
PCircle()
.offset(x: isOn ? 100 : 0, y: 0)
.animation(
.spring(response: 0.5, dampingFraction: 0.5,
blendDuration: 0.5)
)

6. Animatable

7. Animatable
/// A type that describes how to animate a property of a view.
public protocol Animatable {
/// The type de
fi
ning the data to animate.
associatedtype AnimatableData : VectorArithmetic
/// The data to animate.
var animatableData: Self.AnimatableData { get set }
}
extension Animatable where Self : VectorArithmetic {
/// The data to animate.
public var animatableData: Self
}

8. VectorArithmetic
Confirm AdditiveArithmeti
c
Scalar multiplicatio
n
public protocol VectorArithmetic : AdditiveArithmetic {
/// Multiplies each component of this value by the given value.
mutating func scale(by rhs: Double)
/// Returns the dot-product of this vector arithmetic instance with
itself.
var magnitudeSquared: Double { get }
}
let from = 0.0
let to = 1.0
[0.0, 0.2, 0.4, 0.6, 0.8, 1.0].forEach {
var range = (to - from)
range.scale(by: $0)
let opacity = range + from
img.opacity(opacity)
}
0.0 0.2 0.4 0.6 0.8 1.0
How the animation works

9. Animatable
Animatable
• Angl
e
• Capsul
e
• RoundedRectangl
e
• ScaledShap
e
• StrokeStyl
e
• TransformedShap
e
• etc
VectorArithmeti
c
• AnimatablePai
r
• CGFloa
t
• Doubl
e
• EmptyAnimatableDat
a
• Floa
t
Default conformation

10. Linus Torvalds
“Talk is cheap. Show me the code”

11. Example
How to guide the SwiftUI to achieve a
struct Star: Shape {
let edges: Int
func path(in rect: CGRect) -> Path {
let angleStep = Angle(degrees: 360 / Double(edges))
return starPath(steps: edges, angleStep: angleStep, rect: rect)
}
}
5 edges 10 edges 100 edges

12. Example
How to guide the SwiftUI to achieve a
Star(edges: edges)
.stroke(Color.purple, lineWidth: 5)
.frame(width: 300, height: 300)
Picker("# edges (edges)",
selection: $edges.animation(.easeInOut)) {
Text("5").tag(5)
Text("10").tag(10)
Text(“100").tag(100)
}
Whyyyyyyyyyyyyyyy?

13. Example
How to guide the SwiftUI to achieve a
struct AnimatableStar: Shape {
private var edges: Double
init(edges: Int) {
self.edges = Double(edges)
}
func path(in rect: CGRect) -> Path {
var n = Int(edges)
if edges > Double(Int(edges)) {
n += 1
}
let angleStep = Angle(degrees: 360 / edges)
return starPath(steps: n, angleStep: angleStep, rect: rect)
}
var animatableData: Double {
set { edges = newValue }
get { return edges }
}
}

14. Example
How to guide the SwiftUI to achieve a custom animation

15. Quiz
Af
fi
ne Transform
PCircle().transformEffect(isOn ?
CGAffineTransform.init(translationX: 100, y: 0)
: CGAffineTransform.identity
)
Button("Will it animate 🤔? Click me") {
withAnimation {
self.isOn.toggle()
}
}

16. GeometryEffect

17. GeometryEffect
public protocol GeometryEffect : Animatable, ViewModifier where Self.Body == Never {
/// Returns the current value of the effect.
func effectValue(size: CGSize) -> ProjectionTransform
}

18. GeometryEffect
Quiz resolving
struct AnimatableQuizEffect: GeometryEffect {
private (set) var dX: Double
var animatableData: Double {
get { dX }
set { dX = newValue }
}
func effectValue(size: CGSize) -> ProjectionTransform {
return ProjectionTransform(CGAffineTransform.init(translationX: CGFloat(dX), y: 0))
}
}
Animatable
GeometryEffect

19. GeometryEffect
Quiz resolving
PCircle()
.modifier(AnimatableQuizEffect(dX: isOn ? 100 : 0))
Button("It will animate 😉? Click me") {
withAnimation {
self.isOn.toggle()
}
}

20. Math behind the transformation
Translation
Scaling
Rotation
General
Consequenc
e
The concatenation is NOT commutative
.
•Rotation x Scaling ≠ Scaling x Rotatio
n
•Translation x Rotation ≠ Rotation x Translatio
n
•Et
c

21. Math behind the transformation
Consequenc
e
The concatenation is NOT commutative
.
•Rotation x Scaling ≠ Scaling x Rotatio
n
•Translation x Rotation ≠ Rotation x Translatio
n
•Et
c

22. AnimatableModifier

23. AnimatableModifier
public protocol AnimatableModifier : Animatable, ViewModifier {
}
public protocol Animatable {...}
public protocol ViewModifier {
func body(content: Self.Content) -> Self.Body
}

24. AnimatableModifier
A simple progress indicator
Circular
Sliding
20% 50% 75% 100%

25. Example
A simple progress indicator
struct PercentageModifier: AnimatableModifier {
...
private (set) var pct = 0.0
var animatableData: Double {
get { pct }
set { pct = newValue }
}
func body(content: Content) -> some View {
switch style {
case .sliding:
return AnyView(content.clipShape(SlidingShape(pct: pct)))
case .circular:
return AnyView(content.clipShape(CircularShape(pct: pct)))
}
}
private struct CircularShape: Shape {...}
private struct SlidingShape: Shape {...}
}
Animatable
ViewModi
fi
er
Circular progress Sliding progress

26. Example
A simple progress indicator
Circle()
.percentage(pct, style: .circular)
Image(systemName: "hand.thumbsup.fill")
.percentage(pct, style: .sliding)
Text("Happy New Year 🎉🎇🍾!")
.percentage(pct, style: .sliding)
Image(systemName: "thermometer")
.percentage(pct, style: .sliding)
Text("🎆")
.percentage(pct, style: .circular)
Rectangle()
.percentage(pct, style: .sliding)
.border(Color.yellow, width: 2)
.rotationEffect(Angle(degrees: 180))
Text("🦠")
.percentage(pct, style: .circular)

27. Conclusion
The effective way to implement animation
?
Animate like a boss!
https://github.com/7-peaks-software/iOS-Meetup-10.02.21 👈
Eat more vegetable 🍠🥑🍓🥗
Happy coding 👨💻👩💻

28. Q&A
Animate like a boss!