UIView Animation in Swift 3
The Adventure of Bon, Bonbucks, and Bonacinno
Intro
This is a special one. This is not a typical intro article. As matter of fact, I just woke up on a Saturday and decided to do something different. A UIView animation tutorial done through storytelling.
I want to loosen up and just write.
Topics that we will cover are UIView animation with color, size, movement, and putting the three all together.
Welcome to The Adventure of Bon, Bonbucks, and Bonacinno.
STORY
Ok story time. True story. For real, listen up. There is a guy named Bon. Bon is an average looking joe with a great name. Hence, Bon is also known as “The Bon.” But that is 100% irrelevant to the story. Bon has a great name and he’s average. That’s relevant. Not. Bon is 22 years old this year and just graduated from the University of Washington with a degree in Starbucks.
He intensely interned at Starbucks. Keyword — intense. He starts his own coffee place and calls it Bonbucks. What a great name. Bonbucks is located right next to Starbucks. Everyone that sees Bonbucks says, “What a great name.” Then walks right into Starbucks. Happens every time.
Bon is sad. Very sad. He cries at night and calls it night expression. No one really understands what he is trying to express. Whether it is his student debt appreciation for the Starbucks degree or his greatly named coffee place with no customer walking in.
4 months have passed. Bon is losing hope for Bonbucks. He saves up all the money from interning at Starbucks for a chance. A chance to express his love for coffee. To be something. To be himself. He went into this with no plan, but just to be something. This could be it. This could be the end. 4 years of hard work vanished in 4 months. Just another guy.
He has 30 days left. Uno month. He needs 1000 customers this month. Else he will get to double his student debt for free. Bon is thinking. Bon is over-thinking. Bon is over-thinkingly thinking.
One night, just like any other night, Bon does his self expression before his sleep. Then this time, he becomes a dreamer. He dreams about the day at work. Sadly not a great dream. He sees himself in third person like in a video game. He walks around himself like compass tool. 360 perfectly. Circumference 2 pi r. Circling and circling. Bon got tired in his dream. He sits down. Whips out his Macbook from his pocket. He opens Xcode. Says I love Apple. Then Steve Jobs holographically appear from his webcam. Then gets RKO by Randy Orton. Bon now wants to do animations for his coffee.
The birth of Bonaccino.
Plain State
From the plain state, Bonaccino is boring. Bon will try to make his drink more exiting by changing a property at a time.
Color
The first way Bon expresses himself is through color. He needs his Bonaccino to look the way it’s meant to look. A warm coffee brown color.
UIView.animate(withDuration: 1, animations: {
self.bonacinno.backgroundColor = .brown
}, completion: nil)Size
Now comes the size. Bonaccino needs to be a little bigger. Width and height. Why not have it larger?
UIView.animate(withDuration: 1, animations: {
self.bonacinno.frame.size.width += 10
self.bonacinno.frame.size.height += 10
}, completion: nil)Movement
Bonaccino has so much passion now that it should be able to move on its own.
UIView.animate(withDuration: 1, animations: {
self.bonacinno.frame.origin.y -= 20
}, completion: nil)Altogether with a lil bit of flare
Bon has awoken to his true form after watching Steve Jobs get RKO by Randy Orton. Whether his true form is enough or not is another thing. For now, his true form is enough to make a Bonacinno.
UIView.animate(withDuration: 1, animations: {
self.bonacinno.backgroundColor = .brown
self.bonacinno.frame.size.width += 10
self.bonacinno.frame.size.height += 10
}) { _ in
UIView.animate(withDuration: 1, delay: 0.25, options: [.autoreverse, .repeat], animations: {
self.bonacinno.frame.origin.y -= 20
})
}WRAP UP
With The Adventure of Bon, Bonbucks, and Bonacinno, we saw how we can use UIView animation with color, size, movement, and putting the three all together. I enjoyed writing this fun intro piece for UIView animation.
LAST REMARKS
I hope you have enjoyed and learned something valuable from my article. If you have then let me know by hitting that ❤ button and follow me on Medium. Also, share this article so that your circle can make some knowledge gains too.
For those interested, here is my LinkedIn.
Lastly if you have any comment, question, or recommendation, feel free to drop them below. Tell me what you want to learn next. I’m writing for you guys!
