Mystique

Introduction

Mystique wraps CoreAnimation with a nicer syntax to help you build up awesome animations (Swift version).

Demo

To implement above layer effect, all you need to write down:

// Animate the radiations
[radiation mt_startAnimations:^(MTAnimator *animate) {
    animate.opacity
        .from(@1.0)
        .to(@0.0)
        .animate(duration);
    animate.scale
        .from(@1.0)
        .to(@0.0)
        .animate(duration);
    animate.center
        .mt_from(fromPoint)
        .mt_to(toPoint)
        .animate(duration);
} completion:^{
    [radiation removeFromSuperlayer];
}];

// Animate the background circle
[circle mt_startAnimations:^(MTAnimator *animate) {
    animate.scale
        .byValues(@[@0.8, @(scale), @(scale)])
        .during(@[@0.0, @0.5, @1.0])
        .animate(duration);
    animate.opacity
        .from(@0.5)
        .to(@0.0)
        .animate(duration);
} completion:^{
    [circle removeFromSuperlayer];
}];

Check out the Mystique iOS Examples to get more details.

Installation

Cocoapods

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

pod "Mystique"

Carthage

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

github "gbammc/Mystique"

Getting started

Basic usage

// Compose your animations in here.
[view mt_startAnimations:^(MTAnimator *animate) {

    // Animate origin x to 100 in 1s.
    animate.x.to(@100.0).animate(1.0);

    // Animate backgroundColor to red in 0.4s then change to yellow after 0.2s delay.
    animate.backgroundColor
        .to([UIColor redColor]).after(0.4)
        .delay(0.2).to([UIColor yellowColor]).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
    .byValues(@[ @0.0, @1.1, @1.0 ])
    .during(@[ @0.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 YES will print all animations details for you to debug.

animate.logEnable = YES

Credit

Thanks their incredible works!

JHChainableAnimations

Masonry

License

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