Mystique
Mystique copied to clipboard
gbammc
A wrapper for CoreAnimation.
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!
License
Mystique is available under the MIT license. See the LICENSE file for more info.
gbammc