Giter VIP home page Giter VIP logo

stateanimator's Introduction

StateAnimator

asset

Purpose

More complex animations between the states of a component, like a button, can be cumbersome to create in Swift. The code is usually spread around multiple animation blocks. This is an attempt to modularize the code, and make writing complex animations simpler. Note: It still needs some work to hide some of the complexity.

How does it work?

Basic idea

The states of a View are made up of the states of its Subviews. For example, think of the states of a button. One state can have a blue label, and a black outer border, while another state of the same button can have a red label and a white outer border. In a more mathematical notation that would translate to:

State_1 = Subcomp_1_state_1 + Subcomp_2_state_1 + ...

State_2 = Subcomp_1_state_2 + Subcomp_2_state_2 + ...

"+" denotes composition.

We need a way to encapsulate this information. What is there to encapsulate? First, the information about each Subview for a certain View state. And then the information about a View state.

I chose to encapsulate the information about a Subview in a 'Transition' struct:

struct Transition {
    let beforeTransition: (() -> ())?
    let afterTransition:  (() -> ())?
    let endState: () -> ()
    let animationDetails: AnimationDetails
}

The naming might be a bit confusing, I am sorry for that. The most important piece of info in a 'Transition' is the endState. The endState describes the look of that subcomponent for a certain View state. For example: If we have a View state, let's call it View_State_1, then the endState should contain the information about how that Subview is supposed to look like when the view is in View_State_1.

Once the Subview states are defined for a certain View state, then we can put them together to describe the state of the View. So we can form a collection of 'Transition' structs and call that the View state. Maybe a bit of notation will make it clearer:

Subview_State_1 = Transition1

Subview_State_2 = Transition2

View_State = [Transition1, Transition2]

Once we have 2 View states, say View_State_1 and View_State_2, we can animate the transition between View_State_1 and View_State_2.

Before the animation takes place, each View state needs to be converted into an Animator. This is an internal detail, which should be hidden in the future. But it is good to know about it if you want to understand how this works.

struct Animator {
    let beforeTransitions: [() -> ()]
    let propertyAnimator: UIViewPropertyAnimator
}

Animators are then passed to the StateAnimator, who starts the animation immediately.

For more information please consult the code.

Downsides

Too much boilerplate is needed to do this.

Installation

Requires cocoapods. Run pod install

Requirements

iOS 10

Image Links

New York: http://wallpaperswide.com/new_york_city_buildings-wallpapers.html

Background: http://www.idownloadblog.com/2014/09/10/new-ios-8-wallpapers/

License

MIT License

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.