[enhance efficiency] animate with LSAnimator

To update

GitHub has updated the code, and LSAnimator supports adding animations directly to CALayer (Framework has been updated, Demo is updated, and will be released after it is stable) in CocoaPods

Swift version, and so on after the stability of Objective-C began to do, and should soon meet with you ha ~!


With LSAnimator write just two lines of code to achieve animation interaction:

[enhance efficiency] animate with LSAnimator

brief introduction

LSAnimator is an open-source iOS animation library.

Similar to JHChainableAnimations, it also supports chain animation. The difference is that LSAnimator supports complex, Multi Chain animations, so that many animations that can’t be implemented with JH animation libraries can be implemented.

Do not understand the chain animation students then look down ~ ~
used JH students can choose to see directly behind the Multi Chain animation section ~!

Chain animation

A chain animation can help you achieve the effect of animation interaction that requires a relatively large amount of code, using only a small amount of code.

Note: Here’s a more accurate version of chain animation, “DSL,” which we’ll use in later articles.

When JHChainableAnimations’s debut is relying on the advantages of the liberation of the chain of animation iOS coder in writing animation labor “fame”, as LSAnimator inherits the advantages of the following, for example see LSAnimator chain animation and realization:

Demo translation

Implementation effect:

[enhance efficiency] animate with LSAnimator

Implementation code:

To add animation / / view.X axis 80pt. animation time is 1s _animatorView.ls_moveX (80).Ls_animate (1);

Demo increments to change width (spring effect, repeat 3 times)

Implementation effect:

[enhance efficiency] animate with LSAnimator

Implementation code:

To add view.width 20pt. animation / spring effects. Each animation 0.5s repeated 3 times _animatorView.ls_increWidth (20).Ls_bounce.ls_animateWithRepeat (0.5, 3);

Multi Chain animation

Above the chain of animation, so JHChainableAnimations had already realized the chain of animation, LSAnimator why was made? Repeat the wheel???

Don’t jump to conclusions. Let’s see what the JHChainableAnimations lacks, or limitations.

Limitations of JHChainableAnimations (limitations)

Or a chestnuts:

Suppose you are in an electricity supplier company, there is a click income shopping cart animation effect is similar to Taobao:

Effect: goods from a box gradually into a circular shape to a round shape, then down to the low TabBar shopping cart icon.
callout: 2S time of deformation, moving time 2s (to highlight the effect, extended the animation time)


[enhance efficiency] animate with LSAnimator

First use LSAnimator to achieve:

To add / view. animation 20pt. animation 2s.Y fillet fillet axial displacement displacement 2S _animatorView.ls_cornerRadius 100pt. animation (20).Ls_thenAfter (2).Ls_moveY (100).Ls_animate (2);

This is also good with JHChainableAnimations:

JHChainableAnimator, *animator = [[JHChainableAnimator, alloc], initWithView:_animatorView], animator.makeCornerRadius (20),.ThenAfter (2),.MoveY (100),.Animate (2);

here, you can see that LSAnimator is non-invasive, and you can write animation directly on the target UIView.
JHChainableAnimations the other developers need to declare a JHChainableAnimator to do similar to Andorid in Builder, then need to UIView bound to the animator can do with animator animation. Name:
LSAnimator uses Category because it is non-invasive, so the method name has an LS prefix in order not to overlap the official API.
JHChainableAnimations does not need to consider this, using the official name of the class directly.

From an invasive point of view, LSAnimator is definitely better than JHChainableAnimations. However, from the experience experience, the prefix of LS does not allow developers to have native API experience. But from my own point of view, use the prefix in the project and no ground for blame, if Categroy more so, knock. After tips will be very much at this time can also press ls to quickly screen out the function you want to use.

If you have any different opinions, please contact me or go to GitHub to mention issue. I’ll figure out which way most people prefer to use it and improve it

Well, all the above dish, the next is the dinner:

We think the animation product manager unhappy, drop to TabBar when blocking the TabBar is very stiff, so UI interaction designers need you in the whole process of the animation and the commodity chain is transparent.

Note: pays attention to the blackboard, because the transparency changes with the implemented animation chain at the same time, so they belong to parallel running animation.

Callout to:

  • The deformation time is 2S, and the moving time is 2S. (in order to highlight the effect, the animation time is extended)
  • Transparent 1 ~ 0, long 4S (in order to highlight the effect, extended animation time)

Regret (happy, or how I LSAnimator) to tell you, just use the JHChainableAnimations is unable to complete this demand (do not believe that students can try, JH current source is I scratched a times, I must say this is emboldened)

If you want to use JH to do this demand requires alone to write lengthy animation code (although this example is very simple changes in transparency, but in practice the interactive animation may be more complicated), don’t write:

JHChainableAnimator, *animator = [[JHChainableAnimator, initWithView:_animatorView], animator.makeCornerRadius (20).ThenAfter (2).MoveY (100).Animate (2); animator.makeOpacity (0).Animate (4) alloc];

To impress, let’s look at the consequences of imposing transparency code on JH:

[enhance efficiency] animate with LSAnimator

Don’t doubt it, that’s the effect……
used to encounter a similar situation with JH students, it must have been the heart of the ~ ~ as for why so, we can communicate privately, you can also take your own source ha ~!

Then we’ll look at the implementation of LSAnimator:

_animatorView.ls_cornerRadius (20).Ls_thenAfter (2).Ls_moveY (100).Ls_animate (2); / / add and action painting chain, transparency ~0, long 4S _animatorView.ls_concurrent.ls_opacity (0).Ls_animate (4);

Yes, small changes in demand. Our code needs little change, and a line of code is added.

Let’s see the effect:

[enhance efficiency] animate with LSAnimator

Shy (manual blush) take a picture to explain:

[enhance efficiency] animate with LSAnimator


LSAnimator is the set of accessible, easy to write, Multi Chain animation library, can think of it as an evolution of JHChainableAnimator, there are a lot of things inspired by JH, the use of specific documents are in the inside of the link (with Chinese document below)

In doing simple animations, LSAnimator does not lose at JH, and LSAnimator can guarantee simple and efficient completion of requirements when JH lacks complex animation interaction.

If you think LSAnimator deserves attention, you also want to Star more, hey hey ~!

Yes LSAnimator is that I write, it is just a baby, need your contribution, contribution code, document, bug & issue even helped P is contribution, can add group: 163013540 to become a member of the general framework of the current start, oh ~ (Group wife less here is a veteran, the backbone, the core)