Each step you take reveals a new horizon. You have taken the first step today.

Related tags

Animation Walker
Overview

Walker

Carthage Version License Platform Documentation Swift

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
}

Bezier

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
}

Spring

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
}

Chain

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.

Bezier

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.

You might also like...
Various view's effects for iOS, written in Swift. Allows you to animate views nicely with easy to use extensions
Various view's effects for iOS, written in Swift. Allows you to animate views nicely with easy to use extensions

Various view's effects for iOS, written in Swift. Allows you to animate views nicely with easy to use extensions. Every animation is randomized. Currently supported animations:

Design-system-demo - This example code is bare-bones to show you what this framework can do

Basic Style Dictionary This example code is bare-bones to show you what this fra

Protoyping-Project WallAngle - With this App, you can measure the angle without searching for tools and calculations
Protoyping-Project WallAngle - With this App, you can measure the angle without searching for tools and calculations

Protoyping-Project_WallAngle This is the App that I made for the Prototyping Pro

ButtonClickStyle - This is a Customizable/Designable Button View, with 15 animated click styles, that allows you to design your own buttons from subviews, in storyboard and xib right away.
ButtonClickStyle - This is a Customizable/Designable Button View, with 15 animated click styles, that allows you to design your own buttons from subviews, in storyboard and xib right away.

ButtonClickStyle - This is a Customizable/Designable Button View, with 15 animated click styles, that allows you to design your own buttons from subviews, in storyboard and xib right away.

Framework to help you better manage UITableViews
Framework to help you better manage UITableViews

UITableView made simple 🙌 Main Features 🙉 Skip the UITableViewDataSource & UITableViewDelegate boilerplate and get right to building your UITableVie

You can dismiss modal by using gesture
You can dismiss modal by using gesture

RPModalGestureTransition You can dismiss modal by using gesture. Usage 1.Define animation You define animator class inherits UIViewControllerAnimatedT

Friendly reminder that you're not gonna live forever
Friendly reminder that you're not gonna live forever

Life Progress Friendly reminder that you're not gonna live forever How it works Each row represents a year of your life. Each square represents a week

A library for fancy iOS animations that you will definitely love.
A library for fancy iOS animations that you will definitely love.

EazelAnimationsKit Table of Contents Introduction Animations Usage Installation Contribution Authors Introduction The drive for developing this animat

Comments
  • CADisplayLink?

    CADisplayLink?

    Hey,

    First of all Awesome concept!

    Couple of questions:

    1. Does your Library use CADisplayLink or?
    2. 60fps?
    3. Support for interactions while animation is happening?
    4. Could you talk a little about what drives the animation?

    Thanks.

    opened by eonist 4
Releases(0.10.0)
  • 0.10.0(Oct 11, 2016)

    Swift 3 is here!

    After a couple of weeks testing Walker in internal projects, I am happy to release version 0.10.0 of it. Even though such release might be seem as big, I would like to separate the release of the 1.0 version from this one.

    Source code(tar.gz)
    Source code(zip)
  • 0.9.1(Mar 18, 2016)

    Walker now has the capability to handle when the user taps multiple times a button or something else to start an animation.

    This PR also adds minor improvements across the syntax and the demo.

    Source code(tar.gz)
    Source code(zip)
  • 0.9(Mar 18, 2016)

Owner
Ramon Gilabert
Product Designer into animations, user interaction and visual design.
Ramon Gilabert
A concept to more easily define simple keyframe / multi-step animations in SwiftUI

?? Animate A concept to more easily define simple keyframe / multi-step animations in SwiftUI, without: Defining an @State value for each property to

Seb Jachec 3 Oct 18, 2022
Testing the new ShazamKit framework announced at WWDC 2021

ShazamKit Demo Using the ShazamKit framework announced at WWDC 2021 to perform song recognition. Demo Tweet Usage Open the project and change the Bund

Sai Kambampati 18 Mar 17, 2022
Poi - You can use tinder UI like tableview method

Poi You can use tinder UI like tableview method Installation Manual Installation Use this command git clone [email protected]:HideakiTouhara/Poi.git Imp

null 65 Nov 7, 2022
Presentation helps you to make tutorials, release notes and animated pages.

Presentation helps you to make tutorials, release notes and animated pages.

HyperRedink 3k Dec 28, 2022
Letters animation allows you to click on different letters and accordingly it will animate letters in a cool way. It has a very attractive UI and is very easy to use.

Letters Animation Cool Letters Animation in iOS written in Swift. Preview Table of content :- Description How to add in your project Requirement Licen

MindInventory 31 Oct 4, 2022
Numbers animation allows you to click on different numbers and accordingly it will animate numbers in a cool way. It has a very attractive UI and is very easy to use.

Numbers Animation Cool Numbers Animation in iOS written in Swift. Preview Table of content :- Description How to add in your project Requirement Licen

MindInventory 31 Oct 4, 2022
Reading animation allows you to click on the different page numbers and accordingly it will animate page changes in a cool way. It has a very attractive UI and is very easy to use.

Reading Animation Cool Reading Animation in iOS written in Swift. Preview Table of content :- Description How to add in your project Requirement Licen

MindInventory 42 Oct 4, 2022
MotionBlur allows you to add motion blur effect to iOS animations.

MotionBlur MotionBlur allows you to add motion blur effect to your animations (currently only position's change). See the accompanying blog post to le

Arek Holko 1.5k Nov 3, 2022
UIImageView subclass that allows you to display a looped video and dynamically switch it.

AKVideoImageView Motivation AKVideoImageView was created because I wasn't satisfied with the standard AVPlayer when I was implementing a video backgro

Oleksandr Kirichenko 125 Apr 5, 2022