关于 Core Animation

Core Animation是一组非常强大的动画处理API,使用它能做出很多优雅的动画效果。能用的动画类有4个子类:CABasicAnimation、CAKeyframeAnimation、CATransition、CAAnimationGroup

开发步骤:

  1. 初始化一个动画对象(CAAnimation)并设置一些动画相关属性.

  2. 添加动画对象到层(CALayer)中,开始执行动画.

CALayer中很多属性都可以通过CAAnimation实现动画效果, 包括opacity, position, transform, bounds, contents等,具体可以在API文档中查找

通过调用CALayer的addAnimation:forKey:增加动画到层(CALayer)中,这样就能触发动画了.通过调用removeAnimationForKey:可以停止层中的动画.

注:Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程.

创建动画时你可能用到的属性

属性 解读
Autoreverses 设定这个属性为 YES 时,在它到达目的地之后,动画的返回到开始的值,代替了直接跳转到开始的值,过渡平滑
Duration 设定开始值到结束值花费的时间。期间会被速度的属性所影响
RemovedOnCompletion 这个属性默认为 YES,在指定的时间段完成后,动画就自动的从层上移除了。
FillMode 这个属性一般和 RemovedOnCompletion 配合使用,保持动画状态。其中kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态.此时将RemovedOnCompletion设为NO
Speed 默认的值为 1.0.如果你改变这个值为 2.0,动画会用 2 倍的速度播放。这样的影响就是使持续时间减半。如果你指定的持续时间为 6 秒,速度为 2.0,动画就会播放 3 秒钟即一半的持续时间。
RepeatCount 默认的是 0,动画只会播放一次。如果指定一个无限大的重复次数,使用 MAXFLOAT 。这个不应该和 repeatDration 属性一块使用
RepeatDuration 这个属性指定了动画应该被重复多久。动画会一直重复,直到设定的时间用完。同上它不应该和 repeatCount 一起使用
FromValue 设置动画的初始值
ToValue 设置动画的到达值
TimingFunction 控制动画运行的节奏. kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉 kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开 kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地 kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。这个是默认的动画行为。
BeginTime 可以用来设置动画延迟执行时间,若想延迟1s,就设置为CACurrentMediaTime()+1,CACurrentMediaTime()为图层的当前时间

巧妙的运用这些可以属性实现很棒的动画效果,比如下面:用CABasicAnimation实现的动画

CABasicAnimation动画

简单的呼吸和摇摆动画

animation.gif

简单的代码

 1.呼吸动画CABasicAnimation *animation =[CABasicAnimation animationWithKeyPath:@"opacity"];animation.fromValue = [NSNumber numberWithFloat:1.0f];animation.toValue = [NSNumber numberWithFloat:0.0f];animation.autoreverses = YES;    //回退动画(动画可逆,即循环)animation.duration = 1.0f;animation.repeatCount = MAXFLOAT;animation.removedOnCompletion = NO;animation.fillMode = kCAFillModeForwards;//removedOnCompletion,fillMode配合使用保持动画完成效果animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];[self.alphaTagButton.layer addAnimation:animation forKey:@"aAlpha"];  2.摇摆动画//设置旋转原点self.sharkTagButton.layer.anchorPoint = CGPointMake(0.5, 0);CABasicAnimation* rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];//角度转弧度(这里用1,-1简单处理一下)rotationAnimation.toValue = [NSNumber numberWithFloat:1];rotationAnimation.fromValue = [NSNumber numberWithFloat:-1];rotationAnimation.duration = 1.0f;rotationAnimation.repeatCount = MAXFLOAT;rotationAnimation.removedOnCompletion = NO;rotationAnimation.autoreverses = YES;rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];rotationAnimation.fillMode = kCAFillModeForwards;[self.sharkTagButton.layer addAnimation:rotationAnimation forKey:@"revItUpAnimation"];

陀螺仪&加速仪的动画

ps:好吧 这个属于乱入,和上面的摇摆动画差不多的效果,只是这个是手动的 哈哈

3、陀螺仪&加速仪的动画self.motionManager = [[CMMotionManager alloc] init];self.motionManager.deviceMotionUpdateInterval = 1.0f/100.0f; //1秒100次self.sharkTagButton.layer.anchorPoint = CGPointMake(0.5, 0);[self.motionManager startDeviceMotionUpdatesToQueue:[NSOperationQueue currentQueue] withHandler:^(CMDeviceMotion *motion, NSError *error) {if(fabs(motion.attitude.roll)<1.0f){[UIView animateWithDuration:0.6 animations:^{self.sharkTagButton.layer.transform = CATransform3DMakeRotation(-(motion.attitude.roll), 0, 0, 1);}];}else if (fabs(motion.attitude.roll)<1.5f){[UIView animateWithDuration:0.6 animations:^{int s;if (motion.attitude.roll>0){s=-1;}else{s = 1;}self.sharkTagButton.layer.transform = CATransform3DMakeRotation(s*M_PI_2, 0, 0, 1);}];}if ((motion.attitude.pitch)<0){[UIView animateWithDuration:0.6 animations:^{self.sharkTagButton.layer.transform = CATransform3DMakeRotation(M_PI, 0, 0, 1);}];}}];

Demo地址:
https://github.com/yongliangP/CABasicAnimationDemo



CATransition之简单的转场动画

CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果。

属性 解读
type 动画过渡类型
subtype 动画过渡方向
  • 常用动画类型:
type的值 解读 对应常量
fade 淡入淡出 kCATransitionFade
push 推挤 kCATransitionPush
reveal 揭开 kCATransitionReveal
moveIn 覆盖 kCATransitionMoveIn
cube 立方体 私有API
suckEffect 吮吸 私有API
oglFlip 翻转 私有API
rippleEffect 波纹 私有API
pageCurl 反翻页 私有API
cameraIrisHollowOpen 开镜头 私有API
cameraIrisHollowClose 关镜头 私有API

注:私有API只能通过字符串使用哈


  • 过渡方向参数:
subtype的值 解读
kCATransitionFromRight 从右转场
kCATransitionFromLeft 从左转场
kCATransitionFromBottom 从下转场
kCATransitionFromTop 从上转场

简单的CATransition动画

CATransitionDemo2.gif

-(void)animationWithType:(NSString*)type
{//- 创建一个转场动画:CATransition *transition = [CATransition animation];transition.repeatCount = 5;//    - 确定动画类型:transition.type = type;//    - 确定子类型(方向等)transition.subtype = kCATransitionFromLeft;//    - 确定动画时间transition.duration = 1;//    - 添加动画[self.imageView.layer addAnimation:transition forKey:nil];}

使用时只用传你的想要的动画类型就好,私有API只能通过字符串使用哈。

[self animationWithType:self.dataArray[indexPath.row]];

DEMO地址:https://github.com/yongliangP/CATransitionDemo


---20160908更新


CAKeyframeAnimation

先看图,就是那个在跑的小圆球,为了方便,把动画集成在了一个Demo里了

ScreenShotDemo2.gif

  • 1 .简单介绍

    CAKeyframeAnimation是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值,是一种更灵活的动画方式。

  • 2 .属性介绍

属性 解读
values NSArray对象,里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧
path 可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path,那么values将被忽略
keyTimes 可以为对应的关键帧指定对应的时间点,其取值范围为[0,1],keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的
  • 3 .实现

    • 3.1 values方式实现
-(void)setUpCAKeyframeAnimationUseValues
{CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];animation.keyPath = @"position";NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(50, 50)];NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(kWindowWidth - 50, 50)];NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(kWindowWidth - 50, kWindowHeight-50)];NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(50, kWindowHeight-50)];NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(50, 50)];animation.values = @[value1,value2,value3,value4,value5];animation.repeatCount = MAXFLOAT;animation.removedOnCompletion = NO;animation.fillMode = kCAFillModeForwards;animation.duration = 6.0f;animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];[self.keyButton.layer addAnimation:animation forKey:@"values"];}
  • 3.2 path方式实现
-(void)setUpCAKeyframeAnimationUsePath
{CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];animation.keyPath = @"position";CGMutablePathRef path = CGPathCreateMutable();//矩形线路CGPathAddRect(path, NULL, CGRectMake(50,50, kWindowWidth - 100,kWindowHeight - 100));animation.path=path;CGPathRelease(path);animation.repeatCount = MAXFLOAT;animation.removedOnCompletion = NO;animation.fillMode = kCAFillModeForwards;animation.duration = 10.0f;animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];[self.keyButton.layer addAnimation:animation forKey:@"path"];}
  • 3.3 keyTimes演示
-(void)setUpCAKeyframeAnimationUsekeyTimes
{CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
//    animation.keyPath = @"transform.translation.x";animation.keyPath = @"position.x";animation.values = @[@0, @20, @-20, @20, @0];animation.keyTimes = @[ @0, @(1 / 6.0), @(3 / 6.0), @(5 / 6.0), @1 ];animation.duration = 0.5;animation.additive = YES;[self.sharkTagButton.layer addAnimation:animation forKey:@"keyTimes"];}

---20160921更新


CAAnimationGroup

看图,就是那个下方的小长方形,简单实现

ScreenShotGroupDemo.gif

动画组,顾名思义就是动画的组合,具体动画可以参考上文,不同的脑洞会出现不同的化学反应。

简单示例:

    CABasicAnimation * animationScale = [CABasicAnimation animation];animationScale.keyPath = @"transform.scale";animationScale.toValue = @(0.1);CABasicAnimation *animationRota = [CABasicAnimation animation];animationRota.keyPath = @"transform.rotation";animationRota.toValue = @(M_PI_2);CAAnimationGroup * group = [[CAAnimationGroup alloc] init];group.duration = 3.0;group.fillMode = kCAFillModeForwards;group.removedOnCompletion = NO;group.repeatCount = MAXFLOAT;group.animations = @[animationScale,animationRota];[self.groupButton.layer addAnimation:group forKey:nil];

Demo传送门

附:关于keyPath你可能用到的属性

属性 解读
transform.rotation.x 围绕x轴翻转。y,z同理 参数:角度
transform.rotation 默认围绕z轴
transform.scale.x x方向缩放。y,z同理
transform.scale 所有方向缩放
transform.translation.x x轴方向移动,参数:x轴上的坐标。y,z同理
transform.translation 移动到的点
zPosition 平面的位置
opacity 透明度
backgroundColor 背景颜色 参数:颜色 (id)[[UIColor redColor] CGColor]
cornerRadius layer圆角
borderWidth 边框宽度
bounds 大小 参数:CGRect
contents 内容 参数:CGImage
contentsRect 可视内容 参数:CGRect 值是0~1之间的小数
position 位置,效果和transform.rotation差不多
shadowColor 阴影颜色
shadowOffset 阴影偏移
shadowOpacity 阴影透明度
shadowRadius 阴影角度

照例放Demo
Demo地址:
https://github.com/yongliangP/CABasicAnimationDemo
如果你觉得对你有帮助请点喜欢哦,也可以关注我,每周至少一篇技术。
或者关注 我的专题 每周至少5篇更新,多谢支持哈。
(ps:核心动画编程pdf中文版想要的可以私信我)

作者:iceMaple
链接:http://www.jianshu.com/p/a098f6e3617f
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

ios 各种动画机制相关推荐

  1. 如何实现iOS图书动画:第1部分(上)

    如何实现iOS图书动画:第1部分 原文链接 : How to Create an iOS Book Open Animation: Part 1 原文作者 : Vincent Ngo 译文出自 : 开 ...

  2. [iOS]过渡动画之高级模仿 airbnb

    注意:我为过渡动画写了两篇文章: 第一篇:[iOS]过渡动画之简单模仿系统,主要分析系统简单的动画实现原理,以及讲解坐标系.绝对坐标系.相对坐标系,坐标系转换等知识,为第二篇储备理论基础.最后实现 M ...

  3. Android 动画机制与使用技巧

    动画效果一直是人机交互中非常重要的部分,与死板.突兀的显示效果不同,动画效果的加入,让交互变得更加友好,特别是在提示.引导类的场景中,合理地使用动画能让用户获得更加愉悦的使用体验 一.Android ...

  4. iOS核心动画学习整理

    最近利用业余时间终于把iOS核心动画高级技巧(https://zsisme.gitbooks.io/ios-/content/chapter1/the-layer-tree.html)看完,对应其中一 ...

  5. 产品经理们是如何越过 iOS 沙盒机制的?

    点击上方篮字,轻松关注! 小咖导读 产品经理们是如何越过 iOS 沙盒机制的?今天PMcaff小咖就带大家来看看东方产品汪的暴力美学. iOS 沙盒机制 先来解释一下什么是 iOS 沙盒机制. iOS ...

  6. ios keychain 不被清理_苹果手机卸载软件会不会有残留?带你认识iOS沙盒机制!...

    iPhone能干净的卸载软件吗,会不会有残留_苹果手机怎么样完全清除软件残留个人信息? 这种问题,最容易发生在你换手机的时候,旧手机给家人使用或者是当二手机出给别人,就要使用到这种方法! 首先得了解下 ...

  7. iOS 核心动画 Core Animation浅谈

    代码地址如下: http://www.demodashi.com/demo/11603.html 前记 关于实现一个iOS动画,如果简单的,我们可以直接调用UIView的代码块来实现,虽然使用UIVi ...

  8. ios uiview动画_iOS UIView动画

    ios uiview动画 In this tutorial, we'll be animating our UI Views in various ways in the iOS Applicatio ...

  9. iOS核心动画详解swift版----基础动画

    2019独角兽企业重金招聘Python工程师标准>>> iOS核心动画详解swift版---基础动画 创建工程,添加2个ViewController,通过rootViewContro ...

最新文章

  1. 《大道至简》读后感(伪代码)
  2. Service Cloud: Quick Look
  3. 最大正数pascal程序
  4. 深入探究ASP.NET Core Startup的初始化
  5. git rebase用法_Git:Clone别人的代码之后push到自己码云上失败的解决办法
  6. DHCP租用信息导出方案
  7. python ix loc iloc_关于python:.ix()是否总是比.loc()和.iloc()更好,因为它速度更快并且支持整数和标签访问?...
  8. VMware虚拟机中的CentOS7安装Nginx后本机无法访问的解决办法
  9. MyCat分片规则之自定义范围分片
  10. 2022最新手机设备标识码(IMEI、MEID、UDID、UUID、ANDROID_ID、GAID、IDFA等)教程
  11. java离职证明模板word_离职证明模板Word免费版下载
  12. NodeJS运行时抛出: Error: listen EADDRINUSE :::3000
  13. Android 设置gif动态桌面
  14. 以太网帧机构 ,mtu ,分包原理 tcp的三次握手,四次挥手
  15. 高仿微信拍照,视频录制-----JCameraView
  16. 用python画动态皮卡丘_如何利用python绘制可爱皮卡丘?
  17. FFmpeg执行命令时屏蔽输出
  18. 微信小程序提示:https://www.xxxxx.com 不在以下 request 合法域名列表中,请参考文档....
  19. 川土微电子携CA-IS3062W 突围高端隔离器模拟芯片市场
  20. (附源码)Springboot校园商铺系统 毕业设计 052145

热门文章

  1. android 安装多个app下载,多点下载2021安卓最新版_手机app官方版免费安装下载_豌豆荚...
  2. 国产化硬件适配能力再升级,百度天工AIoT智能边缘助力提升边缘AI算力可控能力
  3. 10.JAVA中的集合(数据结构)
  4. LDV7 语音识别模块使用方法
  5. 股票精灵接口的脚本策划
  6. 给定平面上任意三个点的坐标(x​1​​,y​1​​)、(x​2​​,y​2​​)、(x​3​​,y​3​​),检验它们能否构成三角形
  7. CMOS图像传感器——深入ISO
  8. 两组数据的偏差率_GWT测试报告 篇七十五:隐患难忽视,RIVAL 3 WIRELESS精准度LOD测试...
  9. 【李峋的爱心代码4】
  10. 系统迁移后无法正常开机相关心得