iOS - 多链式动画框架 LSAnimator

Github github.com/Lision/LSAn…

效果

用 LSAnimator 写短短两行代码即可实现的动画交互：

demo.gif

简介

LSAnimator 是一款新开源的 iOS 动画库。

与 JHChainableAnimations 类似的是它同样支持链式动画。不同的是 LSAnimator 支持复杂的多链式动画，这样就可以实现很多用 JH 动画库无法实现的动画效果。

不明白链式动画的同学接着往下看~
用过 JH 的同学可以选择直接看后面的 多链式动画 小节~

链式动画

链式动画可以帮助你仅仅使用少量代码就可以实现原本需要相对大量的代码才能实现的动画交互效果。

Note：这里所说的链式动画更准确的说法是 DSL 这个我们放在以后的文章来说明。

JHChainableAnimations 出道之时就是靠着链式动画的优势解放了广大 iOS coder 在写动画时的劳动力“一炮而红”，LSAnimator 尽可能的继承了其优点，下面举个栗子?来看一下 LSAnimator 的链式动画效果与实现方式：

demo 平移

实现效果：

实现代码：

// 待添加动画view.X轴移动80pt.动画时间为1s
_animatorView.ls_moveX(80).ls_animate(1);复制代码

demo 增量改变宽度(弹簧特效，重复3次)

实现效果：

实现代码：

// 待添加动画view.width增加20pt.弹簧特效.每次动画0.5s重复3次执行
_animatorView.ls_increWidth(20).ls_bounce.ls_animateWithRepeat(0.5, 3);复制代码

多链式动画

上面讲了链式动画的优势，那么 JHChainableAnimations 老早就已经实现了链式动画，LSAnimator 为什么还要被造出来呢？是重复造轮子吗？？？

先别急着下结论，我们来想想 JHChainableAnimations 究竟有哪些不足之处，或者是局限性。

JHChainableAnimations 的不足之处（局限性）

还是来一个栗子?吧：

假设你处在一个电商公司吧，里面有一个点击收入购物车的动画效果是类似于淘宝的：

动效：商品从一个方块逐渐形变为圆形，变为圆形之后下移到低栏 TabBar 的购物车图标。
标注：形变时间 2s，移动时间 2s （为了凸显效果，延长了动画时间）

动画：

先用 LSAnimator 来实现：

// 待添加动画的view.圆角20pt.圆角动画时间2s.Y轴位移100pt.位移动画2s
_animatorView.ls_cornerRadius(20).ls_thenAfter(2).ls_moveY(100).ls_animate(2);复制代码

这用 JHChainableAnimations 也很好做：

JHChainableAnimator *animator = [[JHChainableAnimator alloc] initWithView:_animatorView];
animator.makeCornerRadius(20).thenAfter(2).moveY(100).animate(2);复制代码

侵入性：
这里可看出 LSAnimator 是无侵入性的添加，直接在目标 UIView 上面写动画即可。
JHChainableAnimations 需要开发者另声明一个 JHChainableAnimator 来做类似 Andorid 中的 Builder，之后需要把 UIView 绑定到 animator上才可以用 animator 做动画。

命名：
LSAnimator 由于是无侵入式添加，所以用到了 Category，因此为了不会误覆盖官方 API 所以方法名带有 ls 前缀。
JHChainableAnimations 则无需考虑这一点，直接使用了类官方的命名。

从侵入性角度看，LSAnimator 无疑要优于 JHChainableAnimations。不过从使用体验来讲，ls 的前缀不会让开发者有使用原生 API 的体验。但是从笔者自己的角度来看，使用前缀无可厚非，而且如果项目中的 Categroy 比较多的话，敲 . 之后的提示会非常多，此时还可以敲 ls 来快速筛选出自己想使用的函数。

如果有不同意见请联系我，或者去 GitHub 提 issue。我会统计大部分人偏爱哪种使用方式而改进哈~

好吧，上面的都是凉菜，接下来才是正餐：

我们的产品经理觉得动画不爽，下落到 TabBar 的时候挡住了 TabBar 显得很僵硬，于是 UI 交互设计师需求你在上述动画链的整体过程同时把商品的改为透明。

Note: 注意敲黑板了，由于改透明是与上面已实现的动画链同时进行的，所以它们属于平行运行的动画。

标注变为：

• 形变时间 2s，移动时间 2s （为了凸显效果，延长了动画时间）
• 透明 1 ~ 0，时长 4s （为了凸显效果，延长了动画时间）

很遗憾的（开心，不然怎么有我 LSAnimator）告诉大家，仅仅使用 JHChainableAnimations 是无法完成这一需求的（不相信的同学可以试试，JH 目前的源码被我扒了一个遍，敢说这话我肯定是有底气的）

如果你强行想用 JH 来做这个需求就需要自己单独写冗长的动画代码（虽然这个例子里面很简单的改变了透明度，但是实际中的动画交互可能会更复杂），千万不要这样写：

JHChainableAnimator *animator = [[JHChainableAnimator alloc] initWithView:_animatorView];
animator.makeCornerRadius(20).thenAfter(2).moveY(100).animate(2);
animator.makeOpacity(0).animate(4);复制代码

为了加深印象，我们看下 JH 强加透明度代码的后果：

不要怀疑，就是这样的效果……
以前用 JH 遇到过类似状况的同学当时肯定也是被扎心了的~至于为啥会这样我们可以私下交流，也可以自己扒源码哈~

然后我们再来看看 LSAnimator 的实现：

_animatorView.ls_cornerRadius(20).ls_thenAfter(2).ls_moveY(100).ls_animate(2);
// 添加并行动画链，透明度~0，时长4s
_animatorView.ls_concurrent.ls_opacity(0).ls_animate(4);复制代码

是的，需求小变动嘛，我们的代码也就只需要小变动，添加了一行代码搞定。

我们看看效果：

娇羞（手动脸红）拿一张图来说明一下：

总结

LSAnimator 是笔者推荐的一套易上手、易读写、可多链式动画库，可以把它当做是 JHChainableAnimator 的进化版，里面有很多东西灵感都源自于 JH，具体的使用文档在链接里面都有（最下面有中文文档）

在做简单动画时 LSAnimator 不输于 JH，并且在 JH 乏力的复杂动画交互时 LSAnimator 也能保证简单高效的完成需求。

如果觉得 LSAnimator 值得关注的话还望多多 Star 一下嘿嘿~

没错 LSAnimator 就是偶写的，它还只是一个宝宝，需要你们的贡献，贡献代码、整理文档、提 bug & issue 甚至是帮着 P 图都算是贡献，都可以加群：163013540 来成为此框架的一员大将哦~（目前起步，群内人少，来了就是元老、骨干、核心）