备案控制台
探索云世界
开发者社区 云计算 文章 正文

iOS中Animation 动画 UI_22

2016-05-17 1579
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

版权声明：本文为博主原创文章，未经博主允许不得转载。

1.iOS中我们能看到的控件都是UIView的子类,比如UIButton UILabel UITextField UIImageView等等

2.UIView能够在屏幕的显示是因为在创建它的时候内部自动添加一个CALayer图层,通过这个图层在屏幕上显示的时候会调用一个drawRect: 的方法,完成绘图,才能在屏幕上显示

3.CALayer 本身就具有显示功能,但是它不能响应用户的交互事件,如果只是单纯的显示一个图形,此时你可以使用CALayer创建或者是使用UIView创建,但是如果这个图形想响应用户交互事件,必须使用UIView或者子类

动画知识框图如下:


[objc]  view plain  copy
  1. #import "ViewController.h"  
  2. #import "UITextField+Shake.h"  
  3. @interface ViewController ()  
  4. @property (retain, nonatomic) IBOutlet UIImageView *balloon;  
  5. @property (retain, nonatomic) IBOutlet UITextField *TF;  
  6. @property (retain, nonatomic) IBOutlet UIButton *bounces;  
  7. @property (retain, nonatomic) IBOutlet UIView *animationView;  
  8. @property (retain, nonatomic) IBOutlet UIImageView *cloud;  
  9. @end<span style="font-family: 'STHeiti Light';">@implementation ViewController</span>  
[objc]  view plain  copy
  1. - (void)viewDidLoad {  
  2.     [super viewDidLoad];  
  3.     //取到当前视图控制器自带view的图层  
  4.     CALayer *layer = self.view.layer;  
  5. //    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];  
  6. //    button.layer //button的图层  
  7.     //layer 的color必须是CGColor  
  8.     self.animationView.layer.backgroundColor = [UIColor greenColor].CGColor;  
  9. }  

//给TF创建一个类目:

[objc]  view plain  copy
  1. UITextField+Shake.h  
  2. #import <UIKit/UIKit.h>  
  3. @interface UITextField (Shake)  
  4. - (void)shake;  
  5. @end  
  6.   
  7. UITextField+Shake.m  
  8. #import "UITextField+Shake.h"  
  9.   
  10. @implementation UITextField (Shake)  
  11. //震动的方法  
  12. - (void)shake{  
  13.     CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];  
  14.     keyFrame.values = @[@(self.center.x + 10),@(self.center.x),@(self.center.x - 10)];  
  15.     keyFrame.repeatCount = 10;  
  16.     keyFrame.duration = 0.03;  
  17.     [self.layer addAnimation:keyFrame forKey:nil];  
  18.     
  19. }  
  20. @end  


开始动画按钮点击事件

[objc]  view plain  copy
  1. - (IBAction)handleAnimation:(UIButton *)sender {  
  2.     //UIView的属性动画  
  3.     [self handlePropertyAnimation];  
  4.    
  5.     //UIView的属性动画 Block形式  
  6.     [self handlePrepertyAnimationBlock];  
  7.     
  8.      //UIView的过渡动画  
  9.     [self handleTrabsitionAnimation];  
  10.       
  11.     //CALayer动画  
  12.     [self handleCALayer];  
  13.       
  14.     //CALayer 的基础动画  
  15.     [self handleBasicAnimation];  
  16.     //CALayer的关键帧动画  
  17.     [self handleKeyFrameAnimation];  
  18.     //UITextField 调用输入震动框方法  
  19.     [self.TF shake];  
  20.       
  21.     //CALayer的过渡动画  
  22.     [self handleLayerCATransactionAnimation];  
  23.     //CAAinmationGroup 分组动画  
  24.     [self handleAnimatonGroup];  
  25.       
  26. }  

//UIView的属性动画 可动画的属性 : frame center bounds alpha backgroundColor transfrom

//修改属性做动画,动画结束后属性修改的结果是真实的作用到动画的视图上,不能恢复到之前的样子

[objc]  view plain  copy
  1. - (void)handlePropertyAnimation{  
  2.     //iOS4.0之前必须把要修改的可动画属性写在begin 和 commit 之间  
  3.     //开始动画  
  4.     [UIView beginAnimations:nil context:nil];  
  5.     //指定代理 动画的代理不需要遵循协议,因为此代理就没有制定协议  
  6.     [UIView setAnimationDelegate:self];  
  7.     //设置动画的持续时间  
  8.     [UIView setAnimationDuration:3.0];  
  9.     //设置动画的重复次数 给重复效果旋转效果立即消失  
  10.     [UIView setAnimationRepeatCount:3.0];  
  11.     //设置动画的反转效果  
  12.     [UIView setAnimationRepeatAutoreverses:YES];  
  13.     //设置动画的变化速度  
  14.     [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
  15.   
  16.     //如果要实现这个方法必须设置代理,此方法在动画结束后触发  
  17.     [UIView setAnimationDidStopSelector:@selector(makeAnimationBack)];  
  18.       
  19.     //修改属性做动画  
  20.     //1.center 修改中心点  
  21.     CGPoint center = self.animationView.center;  
  22.     center.y += 10;  
  23.     self.animationView.center =center;  
  24.     //2.修改透明度 alpha  
  25.     self.animationView.alpha = 0.0;  
  26.     //3.变形 tranform  
  27.     //<#CGAffineTransform t#> 之前形变量  
  28.     //旋转的角度180/4  
  29.     self.animationView.transform = CGAffineTransformRotate(self.animationView.transform, M_PI_4);  
  30.       
  31.     self.animationView.transform = CGAffineTransformScale(self.animationView.transform, 0.5, 0.5);  
  32.       
  33.     //提交动画  
  34.     [UIView commitAnimations];  
  35. }  

//恢复到视图之前的状态

[objc]  view plain  copy
  1. - (void)makeAnimationBack{  
  2.     //  
  3.       
  4.     self.animationView.center = self.view.center;  
  5.       
  6.     self.animationView.alpha = 1.0;  
  7.     //恢复到tranform最初状态,最初状态就在CGAffineTransformIdentity记录  
  8.     self.animationView.transform = CGAffineTransformIdentity;  
  9.       
  10. }  
  11.   
  12. //UIView的属性动画 Block形式  
  13. - (void)handlePrepertyAnimationBlock{  
  14.     //iOS4.0之后使用block的形式做动画  
  15.       
  16.       
  17.     __block typeof(self)weakSelf = self;  
  18.     //1.block 的第一种形式  
  19.     //01.动画的持续时间  
  20. //    [UIView animateWithDuration:2 animations:^{  
  21. //        //1.修改中心点  
  22. //        CGPoint center = weakSelf.animationView.center;  
  23. //        center.y += 50;  
  24. //        weakSelf.animationView.center = center;  
  25. //        //2.透明度  
  26. //        weakSelf.animationView.alpha = 0.0;  
  27. //        //3.变形  
  28. //        weakSelf.animationView.transform = CGAffineTransformRotate(weakSelf.animationView.transform, M_PI_4);  
  29. //}];  
  30.       
  31.     //2.block的第二种形式  
  32.     [UIView animateWithDuration:2 animations:^{  
  33.         //1.获得中心点  
  34.         CGPoint center = weakSelf.animationView.center;  
  35.         //改变中心点  
  36.         center.y += 50;  
  37.         weakSelf.animationView.center =center;  
  38.         //2.透明度  
  39.         weakSelf.animationView.alpha = 0.0;  
  40.         //3.形变修改transform  
  41.         weakSelf.animationView.transform = CGAffineTransformScale(weakSelf.animationView.transform, 0.5, 0.2);  
  42.           
  43.           
  44.     } completion:^(BOOL finished) {  
  45.         //返回动画之前的状态  
  46.         [weakSelf makeAnimationBack];  
  47.     }];  
  48.       
  49.     //3.block的第三种形式  
  50.     //01:持续时间  
  51.     //02:动画执行的延迟时间  
  52.     //03:设置动画的特效  
  53.     //04:修好的动画属性  
  54.     //05:动画执行结束后的block块  
  55.     [UIView animateWithDuration:3 delay:1 options:UIViewAnimationOptionAllowAnimatedContent animations:^{  
  56.         //1.获得中心点  
  57.         CGPoint center = weakSelf.animationView.center;  
  58.         //改变中心点  
  59.         center.y += 50;  
  60.         weakSelf.animationView.center =center;  
  61.         //2.透明度  
  62.         weakSelf.animationView.alpha = 0.0;  
  63.         //3.形变修改transform  
  64.         weakSelf.animationView.transform = CGAffineTransformScale(weakSelf.animationView.transform, 0.5, 0.2);  
  65.           
  66.     } completion:^(BOOL finished) {  
  67.          //返回动画之前的状态  
  68.         [weakSelf makeAnimationBack];  
  69.     }];  
  70.       
  71.     //block的第四种形式  
  72.     //参数1:动画持续时间  
  73.     //参数2:动画的延迟时间  
  74.     //参数3:设置弹簧的强度 范围(0.0~1.0)  
  75.     //参数4:设置弹簧的速度  
  76.     //参数5:动画效果  
  77.     //参数6:改变动画的属性写在这里  
  78.     //参数7:结束动画的时候调用的block  
  79.     [UIView animateWithDuration:2 delay:1 usingSpringWithDamping:0.5 initialSpringVelocity:500 options:UIViewAnimationOptionCurveEaseInOut animations:^{  
  80.         CGPoint center = weakSelf.bounces.center;  
  81.         center.y += 10;  
  82.         weakSelf.bounces.center = center;  
  83.         //transform  
  84.         weakSelf.bounces.transform = CGAffineTransformScale(weakSelf.bounces.transform, 1.2, 1.2);  
  85.     } completion:^(BOOL finished) {  
  86.         CGPoint center = weakSelf.bounces.center;  
  87.         center.y -= 10;  
  88.         weakSelf.bounces.center = center;  
  89.         weakSelf.bounces.transform = CGAffineTransformIdentity;  
  90.           
  91.     }];  
  92. }  

//UIView的过渡动画

[objc]  view plain  copy
  1. - (void)handleTrabsitionAnimation{  
  2.       
  3.       
  4.     __block typeof(self)weakSelf = self;  
  5.     //01:对哪个视图添加过渡动画  
  6.     //02:动画时常  
  7.     //03:动画效果  
  8.     [UIView transitionWithView:self.animationView duration:2 options:UIViewAnimationOptionAllowAnimatedContent animations:^{  
  9.           
  10.         weakSelf.animationView.transform = CGAffineTransformRotate(weakSelf.animationView.transform, M_PI_4);  
  11.           
  12.     } completion:nil];  
  13.       
  14. }  

//CALayer动画,修改layer层的属性做动画并没有真实的作用到这个视图上,动画知识一种假象

[objc]  view plain  copy
  1. - (void)handleCALayer{  
  2.     //CALyer 动画就是对layer做动画  
  3.     //边框的宽  
  4.     self.animationView.layer.borderWidth = 10.0;  
  5.     //边框颜色  
  6.     self.animationView.layer.borderColor = [UIColor redColor].CGColor;  
  7.     //切圆角  
  8. //    self.animationView.layer.cornerRadius = 100;  
  9.     //取出layer多余的部分  
  10. //    self.animationView.layer.masksToBounds = YES;  
  11.     //减掉layer多出的部分  
  12. //    self.animationView.clipsToBounds = YES;  
  13.     //背景图片  
  14.     self.animationView.layer.contents = (id)[UIImage imageNamed:@"WDGJ785Q{`CKL4J}1{_4{(Y.jpg"].CGImage;  
  15.       
  16.       
  17.     //视图一创建出来的时候  锚点 基准点  中心点三个点是重合的  
  18.     //锚点 anchorPoint  决定layer层上的哪个点是position 锚点默认是(0.5,0.5),跟视图的中心点重合  
  19.     self.animationView.layer.anchorPoint = CGPointMake(0.5, 0);  
  20.     self.animationView.transform = CGAffineTransformRotate(self.animationView.transform, M_PI_4);  
  21.       
  22.     //基准点 Position 决定当前视图的layer,在父视图的位置,它以父视图的坐标系为准  
  23.     self.animationView.layer.position = CGPointMake(160, 184);  
  24. }  

//CALayer 的动画基类:CAAnimation

//CABasicAnimation  基础动画

[objc]  view plain  copy
  1. - (void)handleBasicAnimation{  
  2.     //CA动画是根据KVC的原理,就修改layer的属性,以达到做动画的效果  
  3.     CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"position.x"];  
  4.       
  5.     basic.fromValue = @(-80);  
  6.     basic.toValue = @(400);  
  7.     //设置动画持续的时间  
  8.     basic.duration = 5.0;  
  9.     //设置动画重复的次数  
  10.     basic.repeatCount = 1000;  
  11.     [self.cloud.layer addAnimation:basic forKey:nil];  
  12. }  

//CAKeyFrameAnimation 关键帧动画

[objc]  view plain  copy
  1. - (void)handleKeyFrameAnimation{  
  2.     CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position"];  
  3.     CGPoint point1 = self.cloud.center;  
  4.     CGPoint point2 = CGPointMake(160, 100);  
  5.     CGPoint point3 = CGPointMake(270, self.cloud.center.y);  
  6.       
  7.     //把一组要播放的动画需求的数值,按顺序放到数组中,此时动画执行的效果,就会按照数组中数据的顺序发生变化;  
  8.     //转化point结构体类型 转化成对象类型  
  9.     NSValue *value1 = [NSValue valueWithCGPoint:point1];  
  10.     NSValue *value2 = [NSValue valueWithCGPoint:point2];  
  11.     NSValue *value3 = [NSValue valueWithCGPoint:point3];  
  12.     keyFrame.repeatCount = 1000;  
  13.     keyFrame.duration = 15.0;  
  14.     keyFrame.values = @[value1,value2,value3,value1];  
  15.     [self.cloud.layer addAnimation:keyFrame forKey:nil];  
  16. }  

//CATransition CALayer 的过度动画

[objc]  view plain  copy
  1. - (void)handleLayerCATransactionAnimation{  
  2.    
  3.     /* 
  4.       
  5.      各种动画效果  其中除了'fade', `moveIn', `push' , `reveal' ,其他属于似有的API(我是这么认为的,可以点进去看下注释). 
  6.       
  7.      *  ↑↑↑上面四个可以分别使用'kCATransitionFade', 'kCATransitionMoveIn', 'kCATransitionPush', 'kCATransitionReveal'来调用. 
  8.       
  9.      *  @"cube"                     立方体翻滚效果 
  10.       
  11.      *  @"moveIn"                   新视图移到旧视图上面 
  12.       
  13.      *  @"reveal"                   显露效果(将旧视图移开,显示下面的新视图) 
  14.       
  15.      *  @"fade"                     交叉淡化过渡(不支持过渡方向)             (默认为此效果) 
  16.       
  17.      *  @"pageCurl"                 向上翻一页 
  18.       
  19.      *  @"pageUnCurl"               向下翻一页 
  20.       
  21.      *  @"suckEffect"               收缩效果，类似系统最小化窗口时的神奇效果(不支持过渡方向) 
  22.       
  23.      *  @"rippleEffect"             滴水效果,(不支持过渡方向) 
  24.       
  25.      *  @"oglFlip"                  上下左右翻转效果 
  26.       
  27.      *  @"rotate"                   旋转效果 
  28.       
  29.      *  @"push" 
  30.       
  31.      *  @"cameraIrisHollowOpen"     相机镜头打开效果(不支持过渡方向) 
  32.       
  33.      *  @"cameraIrisHollowClose"    相机镜头关上效果(不支持过渡方向) 
  34.       
  35.      */  
  36.       
  37.     //创建过渡动画对象  
  38.     CATransition *transition = [CATransition animation];  
  39.     //配置动画过渡的样式  
  40.     transition.type = @"cameraIrisHollowClose";  
  41.     //将过渡动画添加到layer上  
  42.     [self.view.layer  addAnimation:transition forKey:nil];  
  43.       
  44. }  

//CAAinmationGroup 分组动画

[objc]  view plain  copy
  1. - (void)handleAnimatonGroup{  
  2.     //1.创建第一个关键帧动画,给热气球一个运动轨迹  
  3.     CAKeyframeAnimation *keyframePath = [CAKeyframeAnimation animationWithKeyPath:@"position"];  
  4.     //贝塞尔曲线  
  5.     //1.指定贝塞尔曲线的半径  
  6.     CGFloat  radius = [UIScreen mainScreen].bounds.size.height / 2.0;  
  7.     //01:圆心  
  8.     //02:半径  
  9.     //03:开始的角度  
  10.     //04:结束的角度  
  11.     //05:旋转方向 (YES表示顺时针 NO表示逆时针)  
  12.     UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, radius) radius:radius startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES];  
  13.     //将贝塞尔曲线作为运动轨迹  
  14.     keyframePath.path = path.CGPath;  
  15.       
  16.     //2.创建第二组关键帧动画,让热气球在运动的时候  由小--->大--->小   ;  
  17.     CAKeyframeAnimation *keyFrameScale = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];  
  18.     //通过一组数据修改热气球的大小  
  19.     keyFrameScale.values = @[@1.0,@1.2,@1.4,@1.6,@1.8,@1.6,@1.4,@1.2,@1.0];  
  20.     //创建动画分组对象  
  21.     CAAnimationGroup *group = [CAAnimationGroup animation];  
  22.     //将两个动画效果添加到分组动画中  
  23.     group.animations = @[keyframePath,keyFrameScale];  
  24.       
  25.     group.duration = 8;  
  26.     group.repeatCount = 1000;  
  27.       
  28.       
  29.     [self.balloon.layer addAnimation:group forKey:nil];  
  30.       
  31. }  

最终效果:


关键词：
iOS Animation
iOS动画
iOS UI
iOS animation动画
ghost丶桃子
目录
相关文章
卡尔特斯
|
7月前
|
iOS开发
iOS 动画绘制圆形
iOS 动画绘制圆形
卡尔特斯
41 1
众所周知
|
3月前
|
iOS开发
iOS设备功能和框架： 如何使用 Core Animation 创建动画效果？
iOS设备功能和框架： 如何使用 Core Animation 创建动画效果？
众所周知
101 0
卡尔特斯
|
8月前
|
Java API iOS开发
iOS Spring Animation
iOS Spring Animation
卡尔特斯
76 0
CodingFire
|
iOS开发
iOS开发-导航栏标题动画
iOS开发-导航栏标题动画
CodingFire
157 0
iOS开发-导航栏标题动画
CodingFire
|
iOS开发
iOS - 个人中心果冻弹性下拉动画
iOS - 个人中心果冻弹性下拉动画
CodingFire
211 0
iOS - 个人中心果冻弹性下拉动画
CodingFire
|
iOS开发
iOS开发 - 柱状图动态展现动画
iOS开发 - 柱状图动态展现动画
CodingFire
126 0
iOS开发 - 柱状图动态展现动画
CodingFire
|
JSON iOS开发 数据格式
iOS开发 - 关于启动页动画的杂谈
iOS开发 - 关于启动页动画的杂谈
CodingFire
211 0
iOS开发 - 关于启动页动画的杂谈
CodingFire
|
iOS开发
iOS开发－ 分屏动画
iOS开发－ 分屏动画
CodingFire
102 0
iOS开发－ 分屏动画
清雨小竹
|
iOS开发
IOS动画
IOS动画
清雨小竹
59 0
新手站长网
|
机器学习/深度学习 安全 测试技术
阿里云EMAS-专家测试服务iOS和Android上百种机型性能、兼容及UI等测试
阿里云EMAS测试专家有着集团内部多个日活过亿规模APP经验，提供EMAS专家测试，客户只需提交测试需求，从用例设计、脚本录制、海量机型测试、整理测试结果、48小时输出专家测试报告均由阿里云EMAS测试专家一站式服务完成。覆盖功能测试、深度兼容测试、性能测试、UI适配测试以及隐私合规检测等，帮助用户以更低成本获得高质量的全面测试能力，可用于APP正式发版前验收，规避手机APP上线前或发版过程中各类隐患。
新手站长网
404 0
阿里云EMAS-专家测试服务iOS和Android上百种机型性能、兼容及UI等测试
为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告
产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理
解决方案技术解决方案
文档与社区文档开发者社区天池大赛培训与认证
权益中心免费试用高校计划企业扶持计划推荐返现计划
支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心
关注阿里云
关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务
阿里云APP阿里云微信
联系我们：4008013260
法律声明Cookies政策廉正举报安全举报联系我们加入我们
阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么
© 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015
浙公网安备 33010602009975号浙B2-20080101-4