一个基于CAAnimation的动画工具

BinAnimation

Link to GitHub

为什么使用

必要性：作为 iOS 开发工程师，在日常的开发工作中，虽然不需要像游戏开发一样设计各式各样酷炫的动画，但是简单的动画开发还是很有必要的。

功能性：动画一方面可以提高用户的视觉体验，另一方面利用动画的过渡时间在后台异步执行功能性代码，降低由于过长的功能性代码执行时间带来不良体验的效果。

优势性：日常开发动画中，除了使用 UIView 的动画分类外，更多是使用核心动画库 CAAnimation。但是使用过 CAAnimation 的人都知道，创建一个简单的动画都需要书写好几行的代码，如果是较为复杂的复合动画，代码量将会明显增加，这对开发人员来说是一个负担。BinAnimation 借鉴 Masonry 的链式语法的简洁性，对 CAAnimation 进行了二次封装，很大层度上简化了核心动画使用的过程。

如何使用

示例工程

  • 点击 BinAnimation 进入，可下载到本地进行调试。

示例说明

  • BinAnimation 的创建方法编写在 CALayer 和 NSArray 的分类中，可直接通过 CALayer * 和 NSArray<CALayer *> * 的对象调用。
[self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
    founder.toKeyframe.translationY(200).keyTime(1.0).autoreverses(YES);
}];

[self.layerArr bin_addSameAnimation_sync:^(BinAnimationFounder *founder) {
    founder.toKeyframe.scaleX(0.2).scaleY(0.2).keyTime(1.0).autoreverses(YES);
}];
KeyframeAnimation
image
case 0:
[self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
    founder.toKeyframe.translationY(200).keyTime(1.0).autoreverses(YES);
}];
break;
case 1:
[self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
    founder.toKeyframe.scaleX(0.2).scaleY(0.2).keyTime(1.0).autoreverses(YES);
}];
break;
case 2:
[self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
    founder.toKeyframe.rotationZ(M_PI).keyTime(1.0).autoreverses(YES);
}];
break;
case 3:
[self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
    founder.toKeyframe.translationY(200).scaleXYZ(0.2, 0.2, 1.0).rotationZ(M_PI).keyTime(1.0).autoreverses(YES);
}];
break;
SpringAnimation
image
case 0:
[self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
    founder.springAnimation.mass(1).stiffness(50).damping(2).initialVelocity(10).byValue([NSValue valueWithCGSize:CGSizeMake(0, 200)]);
}];
break;
case 1:
[self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
    founder.moreSpringAnimation(@"opacity").mass(1).stiffness(50).damping(2).initialVelocity(10).
    toValue(@0);
}];
break;
TransitionAnimation
image
case 0:
{
    [self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
        [self changeColor];
        founder.transition.type(kCATransitionFade).subtype(kCATransitionFromRight);
    }];
}
break;
case 1:
{
    [self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
        [self changeColor];
        founder.transition.type(kCATransitionMoveIn).subtype(kCATransitionFromRight);
    }];
}
break;
case 2:
{
    [self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
        [self changeColor];
        founder.transition.type(kCATransitionPush).subtype(kCATransitionFromRight);
    }];
}
break;
case 3:
{
    [self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
        [self changeColor];
        founder.transition.type(kCATransitionReveal).subtype(kCATransitionFromRight);
    }];
}
break;
MultiAnimation 和 AnimationGroup
  • MultiAnimation：在 layer 上添加多组动画，各动画是完全独立；
  • AnimationGroup：在 layer 上添加一个组动画，该组动画可包含多组动画，组动画的属性可能会影响各动画的相关属性。
image
// MultiAnimation
case 0:
[self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
    founder.springAnimation.mass(1).stiffness(50).damping(2).initialVelocity(10).byValue([NSValue valueWithCGSize:CGSizeMake(0, 200)]);
    founder.toKeyframe.scaleX(0.2).scaleY(0.2).keyTime(1.0).autoreverses(YES);
}];
break;
case 1:
[self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
    founder.toKeyframe.translationY(200).keyTime(1.0).autoreverses(YES);
    [founder keyframeAnimation];
    founder.toKeyframe.opacity(0.0).keyTime(1.0).autoreverses(YES);
}];
break;

// AnimationGroup
case 0:
[self.animationlabel.layer removeAllAnimations];
[self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
    float settlingDuration = 0;
    founder.springAnimation.mass(1).stiffness(50).damping(2).initialVelocity(10).byValue([NSValue valueWithCGSize:CGSizeMake(0, 200)]).getSettlingDuration(&settlingDuration);
    founder.toKeyframe.scaleX(0.2).scaleY(0.2).keyTime(settlingDuration);
    founder.animationGroup.duration(settlingDuration + 1.0).repeatCount(100);
}];
break;
case 1:
[self.animationlabel.layer removeAllAnimations];
[self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
    founder.toKeyframe.translationY(200).keyTime(1.0);
    [founder keyframeAnimation];
    founder.toKeyframe.opacity(0.0).keyTime(1.0).autoreverses(YES);
    founder.animationGroup.duration(2.0).repeatCount(100);
}];
break;
Animation_PauseAndResume
  • 支持动画的暂停与继续
image
case 0:
[self.animationlabel.layer bin_pause];
break;
case 1:
[self.animationlabel.layer bin_resume];
break;
Animation_CompletionBlock
  • 支持动画完成后回调
image
case 0:
[self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
    founder.toKeyframe.translationY(200).keyTime(1.0).autoreverses(YES);
}];
break;
case 1:
{
    [self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
        founder.toKeyframe.translationY(200).keyTime(1.0).autoreverses(YES);
    } completion:^(BinAnimationInfo *animationInfo) {
        [self changeColor];
    }];
}
break;
Animation_SyncOrAsync
  • 支持动画的同步与异步添加
  • 对大量 layer 进行同步添加的话，会明显感觉到延迟，如果是在主线程中调用则会造成卡顿。如果是异步添加的话，会有明显改善。
image
case 0:
{
    // 在同步添加的情况下，会返回所有 layer 上所添加的动画数组。
    NSArray *animationArr = [self.layerArr bin_addSameAnimation_sync:^(BinAnimationFounder *founder) {
        founder.toKeyframe.scaleX(0.2).scaleY(0.2).keyTime(1.0).autoreverses(YES);
    }];
    // animationArr: [{@"layer" : layer, @"animationArray" : animationArr}, ...]
    NSLog(@"AnimationArray: %@", animationArr);
}
break;
case 1:
[self.layerArr bin_addSameAnimation_async:^(BinAnimationFounder *founder) {
    founder.toKeyframe.scaleX(0.2).scaleY(0.2).keyTime(1.0).autoreverses(YES);
}];
break;
Animation_OneOrSome
  • 添加同一个动画到多个layer上 或者 添加相同的动画到多个layer上
  • 同一个动画指的是一个动画对象；相同的动画指的是多个对象，但是对象的内容相同。
  • 对大量 layer 同步添加相同的动画时，会明显感觉到延迟，如果是在主线程中调用则会造成卡顿。如果是添加同一个动画的话，会有明显改善。
image
case 0:
[self.layerArr bin_addOneAnimation_sync:^(BinAnimationFounder *founder) {
    founder.toKeyframe.scaleX(0.2).scaleY(0.2).keyTime(1.0).autoreverses(YES);
}];
break;
case 1:
[self.layerArr bin_addSameAnimation_sync:^(BinAnimationFounder *founder) {
    founder.toKeyframe.scaleX(0.2).scaleY(0.2).keyTime(1.0).autoreverses(YES);
}];
break;
KeyframeAnimation_FromOrToOrBy
  • 支持设置帧动画的第一帧以及帧的定点定位和增量定位
image
case 0:
[self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
    founder.fromKeyframe.translationY(100);
    founder.toKeyframe.translationY(200).keyTime(1.0).autoreverses(YES);
    founder.toKeyframe.translationX(200).keyTime(1.0).autoreverses(YES);
}];
break;
case 1:
[self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
    founder.toKeyframe.translationY(200).keyTime(1.0).autoreverses(YES);
    founder.toKeyframe.translationX(200).keyTime(1.0).autoreverses(YES);
}];
break;
case 2:
[self.animationlabel.layer bin_addAnimation_sync:^(BinAnimationFounder *founder) {
    founder.toKeyframe.translationY(200).keyTime(1.0).autoreverses(YES);
    founder.byKeyframe.translationX(200).keyTime(1.0).autoreverses(YES);
}];
break;

如何安装

  • 使用 CocoaPods 安装。

  • 在你的 Podfile 文件中添加：

pod 'BinAnimation'
  • 在需要使用时，引入头文件：
#import "BinAnimation.h"

我就是我

您请说

各位读者有什么想法，记得给我留言哦~

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,928评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,192评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,468评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,186评论 1赞 286
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,295评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,374评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,403评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,186评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,610评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,906评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,075评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,755评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,393评论 3赞 320
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,079评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,313评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,934评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,963评论 2赞 351