就像咱们之前说的,所有的动画都是在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];//创建CALayerCALayer *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{//创建CALayerCALayer *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和动画

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

    //    创建红色线性运动的Layerself.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的下载地址如下:
git.oschina.net/atypical/CA…

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

iOS动画系列之四:基础动画之平移篇相关推荐

  1. android 同根动画_android 动画系列 (1) - tween 动画(view动画)

    这是我这个系列的目录,有兴趣的可以看下: android 动画系列 - 目录 tween 动画早些时候我们也叫补间动画(我也不知道为啥),现在也有叫 view 动画的.tween动画是2.X 时代的产 ...

  2. SVG.js动画系列3-沿路径动画

    一个小圆球沿路径动画的例子.效果图: 第一步创建一个path和circle path = draw.path("M20,50 C20,-50 180,150 180,50 C180-50 2 ...

  3. iOS动画系列之五:基础动画之缩放篇旋转篇Swift+OC

    这一篇主要介绍基础动画之缩放和旋转.这些基本操作分享完之后,我想想可以找个稍微复杂一点点的动画做做啦. 这篇继续基础篇,分享一下缩放和旋转.因为整体思路和平移基本上没有变化,加上源代码里面也有OC版本 ...

  4. iOS动画系列之八:使用CAShapeLayer绘画动态流量图

    这篇文章通过使用CAShapeLayer和UIBezierPath来画出一个动态显示剩余流量的小动画. 最终实现的效果如下: Paste_Image.png 动态效果图: shapeLayerAni. ...

  5. iOS动画系列之九:实现点赞的动画及播放起伏指示器

    iOS动画系列,共十篇.现在写到第九篇啦.感兴趣的可以通过下面的传输门进到其他几篇文章里面. 第一篇:iOS动画系列之一:通过实战学习CALayer和透视的原理.做一个带时分秒指针的时钟动画(上) 第 ...

  6. iOS开发系列--让你的应用“动”起来--超详细的ios核心动画介绍

    概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画.关键帧动画 ...

  7. iOS开发系列--让你的应用“动”起来

    概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画.关键帧动画 ...

  8. android 播放gif动画效果,android 通过帧动画方式播放Gif动画

    注意:经过本人测试,这个方法很耗内存, 图片一多就崩了.慎用 <1>用工具(photoshop或者FireWorks)将GIF动画图片分解成多个GIF静态图片,然后保存在res\drawa ...

  9. BasicAnimation:纯Swift的基础动画库,支持 iOS 属性动画:缩放、旋转、平移、背景颜色、透明度、阴影等和弹性动画

    BasicAnimation https://github.com/ZuopanYao/BasicAnimation iOS 属性动画:缩放.旋转.平移.背景颜色.透明度.阴影等,一句代码的事 支持以 ...

最新文章

  1. UITableView数据更新问题
  2. 母婴品牌与AI的碰撞:第四范式为美素佳儿提供智能推送服务
  3. 计算机专业博士发论文,计算机专业本科、硕士、博士学位论文编写方法浅析
  4. 【AI芯片格局最全分析】国内AI芯片百家争鸣,何以抗衡全球技术寡头
  5. 回答一个微信好友的创业问题
  6. 构建面向对象的应用软件系统框架
  7. 通过递归遍历n位2进制数的所有情况
  8. 更改hadoop集群yarn的webui中的开始时间和结束时间为本地时间
  9. .Net程序测试阿里云OSS开放存储服务
  10. java中scanner类_Java里Scanner 类
  11. 不规则形状 前端_精度提升第一步:形状各异测区的像控点布设方案
  12. ENVI入门系列教程---一、数据预处理---5. 图像自动配准
  13. 偷懒才能编程序——计算机达人成长之路(18)
  14. TypeScript代理模式/委托模式
  15. 极具性价比的音质蓝牙耳机南卡小音舱评测
  16. java-IO流(1)-IO流和File类的介绍
  17. 命名空间“Microsoft.Office”中不存在类型或命名空间名称“Interop”(是缺少程序集引用吗?)...
  18. 网游服务器搭建方案图解(以魔兽世界为例)
  19. 内网穿透方法有哪些?路由器端口映射外网和软件方案步骤
  20. Oracle 11g 学习笔记-14(数据库性能优化)

热门文章

  1. 学好C++开发技术能从事哪些岗位?
  2. C语言基础学习教程之数据类型
  3. 开课吧Java课堂:什么是流?如何运用字节流和字符流?
  4. 方向导数、梯度与梯度下降
  5. 云之讯 亿美 短信的三方接口
  6. 数据科学即将迎来“无代码”时代
  7. Spring的事务管理
  8. eclipse 构建maven web工程
  9. exchange 2010 部署
  10. 【CV】如何使用Tensorflow提供的Object Detection API --2--数据转换为TFRecord格式