iOS动画系列之四:基础动画之平移篇

第一篇:iOS动画系列之一:通过实战学习CALayer和透视的原理。做一个带时分秒指针的时钟动画(上)
第二篇:iOS动画系列之二:通过实战学习CALayer和透视的原理。做一个带时分秒指针的时钟动画。包含了OC和Swift两种源代码(下)
第三篇:iOS动画系列之三:Core Animation。介绍了Core Animation的常用属性和方法。
第四篇:CABasic Animation。iOS动画系列之四:基础动画之平移篇
第五篇:CABasic Animation。iOS动画系列之五:基础动画之缩放篇&旋转篇
第六篇:iOS动画系列之六:利用CABasic Animation完成带动画特效的登录界面
第七篇:iOS动画系列之七:实现类似Twitter的启动动画
第八篇:iOS动画系列之八:使用CAShapeLayer绘画动态流量图
第九篇:iOS动画系列之九:实现点赞的动画及播放起伏指示器
第十篇:实战系列:绘制过山车场景

就像咱们之前说的,所有的动画都是在CALayer上面的。所以在做动画之前我们就要先建立一个CALayer,然后把动画作用在自己创建的这个CALayer上。如果不知道CALyer是啥,可以看看前面的分享哈。传输门:第一篇:iOS动画系列之一:通过实战学习CALayer和透视的原理。做一个带时分秒指针的时钟动画(上)

最终实现的效果:

基础动画之平移效果

1. 基础版的平移

这里重点是为了演示fromValue/toValue 、 设置layer的Position位置、实现代理方法里面设置position的区别。

最终实现的效果:

BasicAnimation.gif

步骤如下:
1, 创建CALayer。
2, 设置CALayer的位置、大小、背景颜色。
3, 将自定义的CALayer添加到主视图的view上面。
4, 实例化一个CABasicAnimation对象。
5, 设置动画属性为平移。
6, 设置动画的起始位置,从哪里到哪里。
7,设置动画的持续时间、填充模式、重复次数、设置代理。
8, 将动画添加到需要作用的CALayer上面。
9, 实现<CAAnimationDelegate>的代理方法:动画开始时调用的方法、动画结束时调用的方法。

//遵守动画的代理协议
@interface STBasicPositionViewController ()<CAAnimationDelegate>
@property(weak,nonatomic)CALayer * redLayer;

@end

@implementation STBasicPositionViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //创建CALayer
    CALayer *redLayer = [CALayer layer];
    
    //设置位置和大小
    redLayer.position = CGPointMake(200, 200);
    redLayer.bounds = CGRectMake(0, 0, 100, 100);
    
    
    //设置背景颜色
    redLayer.backgroundColor = [UIColor redColor].CGColor;
    
    //把layer添加到UIView的layer上
    [self.view.layer addSublayer:redLayer];
    
    self.redLayer = redLayer;
    
    
    /*------------开始设置动画------------------------*/
    
    //创建动画对象
    CABasicAnimation *basicAni = [CABasicAnimation animation];
    
    //设置动画属性
    basicAni.keyPath = @"position";
    
    //设置动画的起始位置。也就是动画从哪里到哪里
    basicAni.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
    
    //动画结束后,layer所在的位置
    basicAni.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 300)];
    
    
    //动画持续时间
    basicAni.duration = 2;
    
    //动画填充模式
    basicAni.fillMode = kCAFillModeForwards;
    
    //动画完成不删除
    basicAni.removedOnCompletion = NO;
    
    //xcode8.0之后需要遵守代理协议
    basicAni.delegate = self;
    
    //把动画添加到要作用的Layer上面
    [self.redLayer addAnimation:basicAni forKey:nil];
 
}


#pragma 实现代理协议的方法

//动画开始的时候调用
- (void)animationDidStart:(CAAnimation *)anim{
    
    self.redLayer.position = CGPointMake(300, 100);
    
}

//动画结束的时候调用
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    
    self.redLayer.position = CGPointMake(300, 400);
}


@end

2. 创建不同速度控制的动画

上面代码里面我们看到了有一些莫名其妙出来的字符串,例如在设置动画属性的时候出来的:

    //设置动画属性
    basicAni.keyPath = @"position";

    //动画填充模式
    basicAni.fillMode = kCAFillModeForwards;

这些属性,在前一篇很枯燥的分享里面有提到。有需要的童鞋可以点进去当作字典翻一下。也没有啥记忆的必要性,需要的时候查一下,需要的时候查一下就好了。传输门:第三篇:iOS动画系列之三:Core Animation。介绍了Core Animation的常用属性和方法。

速度控制一共有四种模式:

kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉
kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开
kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地
kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。这个是默认的动画行为。

2.1 抽取创建Layer及动画的公共方法

为了能够偷点懒,所以抽取了公共的方法。可以很方便的创建Layer以及动画。哈哈,本宅胖要是不懒就不会这么胖了。

#pragma 抽取创建动画及Layer的公共方法

//创建CALayer
- (CALayer *)createLayerWithPosition:(CGPoint)position backgroundColor:(UIColor *)backgroundColor{
    //创建CALayer
    CALayer *layer = [CALayer layer];
    
    //设置位置和大小
    layer.position = position;
    layer.bounds = CGRectMake(0, 0, 100, 100);
    
    
    //设置背景颜色
    layer.backgroundColor = backgroundColor.CGColor;
    
    //把layer添加到UIView的layer上
    [self.view.layer addSublayer:layer];
    
    return layer;
}

//创建动画
- (CABasicAnimation *)createBasicAnimationWithFromValue:(CGPoint)fromValue toValue:(CGPoint)toValue timingFunction:(NSString *)timingFunction{
    //创建动画对象
    CABasicAnimation *basicAni = [CABasicAnimation animation];
    
    //设置动画属性
    basicAni.keyPath = @"position";
    
    //设置动画的起始位置。也就是动画从哪里到哪里
    basicAni.fromValue = [NSValue valueWithCGPoint:fromValue];
    
    //动画结束后,layer所在的位置
    basicAni.toValue = [NSValue valueWithCGPoint:toValue];
    
    //动画持续时间
    basicAni.duration = 2;
    
    //动画重复次数
    basicAni.repeatCount = CGFLOAT_MAX;
    
    //xcode8.0之后需要遵守代理协议
    basicAni.delegate = self;
    
    basicAni.timingFunction = [CAMediaTimingFunction functionWithName:timingFunction];

    return basicAni;
}

2.2 创建Layer和动画

这里我们只创建一个为例。

    //    创建红色线性运动的Layer
    self.redLayer = [self createLayerWithPosition:CGPointMake(0, 150) backgroundColor:[UIColor redColor]];
    [self.redLayer addAnimation:[self createBasicAnimationWithFromValue:CGPointMake(0, 150) toValue:CGPointMake(300, 150) timingFunction:kCAMediaTimingFunctionLinear] forKey:@"linear"];

有朋友可能发现了,为啥添加动画的时候后面的forKey怎么不是之前的nil了呢?
这里添加一个key值,实际上是为这个动画对象起了一个名字,通过key值,可以很方便的取到这个动画对象

2.3 移除动画

动画播放完成之后,我们通过key值将这个动画移除掉。
这个方法当然是在动画结束的时候调用最合适,不然动画还没放完就移除了岂不是开天窗啦~
CAAnimationDelegate这个里面的代理方法终于起到作用了。

//动画结束的时候调用
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    [self.redLayer removeAnimationForKey:@"linear"];
    
    [self.blueLayer removeAnimationForKey:@"easeIn"];

    [self.grayLayer removeAnimationForKey:@"easeOut"];

    [self.greenLayer removeAnimationForKey:@"easeInAndEaseOut"];

}

3. Swift版本的部分差异

Swift版本几乎和OC的一模一样。略有不同的是,swift在加载layer的时候,我们使用了懒加载的方式。也就是在使用的时候才去创建这个layer。

源代码也放在了码云上面。

    //MARK: - 懒加载

    private lazy var redLayer: CALayer = {
        let layer = self.createLayer(position: CGPoint(x: 0, y: 150), backgroundColor: UIColor.red)
        
        return layer
    }()

今天就到这里啦。看样子宏图伟业打算一篇写完的CABasic Animation是没戏啦。下一篇文章写缩放这些的吧。任性的技术宅。哈哈~

喜欢的话就点个赞呗,或者赏俺点口粮。么么哒~爱你们~

OC和Swift的下载地址如下:
https://git.oschina.net/atypical/CABasic-Animation.git

iOS实践:CABasic-Animation(OC和Swift两版)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,551评论 4 58
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,311评论 6 30
  • 那时候我们的日子 单纯而又快乐 我们在一起笑 在一起玩 一起带上家人出门旅游 你让我感受到了 即便是趴在海边的沙滩...
    十六夜蔷薇1阅读 187评论 0 2
  • 隔壁老王,最近看着心情不太好,满脸愁容,本来很乐观的一个人,见面热情打招呼,谁家要是有事,邻里街坊的,二话不...
    梨落2016阅读 324评论 0 0
  • 一中门口,偶尔有个卖打口碟的小贩,可能可以被叫做大叔,但不是我们女生所以为的那种大叔,穿着特土,瘦瘦小小,就是小贩...