Coder Social home page Coder Social logo

augmify / easyanimation Goto Github PK

View Code? Open in Web Editor NEW

This project forked from icanzilb/easyanimation

0.0 1.0 0.0 215 KB

A Swift library to take the power of UIView.animateWithDuration(_:, animations:...) to a whole new level - layers, springs, chain-able animations and mixing view and layer animations together!

License: MIT License

Swift 97.59% Ruby 2.41%

easyanimation's Introduction

ver 0.6 (beta)

This is still beta quality code - feel free to test, create issues, etc. The library doesn't use any private APIs - apps using it should be fine for release on the App Store.

Intro
Layer Animations
Spring Layer Animations
Chain Animations
Cancel Chain Animations
Installation
Credit
License
Version History

Intro

UIView.animateWithDuration:animations: is really easy to use and you're so familiar with its syntax that you often want it to do just a bit more for you automatically. But it doesn't and you need to import Bloated.framework by Beginner Ninja Coder in order to make a bit more advanced animations than what animateWithDuration:animations: allows you to.

EasyAnimation extends what UIKit offers in terms of animations and makes your life much easier because you can do much more without learning some perky new syntax.

Easy Layer Animations

EasyAnimation allows you to animate your layers straight from animateWithDuration:animations:. No more CABasicAnimation code for you. Just adjust the properties of your layers from within the animations block and EasyAnimation will take care of the rest:

CoreAnimation (before)
    let anim = CABasicAnimation(keyPath: "position.x")
    anim.fromValue = 100.0
    anim.toValue = 200.0
    anim.duration = 2.0
    view.layer.addAnimation(anim, forKey: nil)
EasyAnimation (after)
    UIView.animateWithDuration(2.0, animations: {
        self.view.layer.position.x = 200.0
    })

Or if you need to specify delay, animation options and/or animation curve:

CoreAnimation (before)
    let anim = CABasicAnimation(keyPath: "position.x")
    anim.fromValue = 100.0
    anim.toValue = 200.0
    anim.duration = 2.0
    anim.fillMode = kCAFillModeBackwards
    anim.beginTime = CACurrentMediaTime() + 2.0
    anim.timingFunction = CAMediaTimingFunction(name: 
        kCAMediaTimingFunctionEaseOut)
    anim.repeatCount = Float.infinity
    anim.autoreverses = true
    view.layer.addAnimation(anim, forKey: nil)
EasyAnimation (after)
    UIView.animateWithDuration(2.0, delay: 2.0, 
        options: .Repeat | .Autoreverse | .CurveEaseOut, 
        animations: {
        self.view.layer.position.x += 200.0
    // let's add more animations 
    // to make it more interesting!
    self.view.layer.cornerRadius = 20.0
    self.view.layer.borderWidth = 5.0
}, completion: nil)

And if you want to execute a piece of code after the animation is completed - good luck setting up your animation delegate and writing the delegate methods.

With EasyAnimation you just put your code as the completion parameter value and EasyAnimation executes it for you when your animation completes.

Spring Layer Animations

One thing I really miss when using CoreAnimation and CABasicAnimation is that there's no easy way to create spring animations. Luckily a handy library called RBBAnimation provides an excellent implementation of spring animations for layers - I translated the code to Swift and included RBBSpringAnimation into EasyAnimation.

Here's how the code to create a spring animation for the layer position, transform and corner radius looks like:

EasyAnimation
    UIView.animateWithDuration(2.0, delay: 0.0, 
      usingSpringWithDamping: 0.25, 
      initialSpringVelocity: 0.0, 
      options: nil, 
      animations: {
        self.view.layer.position.x += 200.0
        self.view.layer.cornerRadius = 50.0
        self.view.layer.transform = CATransform3DMakeScale(1.2, 1.2, 1.0)
    }, completion: nil)

Sam Davies collaborated on the spring animations code. Thanks a ton - I couldn't have figured this one on my own!

Chain Animations

animateWithDuration:animations: is really handy but chaining one animation after another is a major pain (especially if we are talking about more than 2 animations).

EasyAnimation allows you to use a method to just chain two or more animations together. Call animateAndChainWithDuration:delay:options:animations:completion: and then chain to it more animations like this:

EasyAnimation
    UIView.animateAndChainWithDuration(1.0, delay: 0.0, 
      options: nil, animations: {
        self.view.center.y += 100
    }, completion: nil).animateWithDuration(1.0, animations: {
        self.view.center.x += 100
    }).animateWithDuration(1.0, animations: {
        self.view.center.y -= 100
    }).animateWithDuration(1.0, animations: {
        self.view.center.x -= 100
    })

Yes - that works, give it a try in your project :]

This code will animate the view along a rectangular path - first downwards, then to the right, then up, then to the initial point where the animation started.

What a perfect oportunity to repeat the animation and make the animation run continuosly! Add options parameter to the last animateWithDuration... in the chain and turn on the .Repeat option.

This will make the whole chain (e.g. the 4 animations) repeat continuosly.

If you want to pause between any two animations in the chain - just use the delay parameter and it will all just work.

Cancel Chain Animations

If you have a repeating (or a normal) chain animation on screen you can cancel it at any time. Just grab hold of the animation object and call cancelAnimationChain on it any time you want.

let chain = UIView.animateAndChainWithDuration(1.0, delay: 0.0,
    options: nil, animations: {
        self.square.center.y += 100
    }, completion: nil).animateWithDuration(1.0, animations: {
  [... the rest of the animations in the chain]
chain.cancelAnimationChain()

The animation will not stop immediately but once it completes the current step of the chain it will stop and cancel all scheduled animations in this chain.

Installation

  • To install the library via Cocoapods (recommended) add to your project's Podfile:

pod 'EasyAnimation'

  • To install with the source code - clone this repo or download the source code as a zip file. Include all files within the EasyAnimation folder into your project.

Credit

Author: Marin Todorov

More about Marin:


iOS Animations by Tutorials, Author

iOS Animations by Emails Newsletter, Author

Includes parts of RBBAnimation by Robert Böhnke. The code is translated from Objective-C to Swift by Marin Todorov.

Collaborator on the spring animation integration: Sam Davies.

License

EasyAnimation is available under the MIT license. See the LICENSE file for more info.

RBBAnimation license: https://github.com/robb/RBBAnimation/blob/master/LICENSE

To Do

  • polish spring animation to look exactly like the UIKit one
  • add CALayer.animateWithDuration:animations:.. for the people who want to use different methods for view and layer animations
  • .Autoreverse for chain animations (if possible)
  • add support for keyframe animation along the path via a custom property
  • cool demos...

Version History

  • 0.6 - first beta version

easyanimation's People

Contributors

icanzilb avatar

Watchers

 avatar

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.