The story
Seeing the animations behind Paper, or the transitions behind Mail, being in a world of flat design and transitions, user interaction, app behavior and responsiveness are key, we need good and fast animations to delight our users in every tap, every scroll, every moment that they spend in our app.
After lots of apps, designs and animations, after trying some of the most famous web frameworks and after I learnt FramerJS, which has one of the most beautiful springs I’ve seen. I’m building a collection of my knowledge, as I said when I was learning iOS development I would do, let me present Walker to you, an animation engine and library.
Walker has a bohemian companion that wanders with him, Morgan, a set of animations that will make your life easier when developing iOS apps. Note that Morgan is unfinished and always improving.
Code
Walker has different types of use cases and behaviors, you can either have a chain of animations with different blocks and callbacks, or reuse animations and apply them in different cases.
animate(view) {
$0.alpha = 1
}.then {
print("First animation done")
}.chain {
$0.width = 300
}.finally {
print("Animations done")
}
Inside every animation there are different curves, the basic ones, which are Linear, Ease, EaseIn, EaseOut and EaseInOut, a custom Cubic Bezier and a Spring animation.
Cubic Bezier
Considering Linear, Ease, EaseIn, EaseOut and EaseInOut cubic animations, the following animation will just have the Bezier one, even though everything is called the same way.
animate(view, curve: .Bezier(1, 0.4, 1, 0.4)) {
$0.x = 100
}
Springs
Springs are the most beautiful animations in the spectrum, taking inspiration of the curve used in FramerJS, you’ll have a look alike feel that you are going to be able to configure like the following set.
spring(view, spring: 200, friction: 10, mass: 10) {
$0.x = 40
}
Chains
As stated in the first example, you can chain animations, but not only animations with the same curve, every block has an independent status, so you’ll be able to chain springs and bezier animations, being notified when everything finishes if you want.
spring(view, spring: 200, friction: 10, mass: 10) {
$0.x = 100
}.chain {
$0.x = 0
}
Create your own
It wouldn’t be a good animation engine if you couldn’t reuse animations, there’s a component inside the engine called Still, this one will talk to the background motor and will provide you with a CAKeyframeAnimation, just by calling this:
let animation = Still.bezier(.PositionX, curve: .Bezier(1, 0.4, 1, 0.4))
Still can have, as the engine above, Cubic Bezier and Spring animations inside, each one configured differently. Note also that this will provide a layer animation.
Finally, this animation won’t be tight to a final value or to any view, so you can reuse it across by distilling it:
distill((animation: animation, final: 100), view: view)
Distill works with as many animations at a time as you want.
More questions?
Have more questions and want to see more implementation in detail? We have a demo for you. Inside it you’ll find some different animations applied into different views, you can check the file right here. If you still have something unclear, don’t hesitate to contact me or open an issue.
Installation
Walker is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod 'Walker'
Walker is also available through Carthage. To install just write into your Cartfile:
github 'RamonGilabert/Walker'
Upcoming features
Check out the ROADMAP file to see the upcoming features that we are thinking to implement and don’t hesitate to open an issue or make a PR with a proposal in the roadmap.
Author
Ramon Gilabert with
♥️
Contribute
We would love you to contribute to Walker, check the CONTRIBUTING file for more info.
License
Walker is available under the MIT license. See the LICENSE file for more info.
