SwiftUI Animation - The basic overview

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

Basic animation properties
• Positio
n

• Siz
e

• Angl
e

• Shap
e

• Colo
r

• Etc

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)

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)

)

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

}

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

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

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

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

Example
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?

Example
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 }

}

}

Example
How to guide the SwiftUI to achieve a custom animation

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()

}

}

GeometryEffect
public protocol GeometryEffect : Animatable, ViewModifier where Self.Body == Never {

/// Returns the current value of the effect.

func effectValue(size: CGSize) -> ProjectionTransform

}

GeometryEffect
Quiz resolving
struct AnimatableQuizEffect: GeometryEffect {

private (set) var dX: Double


get { dX }

set { dX = newValue }

}

func effectValue(size: CGSize) -> ProjectionTransform {

return ProjectionTransform(CGAffineTransform.init(translationX: CGFloat(dX), y: 0))

}

}

Animatable
GeometryEffect

GeometryEffect
Quiz resolving
PCircle()

.modifier(AnimatableQuizEffect(dX: isOn ? 100 : 0))

Button("It will animate 😉? Click me") {

withAnimation {

self.isOn.toggle()

}

}

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

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

AnimatableModifier
public protocol AnimatableModifier : Animatable, ViewModifier {

}

public protocol Animatable {...}

public protocol ViewModifier {

func body(content: Self.Content) -> Self.Body

}

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

Example
struct PercentageModifier: AnimatableModifier {

...

private (set) var pct = 0.0


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

Example
Circle()

.percentage(pct, style: .circular)

Image(systemName: "hand.thumbsup.fill")

.percentage(pct, style: .sliding)

Text("Happy New Year 🎉🎇🍾!")


Image(systemName: "thermometer")


Text("🎆")


Rectangle()


.border(Color.yellow, width: 2)

.rotationEffect(Angle(degrees: 180))

Text("🦠")


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 👨💻👩💻

SwiftUI Animation - The basic overview

More Related Content

What's hot (9)

Similar to SwiftUI Animation - The basic overview (20)

Recently uploaded (20)

SwiftUI Animation - The basic overview