The Basic Functions of Animation in SwiftUI

CS193p Lecture 7— My Own Summary

Shapes in SwiftUI

SwiftUI provides basic shapes, which can be used as views. For example:

Rectangle(), RoundRectangle(cornerRadius:), Circle(), Ellipse(), Capsule()

Example Code:

VStack { Rectangle().fill(Color.blue).frame(width: 100, height: 100); Circle.stroke(Color.red, linewidth: 5).frame(width: 100, height: 100) }

Also, you can create your own shape. To do this, you need to define a struct that conforms to the Shape protocol. Then, you must implement the path (in rect: CGRect) -> path method inside the struct.

Below is an example of custom shape that creates a triangle:

struct Triangle: Shape { func path in rect: CGRect) -> Path { var path = Path(); path.move(to: CGPoint(x: rect.midX, y: rect.minY)); path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY)); path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY)); path.closeSubpath(); return path } }

If you can create a custom shape. then naturally, you can also modify basic shapes. You can adjust their size and position using modifiers such as .frame(), .scale(), .rotationEffect().

Additionally, there are commands like .fill(_:) and .stroke(_:, lineWidth:) for styling.

Furthermore, by using withAnimation { }, you can smoothly animate changes in size and color.

Example Code:

@State private var isExpanded = false; Circle().frame(width: isExpanded ? 200: 100).onTapGesture { withAnimation { isExpanded.toggle() } }

Implicit vs Explicit Animations

SwiftUI provides both implicit and explicit animations. The reason for these two approaches is that they differ in how they are applied and the level of control they offer.

Implicit animations are automatically applied when an @State value changes.

struct ImplicitAnimationExample: View { @State private var isExpanded = false; var body: some View { Circle().frame(width: isExpanded ? 200 : 100).animation(.easeInOut(duration: 1.0), value: isExpanded).onTapGesture { isExpanded.toggle() } }

However, if you want more detailed control over how the animation behaves, you should use explicit animations. For example, when you need to specify exactly when the animation starts or ensure it only runs under certain conditions.

struct ExplicitAnimationExample: View { @State private var isExpanded = false; var body: some View { Circle().frame(width: isExpanded ? 200 : 100).onTapGesture { withAnimation(.spring()) { isExpanded.toggle() } } }

Animating Shapes and Transitions

By combining the shapes and animations mentioned earlier, you can create dynamic UI.

Below is an example of a smooth transition animation.

struct ContentView: View { @State private var cornerRadius: CGFloat = 10; var body: some View { RoundedRectangle(cornerRadius: cornerRadius).fill(Color.blue).frame(width: 200, height: 100).onTapGesture { withAnimation(.easeInOut(duration: 1.0)) { cornerRadius = cornerRadius == 10 ? 50 : 10 } } } }

The following is an example of a transition animation.

struct ContentView: View { @State private var isVisible = false; var body: some View { VStack { if isVisible { Circle().fill(Color.green).frame(width: 100, height: 100).transition(.scale) }; Button(“Toggle View”) { withAnimation { isVisible.toggle() } } } } }

The transition(_:) modifier allows you to apply animations when a view appears or disappears. You can use built-in transition effects such as opacity, scale, and slide.

Animation Timing and Control

Similarly, you can also control the speed and repetition of animations. SwiftUI provides basic timing functions to determine the animation’s speed.

.linear, .easeIn, .easeOut, .easeInOut,

.spring(response: dampingFraction: blendDuration: )

The following is an example of timing control in use.

struct ContentView: View { @State private var offsetX: CGFloat = 0; var body: some View { VStack { Button(“Animatie”) { withAnimation(.easeInOut(duration: 1.0)) { offsetX = offsetX == 0 ? 150 : 0 } }; Circle().frame(width: 50, height: 50).offset(x: offsetX) } }

If you want to run an animation repeatedly, you can use repeat-related modifiers.

.repeatCount(_, autoreverses: ), .repeatForever(autoreverses:)

The following is an example of repeated animation in use.

struct ContentView: View { @State private var rotation: Double = 0; var body: some View { Image(systemName: “arrow.right.circle.fill”).font(.system(size: 100)).rotationEffect(.degrees(rotation)).onAppear { withAnimation (Animation.linear(duration: 1.0).repeatForever(autoreverses: false)) { rotation = 360 } } } }

Meanwhile, you can also delay the start of an animation.

struct ContentView: View { @State private var scale: CGFloat = 1.0; var body: some View { Circle().scaleEffect(scale).animation(.easeInOut(duration: 1.0).delay(0.5), value: scale).onTapGesture { scale = scale == 1.0 ? 1.5 : 1.0 } } }

One More Thing: What is CGFloat?

By now, you’ve likely seen the CGFloat type many times. But what exactly is it?

Originally, CGFloat was a floating-point type used in C-based environments, specificaly in Core Graphics, a 2D graphics processing API. Today, Core Graphics has become a key framework for 2D graphic calculations on Apple platforms. CGFloat is still used in both Objective-C and SwiftUI.

In general, any value directly related to UI elements is handled using CGFloat.

If you want to resize a shape based on the width value, it is recommended to use:

let width: CGFloat = 100

rather than:

let width: Double = 100

Of course, you can sometimes use Double or Float, as long as you convert them to CGFloat. However, since SwiftUI and Core Graphics inherently work with CGFloat, it is generally best to use it by default.

So, what are some elements that rae directly related to UI?

Examples include:

• SwiftUI view-related properties: frame, offset, scaleEffect, etc.
• Core Graphics APIs: CGRect, CGPoint, CGPath.
• SwiftUI animation-related operations: rotationEffect, scaleEffect, etc.