iOS开发——动画编程OC篇&(二)核心动画

核心动画

一、简单介绍

CAPropertyAnimation的子类

属性解析:

fromValue:keyPath相应属性的初始值

toValue:keyPath相应属性的结束值

随着动画的进行,在长度为duration的持续时间内,keyPath相应属性的值从fromValue渐渐地变为toValue

如果fillMode=kCAFillModeForwards和removedOnComletion=NO,那么在动画执行完毕后,图层会保持显示动画执行后的状态。但在实质上,图层的属性值还是动画执行前的初始值,并没有真正被改变。

比如,CALayer的position初始值为 (0,0),CABasicAnimation的fromValue为(10,10),toValue为(100,100),虽然动画执行完毕后图层保持 在(100,100)这个位置,实质上图层的position还是为(0,0)

二、平移动画

代码示例:

 1 //
 2 //  YYViewController.m
 3 //  07-核心动画(基础动画)
 4 //
 5 //  Created by apple on 14-6-21.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8
 9 #import "YYViewController.h"
10
11 @interface YYViewController ()
12 @property(nonatomic,strong)CALayer *myLayer;
13 @end
14
15 @implementation YYViewController
16
17 - (void)viewDidLoad
18 {
19     [super viewDidLoad];
20
21     //创建layer
22     CALayer *myLayer=[CALayer layer];
23     //设置layer的属性
24     myLayer.bounds=CGRectMake(0, 0, 50, 80);
25     myLayer.backgroundColor=[UIColor yellowColor].CGColor;
26     myLayer.position=CGPointMake(50, 50);
27     myLayer.anchorPoint=CGPointMake(0, 0);
28     myLayer.cornerRadius=20;
29     //添加layer
30     [self.view.layer addSublayer:myLayer];
31     self.myLayer=myLayer;
32 }
33
34 //设置动画(基础动画)
35 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
36 {
37     //1.创建核心动画
38     //    CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:<#(NSString *)#>]
39     CABasicAnimation *anima=[CABasicAnimation animation];
40
41     //1.1告诉系统要执行什么样的动画
42     anima.keyPath=@"position";
43     //设置通过动画,将layer从哪儿移动到哪儿
44     anima.fromValue=[NSValue valueWithCGPoint:CGPointMake(0, 0)];
45     anima.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 300)];
46
47     //1.2设置动画执行完毕之后不删除动画
48     anima.removedOnCompletion=NO;
49     //1.3设置保存动画的最新状态
50     anima.fillMode=kCAFillModeForwards;
51
52     //2.添加核心动画到layer
53     [self.myLayer addAnimation:anima forKey:nil];
54
55 }  @end

代码说明:

第42行设置的keyPath是@"position",说明要修改的是CALayer的position属性,也就是会执行平移动画

第44,45行,这里的属性接收的时id类型的参数,因此并不能直接使用CGPoint这种结构体类型,而是要先包装成NSValue对象后再使用。

默认情况下,动画执行完毕后,动画会自动从CALayer上移除,CALayer又会回到原来的状态。为了保持动画执行后的状态,可以加入第48,50行代码

byValue和toValue的区别,前者是在当前的位置上增加多少,后者是到指定的位置。

执行效果:

  

设置代理:设置动画的代理,可以监听动画的执行过程,这里设置控制器为代理。

代码示例:

 1 #import "YYViewController.h"
 2
 3 @interface YYViewController ()
 4 @property(nonatomic,strong)CALayer *myLayer;
 5 @end
 6
 7 @implementation YYViewController
 8
 9 - (void)viewDidLoad
10 {
11     [super viewDidLoad];
12
13     //创建layer
14     CALayer *myLayer=[CALayer layer];
15     //设置layer的属性
16     myLayer.bounds=CGRectMake(0, 0, 50, 80);
17     myLayer.backgroundColor=[UIColor yellowColor].CGColor;
18     myLayer.position=CGPointMake(50, 50);
19     myLayer.anchorPoint=CGPointMake(0, 0);
20     myLayer.cornerRadius=20;
21     //添加layer
22     [self.view.layer addSublayer:myLayer];
23     self.myLayer=myLayer;
24 }
25
26 //设置动画(基础动画)
27 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
28 {
29     //1.创建核心动画
30     //    CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:<#(NSString *)#>]
31     CABasicAnimation *anima=[CABasicAnimation animation];
32
33     //1.1告诉系统要执行什么样的动画
34     anima.keyPath=@"position";
35     //设置通过动画,将layer从哪儿移动到哪儿
36     anima.fromValue=[NSValue valueWithCGPoint:CGPointMake(0, 0)];
37     anima.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 300)];
38
39     //1.2设置动画执行完毕之后不删除动画
40     anima.removedOnCompletion=NO;
41     //1.3设置保存动画的最新状态
42     anima.fillMode=kCAFillModeForwards;
43     anima.delegate=self;
44     //打印
45     NSString *str=NSStringFromCGPoint(self.myLayer.position);
46     NSLog(@"执行前:%@",str);
47
48     //2.添加核心动画到layer
49     [self.myLayer addAnimation:anima forKey:nil];
50
51 }
52
53 -(void)animationDidStart:(CAAnimation *)anim
54 {
55     NSLog(@"开始执行动画");
56 }
57
58 -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
59 {
60     //动画执行完毕,打印执行完毕后的position值
61     NSString *str=NSStringFromCGPoint(self.myLayer.position);
62     NSLog(@"执行后:%@",str);
63 }
64
65 @end

打印position的属性值,验证图层的属性值还是动画执行前的初始值{50,50},并没有真正被改变为{200,300}。

三、缩放动画

实现缩放动画的代码示例:

 1 //
 2 //  YYViewController.m
 3 //  08-核心动画平移
 4 //
 5 //  Created by apple on 14-6-21.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8
 9 #import "YYViewController.h"
10
11 @interface YYViewController ()
12 @property(nonatomic,strong)CALayer *myLayer;
13 @end
14
15 @implementation YYViewController
16
17 - (void)viewDidLoad
18 {
19     [super viewDidLoad];
20
21     //创建layer
22     CALayer *myLayer=[CALayer layer];
23     //设置layer的属性
24     myLayer.bounds=CGRectMake(0, 0, 150, 60);
25     myLayer.backgroundColor=[UIColor yellowColor].CGColor;
26     myLayer.position=CGPointMake(50, 50);
27     myLayer.anchorPoint=CGPointMake(0, 0);
28     myLayer.cornerRadius=40;
29     //添加layer
30     [self.view.layer addSublayer:myLayer];
31     self.myLayer=myLayer;
32 }
33
34 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
35 {
36     //1.创建动画
37     CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:@"bounds"];
38     //1.1设置动画执行时间
39     anima.duration=2.0;
40     //1.2设置动画执行完毕后不删除动画
41     anima.removedOnCompletion=NO;
42     //1.3设置保存动画的最新状态
43     anima.fillMode=kCAFillModeForwards;
44     //1.4修改属性,执行动画
45     anima.toValue=[NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
46     //2.添加动画到layer
47     [self.myLayer addAnimation:anima forKey:nil];
48 }
49
50 @end

实现效果:

  

四、旋转动画

代码示例:

 1 //
 2 //  YYViewController.m
 3 //  09-核心动画旋转
 4 //
 5 //  Created by apple on 14-6-21.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8
 9 #import "YYViewController.h"
10
11 @interface YYViewController ()
12 @property(nonatomic,strong)CALayer *myLayer;
13 @end
14
15 @implementation YYViewController
16 - (void)viewDidLoad
17 {
18     [super viewDidLoad];
19
20     //创建layer
21     CALayer *myLayer=[CALayer layer];
22     //设置layer的属性
23     myLayer.bounds=CGRectMake(0, 0, 150, 60);
24     myLayer.backgroundColor=[UIColor yellowColor].CGColor;
25     myLayer.position=CGPointMake(50, 50);
26     myLayer.anchorPoint=CGPointMake(0, 0);
27     myLayer.cornerRadius=40;
28     //添加layer
29     [self.view.layer addSublayer:myLayer];
30     self.myLayer=myLayer;
31 }
32
33 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
34 {
35     //1.创建动画
36     CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:@"transform"];
37     //1.1设置动画执行时间
38     anima.duration=2.0;
39     //1.2修改属性,执行动画
40     anima.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2+M_PI_4, 1, 1, 0)];
41     //1.3设置动画执行完毕后不删除动画
42     anima.removedOnCompletion=NO;
43     //1.4设置保存动画的最新状态
44     anima.fillMode=kCAFillModeForwards;
45
46     //2.添加动画到layer
47     [self.myLayer addAnimation:anima forKey:nil];
48 }
49 @end

实现效果:

   

提示:如果要让图形以2D的方式旋转,只需要把CATransform3DMakeRotation在z方向上的值改为1即可。

anima.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2+M_PI_4, 1, 1, 0)];

四、补充

可以通过transform(KVC)的方式来进行设置。

代码示例(平移):

 1 #import "YYViewController.h"
 2
 3 @interface YYViewController ()
 4 @property(nonatomic,strong)CALayer *myLayer;
 5 @end
 6
 7 @implementation YYViewController
 8 - (void)viewDidLoad
 9 {
10     [super viewDidLoad];
11
12     //创建layer
13     CALayer *myLayer=[CALayer layer];
14     //设置layer的属性
15     myLayer.bounds=CGRectMake(0, 0, 150, 60);
16     myLayer.backgroundColor=[UIColor yellowColor].CGColor;
17     myLayer.position=CGPointMake(50, 50);
18     myLayer.anchorPoint=CGPointMake(0, 0);
19     myLayer.cornerRadius=40;
20     //添加layer
21     [self.view.layer addSublayer:myLayer];
22     self.myLayer=myLayer;
23 }
24
25 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
26 {
27     //1.创建动画
28     CABasicAnimation *anima=[CABasicAnimation animation];
29     anima.keyPath=@"transform";
30     //1.1设置动画执行时间
31     anima.duration=2.0;
32     //1.2修改属性,执行动画
33
34     anima.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(0, 100, 1)];
35     //1.3设置动画执行完毕后不删除动画
36     anima.removedOnCompletion=NO;
37     //1.4设置保存动画的最新状态
38     anima.fillMode=kCAFillModeForwards;
39
40     //2.添加动画到layer
41     [self.myLayer addAnimation:anima forKey:nil];
42 }

实现效果:

绘制的图形在y的方向上移动100个单位。

    

时间: 2024-10-12 03:55:29

iOS开发——动画编程OC篇&(二)核心动画的相关文章

iOS开发——图形编程OC篇&amp;粘性动画以及果冻效果

粘性动画以及果冻效果 在最近做个一个自定义PageControl——KYAnimatedPageControl中,我实现了CALayer的形变动画以及CALayer的弹性动画,效果先过目: 先做个提纲: 第一个分享的主题是“如何让CALayer发生形变”,这个技术在我之前一个项目 ———— KYCuteView 中有涉及,也写了篇简短的实现原理博文.今天再举一个例子. 之前我也做过类似果冻效果的弹性动画,比如这个项目—— KYGooeyMenu. 用到的核心技术是CAKeyframeAnimat

iOS开发——图形编程OC篇&amp;(一)Quartz 2D介绍

Quartz 2D介绍 一.什么是Quartz2D Quartz 2D是?个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作: 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图像) 读取\生成PDF 截图\裁剪图片 自定义UI控件 二.Quartz2D在iOS开发中的价值 为了便于搭建美观的UI界面,iOS提供了UIKit框架,??有各种各样的UI控件 UILabel:显?文字 UIImageView:显示图片 UIButton:同时显示图片和?字

iOS开发——网络编程OC篇&amp;(三)数据请求

一.GET请求和POST请求简单说明 创建GET请求 1 // 1.设置请求路径 2 NSString *urlStr=[NSString stringWithFormat:@"http://192.168.1.53:8080/MJServer/login?username=%@&pwd=%@",self.username.text,self.pwd.text]; 3 NSURL *url=[NSURL URLWithString:urlStr]; 4 5 // 2.创建请求对

iOS开发——网络编程OC篇&amp;(九)数据解析

数据解析 关于iOS开发的中数据解析的方法有两种JSON和XML,这里只做简单的介绍,会使用就可以了. JSON—— 关于JSON的解析经过很多爱好者的分析使用相同自带的还是最好的,不管是从使用的容易度还是性能方面 NSJSONSerialization 1 -(void)start 2 { 3 4 NSString* path = [[NSBundle mainBundle] pathForResource:@"Notes" ofType:@"json"]; 5

iOS开发——图形编程OC篇&amp;(六)Quartz 2D高级使用(二)

Quartz 2D高级使用 一.绘图路径 A.简单说明 在画线的时候,方法的内部默认创建一个path.它把路径都放到了path里面去. 1.创建路径  cgmutablepathref 调用该方法相当于创建了一个路径,这个路径用来保存绘图信息. 2.把绘图信息添加到路径里边. 以前的方法是点的位置添加到ctx(图形上下文信息)中,ctx 默认会在内部创建一个path用来保存绘图信息. 在图形上下文中有一块存储空间专门用来存储绘图信息,其实这块空间就是CGMutablePathRef. 3.把路径

iOS开发——网络编程OC篇&amp;(十二)AFN详解

AFN详解 众所周知,苹果搞的一套框架NSContention发送请求与接收请求的方式十分繁琐.操作起来很不方便.不仅要做区分各种请求设置各种不同的参数,而且还要经常在多线程里操作,同时还要对请求与返回的数据做各种序列化的操作,同时还要考虑请求数据的安全等一堆问题. 一.早前的几个网络框架 1.ASI框架: HTTP终结者.很牛, 但是有BUG, 已经停止更新. 2.MKNetworkKit (印度人写的). 3.AFN一直还在更新. AFNetworking的出现:MAC/iOS设计的一套网络

iOS开发——图形编程OC篇&amp;(二)Quartz 2D自定义控件

Quartz2D(自定义UIImageView控件) 一.实现思路 Quartz2D最大的用途在于自定义View(自定义UI控件),当系统的View不能满足我们使用需求的时候,自定义View. 使用Quartz2D自定义View,可以从模仿系统的ImageView的使用开始. 需求驱动开发:模仿系统的imageview的使用过程 1.创建 2.设置图片 3.设置frame 4.把创建的自定义的view添加到界面上(在自定义的View中,需要一个image属性接收image图片参数->5). 5.

iOS开发——图形编程OC篇&amp;(二)CALayer自定义图层

一.第一种方式 1.简单说明 以前想要在view中画东西,需要自定义view,创建一个类与之关联,让这个类继承自UIView,然后重写它的DrawRect:方法,然后在该方法中画图. 绘制图形的步骤: (1)获取上下文 (2)绘制图形 (3)渲染图形 如果在layer上画东西,与上面的过程类似. 代码示例: 新建一个类,让该类继承自CALayer YYMylayer.m文件 1 // 2 // YYMylayer.m 3 // 05-自定义layer(1) 4 // 5 // Created b

iOS开发——图形编程OC篇&amp;(三)CALayer隐式动画

CALayer隐式动画 在前面几讲中已经提到,每一个UIView内部都默认关联着一个CALayer,我们可用称这个Layer为Root Layer(根层).所有的非Root Layer,也就是手动创建的CALayer对象,都存在着隐式动画. * 当对非Root Layer的部分属性进行相应的修改时,默认会自动产生一些动画效果,这些属性称为Animatable Properties(可动画属性). * 列举几个常见的Animatable Properties: ? bounds:用于设置CALay

iOS开发——网络编程OC篇&amp;(二)XMPP实现用户登录与注销

登录: 步骤: * 在AppDelegate实现登录 1. 初始化XMPPStream 2. 连接到服务器[传一个JID] 3. 连接到服务成功后,再发送密码授权 4. 授权成功后,发送"在线" 消息 一:导入框架,根据上一篇文章的说明去导入相应的库与文件 二:定义一个XMPP的成员变量 1 @interface AppDelegate ()<XMPPStreamDelegate>{ 2 XMPPStream *_xmppStream; 3 } 三:按步骤在代理方法中声明四