LSAnimator

Easy to read and write multi-chain animation framework (perfect for Swift 3.2-4.0)

Making: LSAnimator

Why LSAnimator?

Using LSAnimator (Objective-C) or CoreAnimator (Swift), complex and maintainable animations can be implemented with a small amount of code.

To provide a Swift friendly experience I created a separate Framework, CoreAnimator, which has the same powerful features as LSAnimator.

Why LSAnimator?

Well, in fact, it was for my own use at first.

As early as last year, my project did a lot of animations to optimize interactions, and it took a long time to write lengthy code to implement these animations, either with CAAnimations or UIView animations. Such code is not only tired when writing, but also tired when maintaining. Besides, since each animation interaction is different, and the details of animation interaction may need to be modified at any time in the future, I always want to get an animation library to liberate the labor force wasted in writing animation interaction implementation.

Before writing the library, I did a quick GitHub search and found a library called JHChainableAnimations, which claims to be an easy-to-read and write chainable animation framework, so I used it directly.

However, in the process of using this library found a fatal flaw, that is, all animations must be placed in one animation chain, after the execution of one to the next. But in the actual use, I found a lot of animation requirements are an animation chain can not run down.

So I took it up one dimension and upgraded it to multi-chain. Use so far has not met too many chain animation can not achieve the animation requirements, so it should be a highly customizable animation library (laugh).

I tried to give JHChainableAnimations a PR later, but found out that it had been updated to V2.0 at the time. Emmmmm… The code that was upgraded to multi-chain was very large, and the code I was changing was v1.0, so it was very painful to merge the code… She started her own project on GitHub. LSAnimator.

Since then, I have also received some Issues, and have been actively maintaining them. Now, the gap between animations and JHChainableAnimations has been widening (it seems that writing frames is one kind of fun, maintaining frames is another kind).

What is multi-chain animation?

CAAnimations and UIView animations are already very powerful, but using them to implement animations when the design is slightly more complex can make the code very difficult to read and maintain.

Suppose I want to use the Spring time curve to move myView 100 points to the right, and then use the EaseIn time curve to increase the width of myView by 30 points:

Using a system approach

[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];
                     }];
Copy the code

Emmmmm… The code is hard to read and not maintainable.

LSAnimator can be done in one line of code.

Using LSAnimator

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

Emmmmm… However, there is already an animation library called JHChainableAnimations that you can use to do the same.

So what are the problems with JHChainableAnimations?

JHChainableAnimations have powerful linkable animations and a syntax that is easy to read/write, but it does not support multi-chained animations.

Following the above example, assuming that the above animation requirement is now left unchanged, the new requirement is to change the transparency of myView to 0 for the entire execution of the above animation:

LSAnimator

With LSAnimator, you only need to add one line of code.

LSAnimator *animator = [LSAnimator animatorWithView:self.myView];
animator.moveX(100).spring.thenAfter(2).increWidth(30).easeIn.animate(2);
// Add this line
animator.concurrent.makeOpacity(0).animate(4);
Copy the code

JHChainableAnimations

Emmmmm… This cannot be done with JHChainableAnimations. Trying to add the following code will cause the animation to behave abnormally or even blink. The effect is as shown above. MyView flashes and the opacity goes straight to 0, which is obviously not what we want.

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

LSAnimator VS JHChainableAnimations

  • Multi-chain animations: you can achieve almost any animation design, which is more flexible and powerful (one dimension up) than JHChainableAnimations.
  • Support for CALayer: Animations can be initialized via CALayer, and can be implemented directly with CALayer. JHChainableAnimations only support UIView.
  • Parameter completion: Automatic parameter completion is supported. The number and types of required parameters are automatically prompted. JHChainableAnimations are not supported.

LSAnimator: LSAnimator: LSAnimator: LSAnimator: LSAnimator: LSAnimator: LSAnimator: LSAnimator: LSAnimator

JHChainableAnimations the method followed by the. Syntax does not have parameters, which can be very awkward to use, especially if you are not familiar with parameters and need command + left Mouse and the code to determine the number and types of parameters needed:

The LSAnimator project has been written in detail for more information and instructions

The last

If you’ve already seen it, please check out the project page anyway!

At the beginning of the project, welcome PR!

Supplement ~ I set up a technical exchange wechat group, want to know more friends in it! If you have any questions about the article or encounter some small problems in your work, you can find me or other friends in the group to communicate and discuss. Looking forward to your joining us

Emmmmm.. Because the number of wechat group is over 100, it is not possible to scan the code into the group, so please scan the qr code above to pay attention to the public number into the group.