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 来成为此框架的一员大将哦~（目前起步，群内人少，来了就是元老、骨干、核心）