loading...
Cover image for SwiftUI colorful button animation

SwiftUI colorful button animation

cr_wells profile image Caleb Wells ・3 min read

Welcome back ladies and gentlemen, in this article we're going to talk about creating a button in SwiftUI with a colorful animated background.

Making a basic button

Making a button in SwiftUI is easy enough, the following code is all you need.

Button(action: {
    // Do stuff when tapped.
}) {
    Text("Learn More")
}

That will make a simple button. 
But in this case, we want to make a button that looks a little nicer, so let's go ahead and add a few additional lines of code.

Button(action: {
    // Do stuff when tapped.
}) {
    Text("Learn More")
        .fontWeight(.heavy)
        .foregroundColor(.white)
}
.frame(width: 220, height: 60)
.background(Color.blue)
.cornerRadius(12)

We simply added two modifiers to the text of the button, making it a little bit more noticeable. With the .fontWeight() modifier we made the font bolder, and we made the color of the text white with the .foregroundColor() modifier instead of its default blue.

Then we added three modifiers to the button itself, giving it a frame, a background color, and a corner radius.
Now that we have the button made, we're just going to replace the background color of blue with are own custom background.

Creating the animated background

All right let's go ahead and make a new view that we can place within the parentheses of our .background().
So go ahead and write out the following code.

struct AnimatedBackgroundGradient: View {
    var body: some View {
    }
}

Xcode is going to complain because we don't actually have a View inside of the body. So to fix that go ahead and press command shift and L on your keyboard to bring up the views library.

From there you can start typing out linear and you'll get the linear gradient that pops up press enter and make sure your cursor is in the body variable and now we have a gradient and we can start customizing it.

LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing)

Now before we forget let's make sure that we go back to the .background() modifier on our button and change it from Color.blue to the following.

.background(AnimatedBackgroundGradient())

Before we complete our linear gradient view let's create a few properties between the opening brace of are AnimatedBackgroundGradient() struct and the variable body.

let colors = [Color.blue, Color.purple, Color.pink, Color.pink, Color.red, Color.purple, Color.blue, Color.purple, Color.red, Color.purple, Color.pink, Color.pink]

@State private var start = UnitPoint(x: 0, y: -2)
@State private var end = UnitPoint(x: 4, y: 0)

Now with those properties in place, we can change our linear gradient to look like this.

LinearGradient(gradient: Gradient(colors: colors), startPoint: start, endPoint: end)

And for the animation, we will add the .animation() modifier as follows.

.animation(Animation.easeInOut(duration: 3).repeatForever())

With the properties written out, and the animation modifier in place, we can now finish our linear gradient by adding the .onAppear() modifier, which allows us to start changing our values when the view appears.

.onAppear {
    self.start = UnitPoint(x: 4, y: 0)
    self.end = UnitPoint(x: 0, y: 2)
    self.start = UnitPoint(x: -4, y: 20)
    self.end = UnitPoint(x: 4, y: 0)
}

What values you put into the x and y coordinates is up to you and the same with the color array. I suggest you play around with it until you get the look and feel you're going for.

Well that wraps it up for this short article. Thanks for reading and until next time stay Swifty!

If you like random SwiftUI videos check out my YouTube channel
A Swiftly Tilting Planet.

Posted on by:

cr_wells profile

Caleb Wells

@cr_wells

Hi, I’m Caleb, and I help individuals and small businesses design and develop iOS apps.

Discussion

pic
Editor guide
 
Sloan, the sloth mascot Comment marked as low quality/non-constructive by the community View code of conduct

Hello, I'm an IOS developer. Recently, when using swift to develop applications, I found that there are few caches written by pure swift. So I wrote a cache -- swiftlycache, a lightweight general-purpose IOS cache library using swift 5. If you are using swift for development, if you also need to use cache, maybe you can try swiftlycache, maybe you will like it, If you like, you can also introduce it to your friends. Thank you
github.com/hlc0000/SwiftlyCache