KRAnimationKit

KRAnimationKit is a library that makes animation easy for Swift developers.

[](https://travis-ci.org/Joshua Park/KRAnimationKit)

Intro

KRAnimationKit is a powerful animation kit that will allow you to implement complex animations very easily.

Inspired by JHChainableAnimations, KRAnimationKit provides a more structured and yet more powerful experience with animations.

Not only chaining animations, but chaining simultaneous animations, and even chaining simultaneous for multiple views has become easy with KRAnimationKit.

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

Requirements

KRAnimationKit adopts an extensive amount of Swift 2.2 syntax and features. The library syntax or even certain features may not be available in Objective-C.

Installation

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

pod 'KRAnimationKit', :git => 'https://github.com/BridgeTheGap/KRAnimationKit.git'

Syntax

Basic Animations

For simple animation without chaining:

import KRAnimationKit

// Default
viewBox.animateX(50.0, duration: 1.0)

// + timing function
viewBox.animateX(50.0, duration: 1.0, function: .EaseInQuad)

// + reverse
viewBox.animateX(50.0, duration: 1.0, reverses: true)

// + repeat
viewBox.animateX(50.0, duration: 1.0, repeatCount: 10)

// + completion
viewBox.animateX(50.0, duration: 1.0) {
    print("COMPLETION")
}

The parameters reverses, repeatCount, and completion are default parameters, so fill them in as you deem necessary.

Delayed Animations

In order to delay the beginning of an animation, use after(_: Double). The parameter is in seconds.

viewBox.after(0.5).animateY(200.0, duration: 1.0, function: .EaseInCubic)

Chained Animations

Chaining animations can be done for the same view as well as different views like so:

// Use `KRAnimation.chain()` static method
// For views, use chain functions instead of animate functions

// Basic chaining with two views
KRAnimation.chain(
    // animate viewBox
    viewBox.chainY(300.0, duration: 1.0, function: .EaseInQuad),
    viewBox.chainY(0.0, duration: 1.0, function: .EaseOutQuad),

    // animate viewBox2
    viewBox2.chainX(bottomY, duration: 1.0, function: .EaseInOutQuad)
)

// + reverses, repeatCount, completion
KRAnimation.chain(
    viewBox.chainY(bottomY, duration: 1.0, function: .EaseInBounce),
    viewBox.chainY(0.0, duration: 1.0, function: .EaseOutBounce),
    viewBox2.chainY(58.0, duration: 1.0, function: .EaseInOutBounce),
    
    reverses: false, repeatCount: 1
) {
    print("COMPLETION")
}

Simultaneously Chained Animations

To have two or more animations chained simultaneously, simply use + like so:

KRAnimation.chain(
    // Simultaneously applying four animations on two different views
    viewBox.chainX(300.0, duration: 1.0) + viewBox.chainBackgroundColor(UIColor.blueColor(), duration: 1.0) + viewBox2.chainAlpha(0.5, duration: 1.0) + viewBox2.chainBackgroundColor(UIColor.cyanColor(), duration: 1.0),

    viewBox.chainX(0.0, duration: 1.0, function: .EaseInOutCubic) + viewBox.chainBackgroundColor(UIColor.redColor(), duration: 1.0),
)

Timing Functions

KRAnimationKit uses KRTimingFunction, a Swift-ported version of JQuery timing functions.

The supported timing functions are as follows:

Linear

EaseInSine EaseOutSine EaseInOutSine

EaseInQuad EaseOutQuad EaseInOutQuad

EaseInCubic EaseOutCubic EaseInOutCubic

EaseInQuart EaseOutQuart EaseInOutQuart

EaseInQuint EaseOutQuint EaseInOutQuint

EaseInExpo EaseOutExpo EaseInOutExpo

EaseInCirc EaseOutCirc EaseInOutCirc

EaseInBack EaseOutBack EaseInOutBack

EaseInElastic EaseOutElastic EaseInOutElastic

EaseInBounce EaseOutBounce EaseInOutBounce

More explanation and a visual representation of these functions can be found at Easings

Animatable Properties

KRAnimationKit supports most CALayer animatable properties as listed in Core Animation Programming Guide.

The list of properties that are currently unavailable are as listed below:

• anchorPoint ?
• backgroundFilters ?
• compositingFilter ?
• contents ?
• contentsRect ?
• filters?
• hidden X
• mask *
• masksToBounds *
• shadowPath *
• sublayers ?
• sublayerTransform ?
• transform *
• zPosition *

==============================================================

• *: properties that are planned to be supported later.
• ?: properties that are not set to be supported at the moment.
• X: properties that won't be supported.

Caveat

Since KRAnimationKit uses a layer-based animation--it uses CAAnimation, certain UIView subviews might not work as expected.

UILabel

According to this StackOverflow post, the backgroundColor property of UILabel and its layer are not the same. Animation is applied to the layer level only, so animating a UILabel instance with different colors for the view and layer might result in unexpected behavior.

Frame.size vs. Bounds.size

When animating, frame.size and bounds.size show a different behavior in that frame animates size change with the anchorPoint set as (0.0, 0.0) whereas bounds animates size change from the center, i.e. anchorPoint of (0.5, 0.5). This behavior is observable when using UIView animations.

This behavior is kept in KRAnimationKit, and animateSize function animates bounds.frame, i.e. if you animate the size of a view using animateSize, its center will remain the same whereas the frame.origin property will be affected.

If this is not the size-change animation you want and would like to change the size with the frame.origin as the anchor point, you can either use animateFrame function or manually set the anchorPoint property of the view to CGPointMake(0.0, 0.0) and use animateSize function.

Author

Josh Woomin Park, [email protected]

License

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