Giter VIP home page Giter VIP logo

anima's Introduction

Version License Platform language Version Build Status MIT License Platform Carthage compatible

Anima

Anima is chainable Layer-Based Animation library for Swift4.
It support to make sequensial and grouped animation more easily.

is written as follows.

let startAnimations: [AnimaType] = [.moveByY(-50), .rotateByZDegree(90)]
let moveAnimations: [AnimaType] = [.moveByX(50), .rotateByZDegree(90)]
let endAnimations: [AnimaType] = [.moveByY(-50), .rotateByZDegree(90)]

animaView.layer.anima
    .then(.opacity(1.0))
    .then(group: startAnimations)
    .then(group: moveAnimations, options: labelAnimaOption(index: 0))
    .then(group: moveAnimations, options: labelAnimaOption(index: 1))
    .then(group: moveAnimations, options: labelAnimaOption(index: 2))
    .then(group: moveAnimations, options: labelAnimaOption(index: 3))
    .then(group: endAnimations, options: labelAnimaOption(index: 4))
    .then(group: [.scaleBy(0.0), .opacity(0.0)])

func labelAnimaOption(index: Int) -> [AnimaOption] {
    let labelAnima = labels[index]?.layer.anima

    return [.completion({
        labelAnima?.then(.opacity(1)).fire()
    })]
}

Requirements

Anima require for Swift4 and greater than iOS9.0๐Ÿ“ฑ

Anima version / Swift version

Anima support Swift 4.

Latest version is developed with Swift 4, So if you want to use Anima with Swift 3, please specify Anima version to 0.5.1.

Features

  • Almost all timing modes from easings.set are implemented.
  • Spring Animation ( featured by CASpringAnimation )
  • Type-Safed Animation KeyPath ()

Usage

Move Position

If you want to translate CALayer.position relatively, use .moveByX(CGFloat), .moveByY(CGFloat), .moveByXY(x: CGFloat, y: CGFloat) AnimaTypes.

layer.anima.then(.moveByX(50)).fire()

or destination is determined, use .moveTo(x: CGFloat, y: CGFloat).

โ€ป Anima doesn't update CALayer.position value for animations. Because when update Layer-backed view's layer position value, It will be resetted to default value frequently.

Sequential Animation

Anima supports.

Group Animation

To run animation concurrently, you use CAAnimationGroup with CoreAnimation. In Anima, you can use Anima.then(group: ) to run some AnimaType concurrently.

Below is an example of how to run moving, scaling and rotating animations concurrently.

layer.anima
    .then(group: [.moveByX(200),
                .scaleBy(1.5),
                .rotateByZDegree(180)])
    .fire()

Animation Options

There are some options for Anima.

  • duration(TimeInterval)
  • timingFunction(TimingFunction)
    • Change timing function defining the pacing of the animation.
    • Default timing function is at Anima.defaultTimingFunction. If you do not set the timing function option, defaultTimingFunction is used.
    • Please read Anima.TimingFunction.swift
  • repeat(count: Float)
    • To run animation infinitely, set .infinity.
  • autoreverse
  • completion(() -> Void)

you can use these values as belows.

layer
    .anima
    .then(.moveByX(100), options: [.autoreverse,
                                   .timingFunciton(.easeInQuad),
                                   .repeat(count: 3),
                                   .completion({
                                    print("completion")
                                   })])
    .fire()

Rotate Animation & AnchorPoint

AnimaType has 3 rotation animation type, .rotateByX, .rotateByY, .rotateByZ. and each animation type has 2 value types, degrees and radians. you use whichever you like.

and CALayer has AnchorPoint. Rotating, moving, or other Animations are affected by it. Default value is (0.5, 0.5). AnimaType.moveAnchor(AnimaAnchorPoint) can move layer's AnchorPoint.

layer.anima
    .then(.rotateByZDegree(360))
    .then(.moveAnchor(.topLeft))
    .then(.rotateByZDegree(360))
    .fire()

or If you want to change only AnchorPoint, use Anima.then(setAnchor: AnimaAnchorPoint).

layer.anima
    .then(.rotateByZDegree(360))
    .then(setAnchor: .topLeft)
    .then(.rotateByZDegree(360))
    .fire()

Move Path

If you want to make moving animation more complex, use .movePath(path: CGPath, keyTymes: [Double]). Anima example app has sample of creating animation by drag gesture. you see it!

but It has any problems when you use with AnimaOption.autoreverse. so If you use it, please be careful of options.

Original KeyPath

If you want to animate other animatable values, You can use AnimaType.original(keyPath: String, from: Any?, to: Any) for it. CAEmitterLayer's animation is like this.

let layer = CAEmitterLayer()
layer.emitterPosition = CGPoint(x: 100.0, y:100.0)

layer.anima
    .then(.original(keyPath: #keyPath(CAEmitterLayer.emitterPosition), from: layer.emitterPosition, to: CGPoint(x: 200.0, y:200.0)))
    .fire()       

Example

To run the example project, clone the repo, open Anima.xcodeproj, and run target Anima iOS Example.

Installation

Cocoapods

Anima is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "Anima"

# If you want to use Swift 3 version, Please specify Anima version.

pod "Anima", "0.5.1"

Carthage

Add github satoshin21/Anima to your Cartfile. Execute carthage update to install it.

Author

Satoshi Nagasaka, [email protected]

License

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

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.