Mystique 0.2.4

Mystique 0.2.4

×

测试已测试✗
语言语言 Obj-CObjective C
许可证 MIT
发布上次发布2017年1月

由Alvin Zhu维护。

Mystique 0.2.4

简介

Mystique使用更好的语法封装CoreAnimation，帮助您构建出色的动画。

演示

demo

要实现上述图层效果，您只需写下以下内容

// 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];
}];

请查看Mystique iOS 示例以获取更多详细信息。

入门

基本用法

// 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);
}];

属性

基本属性

属性 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

高级属性

属性 keyPath 描述
scale transform.scale 幂等
scaleX transform.scale.x 幂等
scaleY transform.scale.y 幂等
rotateX transform.rotation.x 接受度数值。幂等
rotateY transform.rotation.y 接受度数值。幂等
rotateZ transform.rotation.z 接受度数值。幂等
rotate transform.rotation.z 与rotateZ相同
xOffset position.x 通过特定值增加/减少原点x
yOffset position.y 通过特定值增加/减少原点y
heightOffset bounds.size.width 通过特定值增加/减少宽度
widthOffset bounds.size.height 通过特定值增加/减少高度
rotateOnPath position 沿着路径动画，使其符合路径切线
reverseRotateOnPath position 沿着路径动画，使其符合路径切线并自动反向
fillColor fillColor CAShapeLayer独有
strokeColor strokeColor CAShapeLayer独有
strokeStart strokeStart CAShapeLayer独有
strokeEnd strokeEnd CAShapeLayer独有
lineWidth lineWidth CAShapeLayer独有
miterLimit miterLimit CAShapeLayer独有
lineDashPhase lineDashPhase CAShapeLayer独有

动画链

一个属性的结束应使用animate(duration)函数。

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

要在不同时间链定具有不同值的属性，可以调用 after(duration) 函数。

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

要延迟动画，请调用 delay(duration) 函数。

// 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(times)、repeatInfinity() 和 autoreverse() 函数来重复或自动反转动画。

像使用 CAKeyframeAnimation 一样使用它

以下是如何设置值和关键时间的示例，类似于 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;
*/

调试

将 logEnable 设置为 YES 会为您打印所有动画详细信息，供调试使用。

animate.logEnable = YES

致谢

感谢他们的杰出工作！

JHChainableAnimations

Masonry

许可证

Mystique 受 MIT 许可证保护。有关更多信息，请参阅 LICENSE 文件。