- SwiftUI: Animating Color Changes
- Jean-marc Boullianne
- The Nuggets translation Project
- Permanent link to this article: github.com/xitu/gold-m…
- Translator: chaingangway
- Proofread by: LSvih
Cool color switching animations with SwiftUI
It’s time to get hot, old friends! In this article we will learn how to animate color switching using Paths and AnimatableData in SwiftUI.
How do these quick switching animations work? Let’s see what follows.
basis
The key to animation is to create a structure in SwiftUI that implements the Shape protocol. We’ll call it SplashShape. In the Shape protocol, there is a method called path(in Rect: CGRect) -> path, which can be used to set the appearance of a graph. We will use this method to implement the various animations in this article.
Create a SplashShape structure
Next we create a structure called SplashStruct, which inherits from the Shape protocol.
import SwiftUI
struct SplashShape: Shape {
func path(in rect: CGRect) -> Path {
return Path()}}Copy the codeLet’s start by creating two animation types: leftToRight and rightToLeft, which look like this:
Splash animation
We create an enumeration called SplashAnimation to define the animation type, making it easier to extend new animations later (verify this at the end of this article!). .
import SwiftUI
struct SplashShape: Shape {
public enum SplashAnimation {
case leftToRight
case rightToleft
}
func path(in rect: CGRect) -> Path {
return Path()}}Copy the codeIn the path() method, we can select the animation we want to use and return the path of the animation. But first, we must create variables to store the animation type and record the animation process.
import SwiftUI
struct SplashShape: Shape {
public enum SplashAnimation {
case leftToRight
case rightToleft
}
var progress: CGFloat
var animationType: SplashAnimation
func path(in rect: CGRect) -> Path {
return Path()}}Copy the codeProgress, which ranges from 0 to 1, represents the progress of the entire animation. This will come in handy when we write the path() method.
Write the path() method
As mentioned earlier, in order to return the correct Path, we need to be clear about what kind of animation we are using. Write the switch statement in the path() method and use the animationType we defined earlier.
func path(in rect: CGRect) -> Path {
switch animationType {
case .leftToRight:
return Path(a)case .rightToLeft:
return Path()}}Copy the codeNow this method only returns empty Paths. We need to create ways to generate real animation.
Implement animation methods
Underneath the path() method, create two new methods, leftToRight() and rightToLeft(), each representing an animation type. Within each method body, we create a rectangular Path that transforms over time based on the value of the progress variable.
func leftToRight(rect: CGRect) -> Path {
var path = Path()
path.move(to: CGPoint(x: 0, y: 0)) // Top Left
path.addLine(to: CGPoint(x: rect.width * progress, y: 0)) // Top Right
path.addLine(to: CGPoint(x: rect.width * progress, y: rect.height)) // Bottom Right
path.addLine(to: CGPoint(x: 0, y: rect.height)) // Bottom Left
path.closeSubpath() // Close the Path
return path
}
func rightToLeft(rect: CGRect) -> Path {
var path = Path()
path.move(to: CGPoint(x: rect.width, y: 0))
path.addLine(to: CGPoint(x: rect.width - (rect.width * progress), y: 0))
path.addLine(to: CGPoint(x: rect.width - (rect.width * progress), y: rect.height))
path.addLine(to: CGPoint(x: rect.width, y: rect.height))
path.closeSubpath()
return path
}
Copy the codeThen call the above two new methods in the path() method.
func path(in rect: CGRect) -> Path {
switch animationType {
case .leftToRight:
return leftToRight(rect: rect)
case .rightToLeft:
return rightToLeft(rect: rect)
}
}
Copy the codeAnimation data
To ensure that Swift knows how to animate Shape when changing the progress variable, we need to specify a variable that responds to the animation. Under the progress and animationType variables, define the animatableData. This is a variable based on the Animatable protocol that informs SwiftUI to animate the view when data changes.
var progress: CGFloat
var animationType: SplashAnimation
var animatableData: CGFloat {
get { return progress }
set { self.progress = newValue}
}
Copy the code
Animation occurs when color switches
So far, we have created a Shape that will change over time. Next, we need to add it to the view and animate it automatically when the view color changes. That’s when we introduce the SplashView. We will create a SplashView to automatically update the Progress variable of the SplashShape. When SplashView receives the new Color, it triggers the animation.
First, we create the SplashView structure.
import SwiftUI
struct SplashView: View {
var body: some View {
// SplashShape Here}}Copy the codeSplashShape needs to use the SplashAnimation enumeration as an argument, so we’ll pass it to the SplashView as an argument. In addition, we want to set the animation when the view’s background Color changes, so we also want to pass the Color parameter. These details will be explained in our initialization method.
ColorStore is a custom ObservableObject. It listens for Color changes in the SplashView structure so that we can initialize the SplashShape animation and eventually change the background Color. We’ll show how it works later.
struct SplashView: View {
var animationType: SplashShape.SplashAnimation
@State private var prevColor: Color // Stores background color
@ObservedObject var colorStore: ColorStore // Send new color updates
init(animationType: SplashShape.SplashAnimation, color: Color) {
self.animationType = animationType
self._prevColor = State<Color>(initialValue: color)
self.colorStore = ColorStore(color: color)
}
var body: some View {
// SplashShape Here}}class ColorStore: ObservableObject {@Published var color: Color
init(color: Color) {
self.color = color
}
}
Copy the codeBuild SplashView body
Inside the body, we need to return a Rectangle that matches the current color of the SplashView. We then use the previously defined ColorStore so that we can receive updated color values to drive the animation.
var body: some View {
Rectangle()
.foregroundColor(self.prevColor) // Current Color
.onReceive(self.colorStore.$color) { color in
// Animate Color Update Here}}Copy the codeWhen the color changes, we need to record the changing color and progress in the SplashView. To do this, we define the layers variable.
@State var layers: [(Color,CGFloat)] = [] // New Color & Progress
Copy the codeNow back inside the body variable, we add the new received Colors to the layers variable. When we add, we set the progress to 0. Then, within half a second of the animation, we set the progress to 1.
var body: some View {
Rectangle()
.foregroundColor(self.prevColor) // Current Color
.onReceive(self.colorStore.$color) { color in
// Animate Color Update Here
self.layers.append((color, 0))
withAnimation(.easeInOut(duration: 0.5)) {
self.layers[self.layers.count-1].1 = 1.0}}}Copy the codeNow in this code, the updated color is added to the Layers variable, but the color is not displayed. To display the colors, we need to add an overlay layer for each Rectangle layer inside the Body variable.
var body: some View {
Rectangle()
.foregroundColor(self.prevColor)
.overlay(
ZStack {
ForEach(layers.indices, id: \.self) { x in
SplashShape(progress: self.layers[x].1, animationType: self.animationType)
.foregroundColor(self.layers[x].0)
}
}
, alignment: .leading)
.onReceive(self.colorStore.$color) { color in
// Animate color update here
self.layers.append((color, 0))
withAnimation(.easeInOut(duration: 0.5)) {
self.layers[self.layers.count-1].1 = 1.0}}}Copy the codeThe test results
You can run the following code in the emulator. What this code means is that when you click the button in the ContentView, it calculates the index to select the color in the SplashView and also triggers an update within the ColorStore. So, when the SplashShape layer is added to the SplashView, the animation is triggered.
import SwiftUI
struct ContentView: View {
var colors: [Color] = [.blue, .red, .green, .orange]
@State var index: Int = 0
@State var progress: CGFloat = 0
var body: some View {
VStack {
SplashView(animationType: .leftToRight, color: self.colors[self.index])
.frame(width: 200, height: 100, alignment: .center)
.cornerRadius(10)
.shadow(color: Color.black.opacity(0.2), radius: 10, x: 0, y: 4)
Button(action: {
self.index = (self.index + 1) % self.colors.count{})Text("Change Color")
}
.padding(.top, 20)}}}Copy the code
It’s not finished yet!
We still have one feature left unimplemented. Now we continue to add layers to the SplashView without removing them. Therefore, we need to clear these layers when the animation is finished.
Inside the onReceive() method of the body variable of the SplashView structure, make the following changes:
.onReceive(self.colorStore.$color) { color in
self.layers.append((color, 0))
withAnimation(.easeInOut(duration: 0.5)) {
self.layers[self.layers.count-1].1 = 1.0
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
self.prevColor = self.layers[0].0 // Finalizes background color of SplashView
self.layers.remove(at: 0) // removes itself from layers array}}}Copy the codeThis line of code allows us to remove the values used in the Layers array and ensure that SplashView displays the correct background color based on the newly updated values.
Show results!
Have you completed the examples for this tutorial? You can send me a screenshot or link to show your work. TrailingClosure.com will feature your work. You can contact us on Twitter @TrailingClosure or email us at [email protected].
Making the source code
You can view the source code for this tutorial on my Github! In addition to the examples shown, the complete source code for SplashShape and SplashView is included. . But wait, there’s more!
Easter eggs!
If you are familiar with my previous tutorials, you should know that I love Easter eggs 😉. At the beginning of this article, I said I would implement more animations. And now it’s finally here… The drums… .
Splash animation 🥳
Hahaha!! Remember? I said I would add more animation categories.
enum SplashAnimation {
case leftToRight
case rightToLeft
case topToBottom
case bottomToTop
case angle(Angle)
case circle
}
func path(in rect: CGRect) -> Path {
switch self.animationType {
case .leftToRight:
return leftToRight(rect: rect)
case .rightToLeft:
return rightToLeft(rect: rect)
case .topToBottom:
return topToBottom(rect: rect)
case .bottomToTop:
return bottomToTop(rect: rect)
case .angle(let splashAngle):
return angle(rect: rect, angle: splashAngle)
case .circle:
return circle(rect: rect)
}
}
Copy the codeYou must be thinking… “Wow, that’s a lot of eggs…” . Don’t fret. All we need to do is add a few methods to SplashShape’s path() method.
Let’s animate it one by one…
TopToBottom and bottomToTop animations
These methods are very similar to leftToRight and rightToLeft in that they create a path from the bottom or top of the Shape and transform it over time using the progress variable.
func topToBottom(rect: CGRect) -> Path {
var path = Path()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: rect.width, y: 0))
path.addLine(to: CGPoint(x: rect.width, y: rect.height * progress))
path.addLine(to: CGPoint(x: 0, y: rect.height * progress))
path.closeSubpath()
return path
}
func bottomToTop(rect: CGRect) -> Path {
var path = Path()
path.move(to: CGPoint(x: 0, y: rect.height))
path.addLine(to: CGPoint(x: rect.width, y: rect.height))
path.addLine(to: CGPoint(x: rect.width, y: rect.height - (rect.height * progress)))
path.addLine(to: CGPoint(x: 0, y: rect.height - (rect.height * progress)))
path.closeSubpath()
return path
}
Copy the code
Circle the animation
If you remember elementary school geometry, you should know the Pythagorean Theorem. a^2 + b^2 = c^2
A and B can be regarded as the height and width of the rectangle, from which we can find C, the radius of the circle needed to cover the whole rectangle. We build the circle’s path from this and transform it over time using the progress variable.
func circle(rect: CGRect) -> Path {
let a: CGFloat = rect.height / 2.0
let b: CGFloat = rect.width / 2.0
let c = pow(pow(a, 2) + pow(b, 2), 0.5) // a^2 + b^2 = c^2 --> Solved for 'c'
// c = radius of final circle
let radius = c * progress
// Build Circle Path
var path = Path()
path.addArc(center: CGPoint(x: rect.midX, y: rect.midY), radius: radius, startAngle: Angle(degrees: 0), endAngle: Angle(degrees: 360), clockwise: true)
return path
}
Copy the code
Angle of animation
This is a little bit of an animation. You need to use the tangent line to calculate the slope of the Angle, and then create a line based on that slope. As you move this line over the rectangle, draw a right triangle based on it. See the figure below. Colored lines represent the state of covering the entire rectangle as the line moves over time.
The method is as follows:
func angle(rect: CGRect, angle: Angle) -> Path {
var cAngle = Angle(degrees: angle.degrees.truncatingRemainder(dividingBy: 90))
// Return Path Using Other Animations (topToBottom, leftToRight, etc) if angle is 0, 90, 180, 270
if angle.degrees == 0 || cAngle.degrees == 0 { return leftToRight(rect: rect)}
else if angle.degrees == 90 || cAngle.degrees == 90 { return topToBottom(rect: rect)}
else if angle.degrees == 180 || cAngle.degrees == 180 { return rightToLeft(rect: rect)}
else if angle.degrees == 270 || cAngle.degrees == 270 { return bottomToTop(rect: rect)}
// Calculate Slope of Line and inverse slope
let m = CGFloat(tan(cAngle.radians))
let m_1 = pow(m, -1) * -1
let h = rect.height
let w = rect.width
// tan (angle) = slope of line
// y = mx + b ---> b = y - mx ~ 'b' = y intercept
let b = h - (m_1 * w) // b = y - (m * x)
// X and Y coordinate calculation
var x = b * m * progress
var y = b * progress
// Triangle Offset Calculation
let xOffset = (angle.degrees > 90 && angle.degrees < 270)? rect.width :0
let yOffset = (angle.degrees > 180 && angle.degrees < 360)? rect.height :0
// Modify which side the triangle is drawn from depending on the angle
if angle.degrees > 90 && angle.degrees < 180 { x *= -1 }
else if angle.degrees > 180 && angle.degrees < 270 { x *= -1; y *= -1 }
else if angle.degrees > 270 && angle.degrees < 360 { y *= -1 }
// Build Triangle Path
var path = Path()
path.move(to: CGPoint(x: xOffset, y: yOffset))
path.addLine(to: CGPoint(x: xOffset + x, y: yOffset))
path.addLine(to: CGPoint(x: xOffset, y: yOffset + y))
path.closeSubpath()
return path
}
Copy the code
Please support me!
You can subscribe using this link. If you’re not reading this on TrailingClosure.com, stop by later!
If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.
The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.