mys

Mystique

A wrapper for CoreAnimation.

Showing:

Popularity

Downloads/wk

0

GitHub Stars

43

Maintenance

Last Commit

5yrs ago

Contributors

0

Package

Dependencies

0

License

MIT

Categories

Readme

Mystique

Version License Platform Carthage compatible Xcode 8.2+ iOS 8.0+

Introduction

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

Demo

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

AttributekeyPath
boundsbounds
sizebounds.size
originposition
centerposition
xposition.x
yposition.y
widthbounds.size.width
heightbounds.size.height
opacityopacity
backgroundColorbackgroundColor
borderColorborderColor
borderWidthborderWidth
cornerRadiuscornerRadius
anchoranchorPoint
pathposition

Advance attributes

AttributekeyPathDescription
scaletransform.scaleIdempotent
scaleXtransform.scale.xIdempotent
scaleYtransform.scale.yIdempotent
rotateXtransform.rotation.xAccept degree value. Idempotent
rotateYtransform.rotation.yAccept degree value. Idempotent
rotateZtransform.rotation.zAccept degree value. Idempotent
rotatetransform.rotation.zThe same as rotateZ
xOffsetposition.xIncrease / decrease origin x by specific value
yOffsetposition.yIncrease / decrease origin y by specific value
heightOffsetbounds.size.widthIncrease / decrease width by specific value
widthOffsetbounds.size.heightIncrease / decrease height by specific value
rotateOnPathpositionAnimating along paths rotate to match the path tangent
reverseRotateOnPathpositionAnimating along paths rotate to match the path tangent and auto reverse
fillColorfillColorCAShapeLayer only
strokeColorstrokeColorCAShapeLayer only
strokeStartstrokeStartCAShapeLayer only
strokeEndstrokeEndCAShapeLayer only
lineWidthlineWidthCAShapeLayer only
miterLimitmiterLimitCAShapeLayer only
lineDashPhaselineDashPhaseCAShapeLayer 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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100