Morph

Introduction

Morph wraps CoreAnimation with a nicer syntax to help you build up awesome animations (Objective-C version).

Demo

To implement above layer effect, all you need to code:

// Radiation
radiation.mr_startAnimations({ (animate) in
    animate.opacity.from(1).to(0).animate(duration)
    animate.scale.from(1).to(0).animate(duration)
    animate.center.from(fromPoint).to(toPoint).animate(duration)
}, completion: {
    radiation.removeFromSuperlayer()
})

// Background circle
circle.mr_startAnimations({ (animate) in
    animate.scale.by([0.8, scale, scale]).during([0, 0.5, 1.0]).animate(duration)
    animate.opacity.from(0.5).to(0).animate(duration)
}, completion: {
    circle.removeFromSuperlayer()
})

Check out the Morph iOS Examples to get more details.

Installation

Cocoapods

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

pod "Morph"

Carthage

You can also use Carthage to install Morph by adding that to your Cartfile:

github "gbammc/Morph"

Getting started

Basic usage

// Compose your animations in here.
view.mr_startAnimations({ (animate) in
    animate.x.to(100).animate(1)
    animate.backgroundColor
        .to(UIColor.red).after(0.4)
        .delay(0.2).to(UIColor.yellow).animate(0.4)
})

Attributes

Basic attributes

| Attribute | keyPath | |-----------|---------| | bounds | bounds | | size | bounds.size | | origin | position | | center | position | | x | position.x | | y | position.y | | width | bounds.size.width | | height | bounds.size.height | | opacity | opacity | | backgroundColor | backgroundColor | | borderColor | borderColor | | borderWidth | borderWidth | | cornerRadius | cornerRadius | | anchor | anchorPoint | | path | position |

Advance attributes

| Attribute | keyPath | Description | |-----------|---------|-------------| | scale | transform.scale | Idempotent | | scaleX | transform.scale.x | Idempotent | | scaleY | transform.scale.y | Idempotent | | rotateX | transform.rotation.x | Accept degree value. Idempotent | | rotateY | transform.rotation.y | Accept degree value. Idempotent | | rotateZ | transform.rotation.z | Accept degree value. Idempotent | | rotate | transform.rotation.z | The same as rotateZ | | xOffset | position.x | Increase / decrease origin x by specific value | | yOffset | position.y | Increase / decrease origin y by specific value | | heightOffset | bounds.size.width | Increase / decrease width by specific value | | widthOffset | bounds.size.height | Increase / decrease height by specific value | | rotateOnPath | position | Animating along paths rotate to match the path tangent | | reverseRotateOnPath | position | Animating along paths rotate to match the path tangent and auto reverse | | fillColor | fillColor | CAShapeLayer only | | strokeColor | strokeColor | CAShapeLayer only | | strokeStart | strokeStart | CAShapeLayer only | | strokeEnd | strokeEnd | CAShapeLayer only | | lineWidth | lineWidth | CAShapeLayer only | | miterLimit | miterLimit | CAShapeLayer only | | lineDashPhase | lineDashPhase | CAShapeLayer only |

Chaining Animations

An attribute should ended by animate(duration) function.

animate.width.to(100).animate(1.0)

To chain an attribute with different values in different time can call after(duration) function.

animate.x.to(50).after(1.0).to(200).animate(2.0)

To delay an animation call the delay(duration) function.

// it will disappear in one second and appear again after two second delay
animate.opacity
    .to(0.0).after(1.0)
    .delay(2.0).to(1.0).animate(1.0)

Repeat and autoreverse

To repeat or autoreverse animations with the repeat(times), repeatInfinity() and autoreverse() functions.

Use it like CAKeyframeAnimation

Below is an example of how to set values and key times like CAKeyframeAnimation.

animate.scale
	.by([0.8, 1, 1])
	.during([0, 0.5, 1.0])
	.animate(duration)

/* the same as:
CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
keyframeAnimation.values = @[ @0.0, @1.1, @1.0 ];
keyframeAnimation.keyTimes = @[ @0.0, @0.5, @1.0 ];
keyframeAnimation.duration = duration;
*/

Debug

Set logEnable to true will print the animations details for you to debug.

animate.logEnable = true

Credit

Thanks their incredible works!

JHChainableAnimations

Masonry

License

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