Latest 1.2.0
Homepage https://github.com/Lision/LSAnimator
License MIT
Platforms ios 7.0, requires ARC
Frameworks UIKit, QuartzCore
Authors

language
Version
Build Status
MIT License
Platform

Introduction(中文介绍在下面)

An easy to read and write, non-invasive multi-chain animation framework, inspired by JHChainableAnimations.

JHChainableAnimations uses the concept of DSL (Domain Specific Language). It translates the official complex animation API (including UIView and CACoreAnimation) into their own DSL language. This makes it streamlined and efficient in dealing with animations, so I have kept all of its advantages as a single-chain animation framework as much as possible.

However, the shortcoming is also obvious. JHChainableAnimations will be more powerless when the animation or interaction becomes complicated. If there are multiple animations independently, LSAnimator would be a better choice.

Features

  • [x] Multi-chain Animation
  • [x] Non-intrusive
  • [x] Support CALayer (v1.1.0)
  • [x] Property Animation (Support auto parameter association v1.2.0)

The following comparison of single-chain animation and multi-chain animation differences:

Single-chain animation

code animation
_animatorView.ls_moveX(80).ls_animate(1);
_animatorView.ls_increWidth(20).ls_bounce.ls_animateWithRepeat(0.5, 3);
_animatorView.ls_scale(2).ls_background([UIColor orangeColor]).ls_cornerRadius(20).ls_thenAfter(0.5).ls_moveY(40).ls_bounce.ls_animate(0.5);

You may have noticed that, the third single-chain animation changed the background color and the animated size are placed in the same node as the chain.

If you are trying to change the background color during animations, unfortunately, single-chain animation can not complete this task.

So I bring out this multi-chain animation framework — LSAnimator, which based on JHChainableAnimations.

Multi-chain animation

_animatorView.ls_scale(2).ls_cornerRadius(20).ls_thenAfter(0.5).ls_moveY(40).ls_bounce.ls_animate(0.5);

_animatorView.ls_concurrent.ls_background([UIColor orangeColor]).ls_delay(0.25).ls_animate(0.8);

As shown above, you can see the animation to change the background color throughout the whole animation and it is independent of other animations.

Install

CocoaPods

  1. Add pod 'LSAnimator' to Podfile
  2. Execute pod install orpod update
  3. Import <LSAnimator / LSAnimator.h>

Manual installation

  1. Download all files in the LSAnimator folder
  2. Add (drag and drop) the source file to your project
  3. Import the corresponding header file UIView + LSAnimator.h

Usage

Non-intrusive integration, directly in the animation you want to add the effect of UIView above the following API can be written animation.

Multi-chain animation properties

Sets the animation of the target value

property name params usage
ls_frame CGRect view.ls_frame(rect)
ls_bounds CGRect view.ls_bounds(rect)
ls_size CGSize view.ls_size(size)
ls_origin CGPoint view.ls_origin(point)
ls_center CGPoint view.ls_center(point)
ls_x CGFloat view.ls_x(float)
ls_y CGFloat view.ls_y(float)
ls_width CGFloat view.ls_width(float)
ls_height CGFloat view.ls_height(float)
ls_opacity CGFloat view.ls_opacity(float)
ls_background UIColor view.ls_background(color)
ls_borderColor UIColor view.ls_borderColor(color)
ls_borderWidth CGFloat view.ls_borderWidth(float)
ls_cornerRadius CGFloat view.ls_cornerRadius(float)
ls_scale CGFloat view.ls_scale(float)
ls_scaleX CGFloat view.ls_scaleX(float)
ls_scaleY CGFloat view.ls_scaleY(float)
ls_anchor CGPoint view.ls_anchor(point)

Incremental animation

property name params usage
ls_moveX CGFloat view.ls_moveX(float)
ls_moveY CGFloat view.ls_moveY(float)
ls_moveXY CGPoint view.ls_moveXY(point)
ls_movePolar CGFloat,CGFloat view.ls_movePolar(radius, angle)
ls_increWidth CGFloat view.ls_increWidth(float)
ls_increHeight CGFloat view.ls_increHeight(float)
ls_increSize CGSize view. ls_increSize(size)

Transform animation

property name params usage
ls_transformIdentity view.ls_transformIdentity
ls_rotate CGFloat view.ls_rotate(float)
ls_rotateX CGFloat view.ls_rotateX(float)
ls_rotateY CGFloat view.ls_rotateY(float)
ls_rotateZ CGFloat view.ls_rotateZ(float)
ls_transformX CGFloat view.ls_transformX(float)
ls_transformY CGFloat view.ls_transformY(float)
ls_transformZ CGFloat view.ls_transformZ(float)
ls_transformXY CGPoint view.ls_transformXY(point)
ls_transformScaleX CGFloat view.ls_transformScaleX(float)
ls_transformScaleY CGFloat view.ls_transformScaleY(float)
ls_transformScale CGFloat view.ls_transformScale(float)

BezierPath

property name params usage
ls_moveOnPath UIBezierPath view.ls_moveOnPath(path)
ls_moveAndRotateOnPath UIBezierPath view.ls_moveAndRotateOnPath(path)
ls_moveAndReverseRotateOnPath UIBezierPath view.ls_moveAndReverseRotateOnPath(path)

AnchorPoint

property name params usage
ls_anchorDefault view.ls_anchorDefault
ls_anchorCenter view.ls_anchorCenter
ls_anchorTop view.ls_anchorTop
ls_anchorBottom view.ls_anchorBottom
ls_anchorLeft view.ls_anchorLeft
ls_anchorRight view.ls_anchorRight
ls_anchorTopLeft view.ls_anchorTopLeft
ls_anchorTopRight view.ls_anchorTopRight
ls_anchorBottomLeft view.ls_anchorBottomLeft
ls_anchorBottomRight view.ls_anchorBottomRight

Animation curve

property name params usage
ls_easeIn view.ls_easeIn
ls_easeOut view.ls_easeOut
ls_easeInOut view.ls_easeInOut
ls_easeBack view.ls_easeBack
ls_spring view.ls_spring
ls_bounce view.ls_bounce
ls_easeInQuad view.ls_easeInQuad
ls_easeOutQuad view.ls_easeOutQuad
ls_easeInOutQuad view.ls_easeInOutQuad
ls_easeInCubic view.ls_easeInCubic
ls_easeOutCubic view.ls_easeOutCubic
ls_easeInOutCubic view.ls_easeInOutCubic
ls_easeInQuart view.ls_easeInQuart
ls_easeOutQuart view.ls_easeOutQuart
ls_easeInOutQuart view.ls_easeInOutQuart
ls_easeInSine view.ls_easeInSine
ls_easeOutSine view.ls_easeOutSine
ls_easeInOutSine view.ls_easeInOutSine
ls_easeInExpo view.ls_easeInExpo
ls_easeOutExpo view.ls_easeOutExpo
ls_easeInOutExpo view.ls_easeInOutExpo
ls_easeInCirc view.ls_easeInCirc
ls_easeOutCirc view.ls_easeOutCirc
ls_easeInOutCirc view.ls_easeInOutCirc
ls_easeInElastic view.ls_easeInElastic
ls_easeOutElastic view.ls_easeOutElastic
ls_easeInOutElastic view.ls_easeInOutElastic
ls_easeInBack view.ls_easeInBack
ls_easeOutBack view.ls_easeOutBack
ls_easeInOutBack view.ls_easeInOutBack
ls_easeInBounce view.ls_easeInBounce
ls_easeOutBounce view.ls_easeOutBounce
ls_easeInOutBounce view.ls_easeInOutBounce

Hooks

property name params usage
ls_preAnimationBlock Block view.ls_preAnimationBlock(block)
ls_postAnimationBlock Block view.ls_postAnimationBlock(block)
ls_theFinalCompletion Block view.ls_theFinalCompletion(block)

Delay

property name params usage
ls_delay NSTimeInterval view.ls_delay(time)
ls_wait NSTimeInterval view.ls_wait(time)

Animator Controller

property name params usage
ls_repeat NSTimeInterval, NSInteger view.ls_repeat(time, count)
ls_thenAfter NSTimeInterval view.ls_thenAfter(time)
ls_animate NSTimeInterval view.ls_animate(time)
ls_animateWithRepeat NSTimeInterval, NSInteger view. ls_animateWithRepeat(time, count)
ls_animateWithCompletion NSTimeInterval, Block view.ls_animateWithCompletion(time, block)

System Requirements

Currently supports iOS 7.0 (including 7.0).

License

LSAnimator uses the MIT license, see the LICENSE file for details.

Contributors

If you think LSAnimator is worthy of attention and want to become a contributor, you may wish to join us.

LSAnimator core member group (QQ group): 163013540

ContactInfo

If you have any ideas and suggestions about LSAnimator, please to send me an E-mail, and I will reply you as soon as possible within 24 hours.

My E-mail address: [email protected]

中文介绍

LSAnimator 动画师

易于阅读和写入的非侵入式可多链式动画框架,灵感来源于 JHChainableAnimations。

在我初尝 JHChainableAnimations 链式动画框架时对它的感觉非常赞,我认为它使用了 DSL(Domain Specific Language) 的概念,将官方繁杂的动画 API (包含 UIView 和 CACoreAnimation) 转为了自己的 DSL 语言。这使得它在处理动画这一指定领域变得精简而高效,所以我尽可能的保留了其作为单链动画的所有优点。不过其作为单链式动画框架的缺点也是显而易见的,当动画交互稍微复杂,存在多个动画相互独立(某些动画之间有先后次序可以放入一个动画链而某些独立其外)时 JHChainableAnimations 就显得比较无力了。

新特性

  • [x] 多链式动画
  • [x] 非侵入式
  • [x] 支持 CALayer (v1.1.0)
  • [x] 属性化动画(支持自动参数联想 v1.2.0)

下面对比一下单链式动画和多链式动画的差异:

单链式动画

代码 动画效果
_animatorView.ls_moveX(80).ls_animate(1);
_animatorView.ls_increWidth(20).ls_bounce.ls_animateWithRepeat(0.5, 3);
_animatorView.ls_scale(2).ls_background([UIColor orangeColor]).ls_cornerRadius(20).ls_thenAfter(0.5).ls_moveY(40).ls_bounce.ls_animate(0.5);

你或许已经注意到,在上面第三个单链式动画中,改变背景颜色的动画与改变大小的动画被放入了链条的同一节点。如果你所在公司的动画交互设计师让你在改变大小之后的若干时间才开始改变颜色,且改变颜色的时长独立于大小和位移的动画链,那么很遗憾的告诉你,单链式动画无法实现上述的动画交互效果。

所以我才在 JHChainableAnimations 的基础上做了多链式动画框架 LSAnimator。

多链式动画

_animatorView.ls_scale(2).ls_cornerRadius(20).ls_thenAfter(0.5).ls_moveY(40).ls_bounce.ls_animate(0.5);
_animatorView.ls_concurrent.ls_background([UIColor orangeColor]).ls_delay(0.25).ls_animate(0.8);

如上所示,可以把逻辑上不相关的动画(上面例子是改变颜色的动画)独立出来放到另一个动画链去执行,以实现复杂的动画交互需求。

这里还有一篇 LSAnimator 对比 JHChainableAnimations 的文章推荐阅读

安装

CocoaPods

  1. 在 Podfile 中添加 pod 'LSAnimator'
  2. 执行 pod install 或者 pod update
  3. 导入 <LSAnimator/LSAnimator.h>

手动安装

  1. 下载 LSAnimator 文件夹中的所有文件
  2. 将源文件添加(拖放)到你的工程
  3. 导入对应头文件 UIView+LSAnimator.h

用法

非侵入性集成,直接在你所要添加动画效果的 UIView 上面按照下述 API 书写动画即可。

多链式动画属性

设置目标值的动画

属性名称 参数 用法 描述
ls_frame CGRect view.ls_frame(rect) 在当前节点添加设置 frame 的动画
ls_bounds CGRect view.ls_bounds(rect) 在当前节点添加设置 bounds 的动画
ls_size CGSize view.ls_size(size) 在当前节点添加设置 bounds.size 的动画
ls_origin CGPoint view.ls_origin(point) 在当前节点添加设置 frame.origin 的动画
ls_center CGPoint view.ls_center(point) 在当前节点添加设置 center 的动画
ls_x CGFloat view.ls_x(float) 在当前节点添加设置 frame.origin.x 的动画
ls_y CGFloat view.ls_y(float) 在当前节点添加设置 frame.origin.y 的动画
ls_width CGFloat view.ls_width(float) 在当前节点添加设置 bounds.size.with 的动画
ls_height CGFloat view.ls_height(float) 在当前节点添加设置 bounds.size.height 的动画
ls_opacity CGFloat view.ls_opacity(float) 在当前节点添加设置透明度的动画
ls_background UIColor view.ls_background(color) 在当前节点添加设置 backgroundColor 的动画
ls_borderColor UIColor view.ls_borderColor(color) 在当前节点添加设置 layer.borderColor 的动画
ls_borderWidth CGFloat view.ls_borderWidth(float) 在当前节点添加设置 layer.borderWidth 的动画
ls_cornerRadius CGFloat view.ls_cornerRadius(float) 在当前节点添加设置 layer.cornerRadius 的动画
ls_scale CGFloat view.ls_scale(float) 在当前节点添加设置 bounds.size 的倍数动画
ls_scaleX CGFloat view.ls_scaleX(float) 在当前节点添加设置 bounds.size.width 的倍数动画
ls_scaleY CGFloat view.ls_scaleY(float) 在当前节点添加设置 bounds.size.height 的倍数动画
ls_anchor CGPoint view.ls_anchor(point) 在当前节点动画之前设置 layer.anchorPoint

增量动画

属性名称 参数 用法 描述
ls_moveX CGFloat view.ls_moveX(float) 在当前节点添加 x 轴位移 float 的动画
ls_moveY CGFloat view.ls_moveY(float) 在当前节点添加 y 轴位移 float 的动画
ls_moveXY CGPoint view.ls_moveXY(point) 上述动画合并
ls_movePolar CGFloat,CGFloat view.ls_movePolar(radius, angle) 一般用作波浪位移动画
ls_increWidth CGFloat view.ls_increWidth(float) 在当前节点添加 bounds.size.width 增量动画
ls_increHeight CGFloat view.ls_increHeight(float) 在当前节点添加 bounds.size.height 增量动画
ls_increSize CGSize view. ls_increSize(size) 在当前节点添加 bounds.size 增量动画

转换动画

属性名称 参数 用法
ls_transformIdentity view.ls_transformIdentity
ls_rotate CGFloat view.ls_rotate(float)
ls_rotateX CGFloat view.ls_rotateX(float)
ls_rotateY CGFloat view.ls_rotateY(float)
ls_rotateZ CGFloat view.ls_rotateZ(float)
ls_transformX CGFloat view.ls_transformX(float)
ls_transformY CGFloat view.ls_transformY(float)
ls_transformZ CGFloat view.ls_transformZ(float)
ls_transformXY CGPoint view.ls_transformXY(point)
ls_transformScaleX CGFloat view.ls_transformScaleX(float)
ls_transformScaleY CGFloat view.ls_transformScaleY(float)
ls_transformScale CGFloat view.ls_transformScale(float)

贝塞尔曲线动画

属性名称 参数 用法
ls_moveOnPath UIBezierPath view.ls_moveOnPath(path)
ls_moveAndRotateOnPath UIBezierPath view.ls_moveAndRotateOnPath(path)
ls_moveAndReverseRotateOnPath UIBezierPath view.ls_moveAndReverseRotateOnPath(path)

设置锚点

属性名称 参数 用法
ls_anchorDefault view.ls_anchorDefault
ls_anchorCenter view.ls_anchorCenter
ls_anchorTop view.ls_anchorTop
ls_anchorBottom view.ls_anchorBottom
ls_anchorLeft view.ls_anchorLeft
ls_anchorRight view.ls_anchorRight
ls_anchorTopLeft view.ls_anchorTopLeft
ls_anchorTopRight view.ls_anchorTopRight
ls_anchorBottomLeft view.ls_anchorBottomLeft
ls_anchorBottomRight view.ls_anchorBottomRight

动画曲线

属性名称 参数 用法
ls_easeIn view.ls_easeIn
ls_easeOut view.ls_easeOut
ls_easeInOut view.ls_easeInOut
ls_easeBack view.ls_easeBack
ls_spring view.ls_spring
ls_bounce view.ls_bounce
ls_easeInQuad view.ls_easeInQuad
ls_easeOutQuad view.ls_easeOutQuad
ls_easeInOutQuad view.ls_easeInOutQuad
ls_easeInCubic view.ls_easeInCubic
ls_easeOutCubic view.ls_easeOutCubic
ls_easeInOutCubic view.ls_easeInOutCubic
ls_easeInQuart view.ls_easeInQuart
ls_easeOutQuart view.ls_easeOutQuart
ls_easeInOutQuart view.ls_easeInOutQuart
ls_easeInSine view.ls_easeInSine
ls_easeOutSine view.ls_easeOutSine
ls_easeInOutSine view.ls_easeInOutSine
ls_easeInExpo view.ls_easeInExpo
ls_easeOutExpo view.ls_easeOutExpo
ls_easeInOutExpo view.ls_easeInOutExpo
ls_easeInCirc view.ls_easeInCirc
ls_easeOutCirc view.ls_easeOutCirc
ls_easeInOutCirc view.ls_easeInOutCirc
ls_easeInElastic view.ls_easeInElastic
ls_easeOutElastic view.ls_easeOutElastic
ls_easeInOutElastic view.ls_easeInOutElastic
ls_easeInBack view.ls_easeInBack
ls_easeOutBack view.ls_easeOutBack
ls_easeInOutBack view.ls_easeInOutBack
ls_easeInBounce view.ls_easeInBounce
ls_easeOutBounce view.ls_easeOutBounce
ls_easeInOutBounce view.ls_easeInOutBounce

钩子

属性名称 参数 用法 描述
ls_preAnimationBlock Block view.ls_preAnimationBlock(block) 设置在当前动画节点执行动画之前执行的 block
ls_postAnimationBlock Block view.ls_postAnimationBlock(block) 设置在当前动画节点执行动画之后执行的 block
ls_theFinalCompletion Block view.ls_theFinalCompletion(block) 设置当前 view 所有动画链执行完毕之后的 block

延时

属性名称 参数 用法 描述
ls_delay NSTimeInterval view.ls_delay(time) 设置当前节点的动画 delay
ls_wait NSTimeInterval view.ls_wait(time) 同上,只是书写方便

动画师控制器

属性名称 参数 用法 描述
ls_repeat NSTimeInterval, NSInteger view.ls_repeat(time, count) 设置当前节点的动画时间与重复次数并添加新节点
ls_thenAfter NSTimeInterval view.ls_thenAfter(time) 设置当前节点的动画时间并添加新节点
ls_animate NSTimeInterval view.ls_animate(time) 设置当前节点动画时间并开始执行此动画链
ls_animateWithRepeat NSTimeInterval, NSInteger view. ls_animateWithRepeat(time, count) 设置当前节点的动画时间与重复次数并开始执行此动画链
ls_animateWithCompletion NSTimeInterval, Block view.ls_animateWithCompletion(time, block) 设置当前动画节点的动画时间并开始执行此动画链 动画链结束后执行block

系统要求

目前支持 iOS 7.0 之后(含 7.0)。

许可证

LSAnimator 使用 MIT 许可证,详情见 LICENSE 文件。

贡献者

如果你觉得 LSAnimator 值得关注,并且想要变成贡献者,不妨加入我们。

LSAnimator 核心成员群(QQ 群):163013540

联系我

如果有任何关于 LSAnimator 的想法和建议,都欢迎你给我发 E-mail,我会尽可能的在 24 小时内回复你。

我的 E-mail 地址:[email protected]

Latest podspec

{
    "name": "LSAnimator",
    "version": "1.2.0",
    "summary": "Easy to read and write non-intrusive multi-chain animation kits.",
    "homepage": "https://github.com/Lision/LSAnimator",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    },
    "authors": {
        "Lision": "[email protected]"
    },
    "source": {
        "git": "https://github.com/Lision/LSAnimator.git",
        "tag": "v1.2.0"
    },
    "source_files": "LSAnimator/*.{h,m,c}",
    "frameworks": [
        "UIKit",
        "QuartzCore"
    ],
    "platforms": {
        "ios": "7.0"
    },
    "requires_arc": true
}

Pin It on Pinterest

Share This