Morph 0.1.1

Morph 0.1.1

TestsTested
LangLanguage SwiftSwift
License MIT
ReleasedLast Release Feb 2017
SwiftSwift Version 3.0.1
SPMSupports SPM

Maintained by Alvin Zhu.



Morph 0.1.1

Introduction

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

Demo

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.

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.