Imitation Game, Implementing Dribbble Concepts
Photo by Anton Darius | @theSollers on Unsplash
Lately I’ve been learning UI design basics and spending time on Dribbble, a site where designer types show off their latest creations. My first thought when I see an amazing animation is always ‘Whoa, that looks so cool!’ and my second thought is always ‘Whoa, I have no idea how to implement that!’. Studying these animations has inspired me to close the gap between what designers are creating in After Effects and what I’m able to do with UIKit.
In order to hone my skills and challenge myself, I decided to take a design from Dribbble and implement it in Swift. I chose something that wasn’t too complicated and had a variety of animations. The one I chose was the VNPAY concept design by Ramotion. Ramotion does amazing work and they’re SF locals!
This is their final product. It was probably mocked up in After Effects and rendered to a gif.
This app concept is a simple 2 screen interaction. It contains a login view which transitions to a dashboard screen. It utilizes a Google Material Design aesthetic, in which interactive controls appear to float above the rest of the UI. I particularly like the animated blue stripe on the login screen so this is what I implemented first.
I admit that I picked this interaction partially because I wanted to learn how to use Lottie and I thought the stripe animation would be a good first experience. I was seriously impressed. Briefly, Lottie enables exporting vector based animations from After Effects into iOS or Android. This means you have all the power of AE animations in your iOS projects. Learning After Effects and setting up animation exporting consumed almost half the time I spent on this project but it was worth it. My blue stripe doesn’t do justice to Lottie’s power. Head on over to their site to see some of Lottie’s amazing abilities (but not yet!).
To the left you can see my implementation. For the rounded controls and buttons, initially I had integrated material-components-ios. This is Google’s implementation of Material Design for UIKit and is a rather large library. I could imagine using it if I was going all in on Material Design. For this project, however, it seemed a little heavy handed as I only needed a few shadows and rounded corners. In the end, I ended up dropping it and rolling my own components.
Next, to implement the actual animations, I tried Stellar. I had high hopes for this library — It was well documented, had a nice interface and seemed quite powerful. Unfortunately, I struggled to integrate it with my project, the maintainer had stopped supporting it a few Swifts ago. Additionally, it was difficult to make simple animations work properly and, most importantly, it didn’t take advantage of the more modern UIViewPropertyAnimator API which I was interested in learning.
Eventually I ended up dropping Stellar and creating my own animation library. Né Disco. Disco is a thin wrapper around UIViewPropertyAnimator. It simply adds a fluent interface to property animator. It’s pretty bare bones at the moment but I intend to flesh it out when I have some time.
Since we’re on the topic of libraries I created for this project, I’d also like to introduce Choreo. Choreo doesn’t do any animation on its own. It simply choreographs the animations between several views. Users of the library can specify the amount of time the entire animation should take, the start and duration time of each view’s animation. Choreo will start each view’s animation at the proper time. Like Disco, I intend to spend more time polishing this up in the future.
Some challenges I encountered during this project were getting the animation timing functions to match the gif. I broke their gif down into individual frames to calculate the length of a each animation but had to guess at their timing curves. I also never figured out exactly what typeface they are using.
This ended up being a really fun project. I learned a lot about CoreAnimation and UIViewPropertyAnimator and got two new libraries out of it! In the future I intend to do another one of these little experiments, but for now I’m switching gears and am attempting build my daughter some sort of electronic toy. Wish me luck!
I'm a freelance iOS developer based in San Francisco. Feel free to contact me.