The basic overview of SwiftUI Animation.

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!