中文介绍

本项目受 JHChainableAnimations 的启发！

为什么选择 LSAnimator 和 CoreAnimator?

通过使用 LSAnimator（Objective-C）或 CoreAnimator（Swift），您只需要几行代码就可以编写复杂且易于维护的动画。

CAAnimations和UIView动画非常强大，但当动画变得复杂时，阅读起来就非常困难。

比如说，我想让myView向右移动100像素，并使用弹力动画，然后完成移动后使用线性缓和的方式扩大宽度30像素。

[UIView animateWithDuration:2.0
                          delay:0.0
         usingSpringWithDamping:0.8
          initialSpringVelocity:1.0
                        options:0
                     animations:^{
                         CGPoint newPosition = self.myView.frame.origin;
                         newPosition.x += 100;
                         self.myView.frame = CGRectMake(newPosition.x, newPosition.y, self.myView.frame.size.width, self.myView.frame.size.height);
                     } completion:^(BOOL finished) {
                         [UIView animateWithDuration:2.0
                                               delay:0.0
                                             options:UIViewAnimationOptionCurveEaseIn
                                          animations:^{
                                              CGSize newSize = self.myView.frame.size;
                                              newSize.width += 30;
                                              self.myView.frame = CGRectMake(self.myView.frame.origin.x, self.myView.frame.origin.y, newSize.width, newSize.height);
                                          } completion:nil];
                     }];

这真是太糟糕了，不是吗...使用LSAnimator只需要一行代码。

LSAnimator *animator = [LSAnimator animatorWithView:self.myView];
animator.moveX(100).spring.thenAfter(2).increWidth(30).easeIn.animate(2);

嗯...还有一个叫做JHChainableAnimations的动画库也可以做到这一点。

JHChainableAnimations具有强大的可链式动画和易于读写语法，但它不支持多链动画。

按照上述示例，现在假设整个动画链需要同时将myView的不透明度设置为零。

使用LSAnimator只需要添加一行代码。

LSAnimator *animator = [LSAnimator animatorWithView:self.myView];
animator.moveX(100).spring.thenAfter(2).increWidth(30).easeIn.animate(2);
animator.concurrent.makeOpacity(0).animate(4);

使用JHChainableAnimations

嗯……使用JHChainableAnimations无法完成任务。尝试添加以下代码将引起动画错误或崩溃。

JHChainableAnimator *animator = [[JHChainableAnimator alloc] initWithView:self.myView];
animator.moveX(100).spring.thenAfter(2).moveWidth(30).easeIn.animate(2);
animator.makeOpacity(0).animate(4);

LSAnimator 与 JHChainableAnimations 对比

多链动画：可以完成所有的动画设计需求，比JHChainableAnimations更灵活。
CALayer 支持：支持CALayer的初始化，JHChainableAnimations仅支持UIView。
参数自动完成：支持参数自动完成，JHChainableAnimations不支持。

LSAnimator支持参数自动完成，包括参数数量和参数类型

JHChainableAnimations在代码编写时不够友好。

JHChainableAnimations仍然是一个非常好的动画库，而LSAnimator则是在其基础上发展起来的。

特性

Swift 支持：支持 Swift 3.2 ~ 4。
友好的 Swift 接口：在单独的框架中添加了友好的 Swift 接口。
多链动画：可以完成所有的动画设计需求。
CALayer 支持：支持 CALayer 的初始化。
参数自动完成：支持参数自动完成。
支持动画钩子：为每个动画步骤添加了预动画和后动画钩子。添加了一个最终完成钩子，当所有动画链完成时触发。
非侵入式：不需要让视图/层类继承自其他基类。

用法

创建一个动画器

// UIView initialization
LSAnimator *viewAnimator = [LSAnimator animatorWithView:self.myView];
LSAnimator *viewAnimator = [[LSAnimator alloc] initWithView:self.myView];

// CALayer initialization
LSAnimator *layerAnimator = [LSAnimator animatorWithLayer:self.myLayer];
LSAnimator *layerAnimator = [[LSAnimator alloc] initWithLayer:self.myLayer];

动画

如 moveX(x) 这样的链式属性必须放在动画器和 animate(t) 函数之间。

以下是如何在1秒内将对象大小加倍的一个示例。

animator.makeScale(2.0).animate(1.0);

组合动画

如果您想在缩放视图的同时移动视图，请添加另一个链式属性。顺序不重要。

animator.makeScale(2.0).moveXY(100, 50).animate(1.0);
// the same as animator.moveXY(100, 50).makeScale(2.0).animate(1.0);

注意：组合动画仅适用于需要在同一步骤中完成的动画。

如果动画具有不同的持续时间。当它们不能在同一个动画步骤中完成时，需要使用 多链动画。

可以在此处找到链式属性的完整列表：此处。

链式动画

要链式动画，请使用 thenAfter(t) 函数来分隔链。

以下是先将对象缩放0.5秒，然后在该操作完成后移动1秒的一个示例。

animator.makeScale(2.0).thenAfter(0.5).moveXY(100, 50).animate(1.0);

动画效果

要添加动画效果，请在想要应用该效果的链式属性后面调用效果方法。

以下是使用弹簧效果缩放视图的一个示例。

animator.makeScale(2.0).spring.animate(1.0);

如果您将2个添加到同一个链式属性，第二个将取消第一个。

animator.makeScale(2.0).bounce.spring.animate(1.0);
// The same as animator.makeScale(2.0).spring.animate(1.0);

动画效果属性的完整列表可在此处找到。

锚点定位

要在动画链中的某个点调用锚定方法来锚定视图。就像效果一样，在同一个链中依次调用将取消第一个。

下面是围绕不同锚点旋转视图的示例。

animator.rotateZ(180).anchorTopLeft.thenAfter(1.0).rotateZ(90).anchorCenter.animate(1.0);
// animator.rotateZ(90).anchorTopLeft.anchorCenter == animator.rotateZ(90).anchorCenter

锚定属性的完整列表可以在这里找到。

延迟

要延迟动画，请调用wait(t)或delay(t)链式属性。

下面是一个在0.5秒延迟后移动视图的示例。

animator.moveXY(100, 50).wait(0.5).animate(1.0);
// The same as animator.moveXY(100, 50).delay(0.5).animate(1.0);

完成

要在动画完成后运行代码，请调用animateWithCompletion(t, completion)*函数。

animator.makeX(0).animateWithCompletion(1.0, ^{
	NSLog(@"Animation Done");
});

重复动画

您可以通过替换thenAfter(time)方法与repeat(time, count)方法来重复动画。这将重复之前定义的动画。

animator.increWidth(30).spring.repeat(0.5, 3).moveXY(100, 50).animate(1.0);

您可以调用animateWithRepeat(time, count)来重复动画的最后部分。

animator.increWidth(30).spring.animateWithRepeat(0.5, 3);

回调

您可以通过调用preAnimationBlock(block)和postAnimationBlock(block)方法来挂钩动画过程的各个步骤。所有这些都接受一个简单的代码块参数void(^block)(void)。在动画链中调用这些函数的顺序并不重要。

animator.moveX(10).preAnimationBlock(^{
    NSLog(@"before the first animation");
}).thenAfter(1.0).postAnimationBlock(^{
    NSLog(@"After the second animation");
}).moveY(10).animate(1.0);

贝塞尔路径

您还可以沿着一个UIBezierPath动画一个视图。首先创建一个UIBezierPath *实例，然后向其中添加点、曲线或线条，并在链式属性中使用它。

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:self.myView.center];
[path addLineToPoint:CGPointMake(25, 400)];
[path addLineToPoint:CGPointMake(300, 500)];
animator.moveOnPath(path).animate(1.0);

与Auto Layout一起使用

转换

使用可链的特性transform。这对于使用Auto Layout约束的视图来说更好。您不应与其他链式特性混合使用。

animatorForViewWithConstraints.transformX(50).transformScale(2).animate(1.0);

使用Swift

现在使用带有LSAnimator的Swift在2.x版本中更为易读。我为Swift创建了一个独立的框架，其中包含一个名为CoreAnimator的类。这是一个对LSAnimator的薄包装，具有稍微易读的语法。

let animator = CoreAnimator(view: myView)
animator.move(x: 60).thenAfter(t: 1.0).rotate(angle: 360).bounce.animate(t: 1.0)

链式属性

#pragma mark - Animations
// Makes
// Affects views position and bounds
@property (nonatomic, copy, readonly) LSAnimatorRect makeFrame;
@property (nonatomic, copy, readonly) LSAnimatorRect makeBounds;
@property (nonatomic, copy, readonly) LSAnimatorSize makeSize;
@property (nonatomic, copy, readonly) LSAnimatorPoint makeOrigin;
@property (nonatomic, copy, readonly) LSAnimatorPoint makePosition;
@property (nonatomic, copy, readonly) LSAnimatorFloat makeX;
@property (nonatomic, copy, readonly) LSAnimatorFloat makeY;
@property (nonatomic, copy, readonly) LSAnimatorFloat makeWidth;
@property (nonatomic, copy, readonly) LSAnimatorFloat makeHeight;
@property (nonatomic, copy, readonly) LSAnimatorFloat makeOpacity;
@property (nonatomic, copy, readonly) LSAnimatorColor makeBackground;
@property (nonatomic, copy, readonly) LSAnimatorColor makeBorderColor;
@property (nonatomic, copy, readonly) LSAnimatorFloat makeBorderWidth;
@property (nonatomic, copy, readonly) LSAnimatorFloat makeCornerRadius;
@property (nonatomic, copy, readonly) LSAnimatorFloat makeScale;
@property (nonatomic, copy, readonly) LSAnimatorFloat makeScaleX;
@property (nonatomic, copy, readonly) LSAnimatorFloat makeScaleY;
@property (nonatomic, copy, readonly) LSAnimatorPoint makeAnchor;

// Moves
// Affects views position and bounds
@property (nonatomic, copy, readonly) LSAnimatorFloat moveX;
@property (nonatomic, copy, readonly) LSAnimatorFloat moveY;
@property (nonatomic, copy, readonly) LSAnimatorPoint moveXY;
@property (nonatomic, copy, readonly) LSAnimatorPolarCoordinate movePolar;

// Increments
// Affects views position and bounds
@property (nonatomic, copy, readonly) LSAnimatorFloat increWidth;
@property (nonatomic, copy, readonly) LSAnimatorFloat increHeight;
@property (nonatomic, copy, readonly) LSAnimatorSize increSize;

// Transforms
// Affects views transform property NOT position and bounds
// These should be used for AutoLayout
// These should NOT be mixed with properties that affect position and bounds
- (LSAnimator *)transformIdentity;
@property (nonatomic, copy, readonly) LSAnimatorDegrees rotate; // Same as rotateZ
@property (nonatomic, copy, readonly) LSAnimatorDegrees rotateX;
@property (nonatomic, copy, readonly) LSAnimatorDegrees rotateY;
@property (nonatomic, copy, readonly) LSAnimatorDegrees rotateZ;
@property (nonatomic, copy, readonly) LSAnimatorFloat transformX;
@property (nonatomic, copy, readonly) LSAnimatorFloat transformY;
@property (nonatomic, copy, readonly) LSAnimatorFloat transformZ;
@property (nonatomic, copy, readonly) LSAnimatorPoint transformXY;
@property (nonatomic, copy, readonly) LSAnimatorFloat transformScale; // x and y equal
@property (nonatomic, copy, readonly) LSAnimatorFloat transformScaleX;
@property (nonatomic, copy, readonly) LSAnimatorFloat transformScaleY;


#pragma mark - Bezier Paths
// Animation effects dont apply
@property (nonatomic, copy, readonly) LSAnimatorBezierPath moveOnPath;
@property (nonatomic, copy, readonly) LSAnimatorBezierPath moveAndRotateOnPath;
@property (nonatomic, copy, readonly) LSAnimatorBezierPath moveAndReverseRotateOnPath;

动画效果

- (LSAnimator *)easeIn;
- (LSAnimator *)easeOut;
- (LSAnimator *)easeInOut;
- (LSAnimator *)easeBack;
- (LSAnimator *)spring;
- (LSAnimator *)bounce;
- (LSAnimator *)easeInQuad;
- (LSAnimator *)easeOutQuad;
- (LSAnimator *)easeInOutQuad;
- (LSAnimator *)easeInCubic;
- (LSAnimator *)easeOutCubic;
- (LSAnimator *)easeInOutCubic;
- (LSAnimator *)easeInQuart;
- (LSAnimator *)easeOutQuart;
- (LSAnimator *)easeInOutQuart;
- (LSAnimator *)easeInQuint;
- (LSAnimator *)easeOutQuint;
- (LSAnimator *)easeInOutQuint;
- (LSAnimator *)easeInSine;
- (LSAnimator *)easeOutSine;
- (LSAnimator *)easeInOutSine;
- (LSAnimator *)easeInExpo;
- (LSAnimator *)easeOutExpo;
- (LSAnimator *)easeInOutExpo;
- (LSAnimator *)easeInCirc;
- (LSAnimator *)easeOutCirc;
- (LSAnimator *)easeInOutCirc;
- (LSAnimator *)easeInElastic;
- (LSAnimator *)easeOutElastic;
- (LSAnimator *)easeInOutElastic;
- (LSAnimator *)easeInBack;
- (LSAnimator *)easeOutBack;
- (LSAnimator *)easeInOutBack;
- (LSAnimator *)easeInBounce;
- (LSAnimator *)easeOutBounce;
- (LSAnimator *)easeInOutBounce;

这些函数的快速查看可以在这里找到。

这些动画函数取自一个很酷的关键帧动画库，可以在这里找到。

它们基于可以在这里找到的jQuery加速度函数。

定位

- (LSAnimator *)anchorDefault;
- (LSAnimator *)anchorCenter;
- (LSAnimator *)anchorTop;
- (LSAnimator *)anchorBottom;
- (LSAnimator *)anchorLeft;
- (LSAnimator *)anchorRight;
- (LSAnimator *)anchorTopLeft;
- (LSAnimator *)anchorTopRight;
- (LSAnimator *)anchorBottomLeft;
- (LSAnimator *)anchorBottomRight;

多链动画

您可以通过调用 concurrency 方法添加一个新的动画链。这不会影响之前的动画链。

animator.increWidth(20).spring.animateWithRepeat(0.5, 3);
animator.concurrent.makeBackground([UIColor orangeColor]).animate(1);

在新的动画链同时运行之前，请不要更改动画链的属性。

// Do not do this
animator.moveX(20).animate(1.0);
animator.concurrent.moveX(-20).animate(1.0);

待办事项

约束动画器

安装

Cocoapods

Objective-C

在 Podfile 中添加 pod 'LSAnimator', '~> 2.1.3'。
运行 pod install 或 pod update。
添加 #import <LSAnimator/LSAnimator.h>。

Swift

在 Podfile 中添加 pod 'CoreAnimator', '~> 2.1.3'。
运行 pod install 或 pod update。
添加 import CoreAnimator。

Carthage

将github "Lision/LSAnimator" ~> 2.1.3添加到您的Cartfile中。
运行carthage update --platform ios。

Objective-C

将LSAnimator框架添加到您的项目中。

Swift

将CoreAnimator框架添加到您的项目中。

手动操作

要么克隆repo，然后将LSAnimator中的文件手动添加到LSAnimator。

要求

LSAnimator需要iOS 7.0以上版本。
CoreAnimator需要iOS 9.0以上版本。

联系方式

邮箱：[email protected]
新浪微博：@Lision
Twitter：@Lision

许可

LSAnimator按照MIT许可证提供。有关详细信息，请参阅LICENSE文件。

LSAnimator 2.1.5

LSAnimator 2.1.5

LSAnimator 2.1.5

为什么选择 LSAnimator 和 CoreAnimator?

使用JHChainableAnimations

LSAnimator 与 JHChainableAnimations 对比

特性

用法

创建一个动画器

动画

组合动画

链式动画

动画效果

锚点定位

延迟

完成

重复动画

回调

贝塞尔路径

与Auto Layout一起使用

转换

使用Swift

链式属性

动画效果

定位

多链动画

待办事项

安装

Cocoapods

Objective-C

Swift

Carthage

Objective-C

Swift

手动操作

要求

联系方式

许可