ios 各种动画机制
关于 Core Animation
Core Animation是一组非常强大的动画处理API,使用它能做出很多优雅的动画效果。能用的动画类有4个子类:CABasicAnimation、CAKeyframeAnimation、CATransition、CAAnimationGroup
开发步骤:
初始化一个动画对象(CAAnimation)并设置一些动画相关属性.
添加动画对象到层(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动画
简单的呼吸和摇摆动画
简单的代码
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动画
-(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里了
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
看图,就是那个下方的小长方形,简单实现
动画组,顾名思义就是动画的组合,具体动画可以参考上文,不同的脑洞会出现不同的化学反应。
简单示例:
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 各种动画机制相关推荐
- 如何实现iOS图书动画:第1部分(上)
如何实现iOS图书动画:第1部分 原文链接 : How to Create an iOS Book Open Animation: Part 1 原文作者 : Vincent Ngo 译文出自 : 开 ...
- [iOS]过渡动画之高级模仿 airbnb
注意:我为过渡动画写了两篇文章: 第一篇:[iOS]过渡动画之简单模仿系统,主要分析系统简单的动画实现原理,以及讲解坐标系.绝对坐标系.相对坐标系,坐标系转换等知识,为第二篇储备理论基础.最后实现 M ...
- Android 动画机制与使用技巧
动画效果一直是人机交互中非常重要的部分,与死板.突兀的显示效果不同,动画效果的加入,让交互变得更加友好,特别是在提示.引导类的场景中,合理地使用动画能让用户获得更加愉悦的使用体验 一.Android ...
- iOS核心动画学习整理
最近利用业余时间终于把iOS核心动画高级技巧(https://zsisme.gitbooks.io/ios-/content/chapter1/the-layer-tree.html)看完,对应其中一 ...
- 产品经理们是如何越过 iOS 沙盒机制的?
点击上方篮字,轻松关注! 小咖导读 产品经理们是如何越过 iOS 沙盒机制的?今天PMcaff小咖就带大家来看看东方产品汪的暴力美学. iOS 沙盒机制 先来解释一下什么是 iOS 沙盒机制. iOS ...
- ios keychain 不被清理_苹果手机卸载软件会不会有残留?带你认识iOS沙盒机制!...
iPhone能干净的卸载软件吗,会不会有残留_苹果手机怎么样完全清除软件残留个人信息? 这种问题,最容易发生在你换手机的时候,旧手机给家人使用或者是当二手机出给别人,就要使用到这种方法! 首先得了解下 ...
- iOS 核心动画 Core Animation浅谈
代码地址如下: http://www.demodashi.com/demo/11603.html 前记 关于实现一个iOS动画,如果简单的,我们可以直接调用UIView的代码块来实现,虽然使用UIVi ...
- ios uiview动画_iOS UIView动画
ios uiview动画 In this tutorial, we'll be animating our UI Views in various ways in the iOS Applicatio ...
- iOS核心动画详解swift版----基础动画
2019独角兽企业重金招聘Python工程师标准>>> iOS核心动画详解swift版---基础动画 创建工程,添加2个ViewController,通过rootViewContro ...
最新文章
- 《大道至简》读后感(伪代码)
- Service Cloud: Quick Look
- 最大正数pascal程序
- 深入探究ASP.NET Core Startup的初始化
- git rebase用法_Git:Clone别人的代码之后push到自己码云上失败的解决办法
- DHCP租用信息导出方案
- python ix loc iloc_关于python:.ix()是否总是比.loc()和.iloc()更好,因为它速度更快并且支持整数和标签访问?...
- VMware虚拟机中的CentOS7安装Nginx后本机无法访问的解决办法
- MyCat分片规则之自定义范围分片
- 2022最新手机设备标识码(IMEI、MEID、UDID、UUID、ANDROID_ID、GAID、IDFA等)教程
- java离职证明模板word_离职证明模板Word免费版下载
- NodeJS运行时抛出: Error: listen EADDRINUSE :::3000
- Android 设置gif动态桌面
- 以太网帧机构 ,mtu ,分包原理 tcp的三次握手,四次挥手
- 高仿微信拍照,视频录制-----JCameraView
- 用python画动态皮卡丘_如何利用python绘制可爱皮卡丘?
- FFmpeg执行命令时屏蔽输出
- 微信小程序提示:https://www.xxxxx.com 不在以下 request 合法域名列表中,请参考文档....
- 川土微电子携CA-IS3062W 突围高端隔离器模拟芯片市场
- (附源码)Springboot校园商铺系统 毕业设计 052145
热门文章
- android 安装多个app下载,多点下载2021安卓最新版_手机app官方版免费安装下载_豌豆荚...
- 国产化硬件适配能力再升级,百度天工AIoT智能边缘助力提升边缘AI算力可控能力
- 10.JAVA中的集合(数据结构)
- LDV7 语音识别模块使用方法
- 股票精灵接口的脚本策划
- 给定平面上任意三个点的坐标(x​1​​,y​1​​)、(x​2​​,y​2​​)、(x​3​​,y​3​​),检验它们能否构成三角形
- CMOS图像传感器——深入ISO
- 两组数据的偏差率_GWT测试报告 篇七十五:隐患难忽视,RIVAL 3 WIRELESS精准度LOD测试...
- 【李峋的爱心代码4】
- 系统迁移后无法正常开机相关心得