实例讲解iOS应用UI开发之基础动画的创建
这篇文章主要介绍了iOS应用UI开发之基础动画的创建,以关键帧动画作为重要知识点进行讲解,需要的朋友可以参考下
一、简单介绍
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)
二、平移动画
代码示例：
复制代码代码如下:
////YYViewController.m//07-核心动画（基础动画）////Createdbyappleon14-6-21.//Copyright(c)2014年itcase.Allrightsreserved.//
#import"YYViewController.h"
@interfaceYYViewController()@property(nonatomic,strong)CALayermyLayer;@end
复制代码代码如下:
@implementationYYViewController
-(void)viewDidLoad{[superviewDidLoad];//创建layerCALayermyLayer=[CALayerlayer];//设置layer的属性myLayer.bounds=CGRectMake(0,0,50,80);myLayer.backgroundColor=[UIColoryellowColor].CGColor;myLayer.position=CGPointMake(50,50);myLayer.anchorPoint=CGPointMake(0,0);myLayer.cornerRadius=20;//添加layer[self.view.layeraddSublayer:myLayer];self.myLayer=myLayer;}
//设置动画（基础动画）-(void)touchesBegan:(NSSet)toucheswithEvent:(UIEvent)event{//1.创建核心动画//CABasicAnimationanima=[CABasicAnimationanimationWithKeyPath:<#(NSString)#>]CABasicAnimationanima=[CABasicAnimationanimation];//1.1告诉系统要执行什么样的动画anima.keyPath=@"position";//设置通过动画，将layer从哪儿移动到哪儿anima.fromValue=[NSValuevalueWithCGPoint:CGPointMake(0,0)];anima.toValue=[NSValuevalueWithCGPoint:CGPointMake(200,300)];//1.2设置动画执行完毕之后不删除动画anima.removedOnCompletion=NO;//1.3设置保存动画的最新状态anima.fillMode=kCAFillModeForwards;
//2.添加核心动画到layer[self.myLayeraddAnimation:animaforKey:nil];
}@end
代码说明：
第42行设置的keyPath是@"position"，说明要修改的是CALayer的position属性，也就是会执行平移动画
第44，45行，这里的属性接收的时id类型的参数，因此并不能直接使用CGPoint这种结构体类型，而是要先包装成NSValue对象后再使用。
默认情况下，动画执行完毕后，动画会自动从CALayer上移除，CALayer又会回到原来的状态。为了保持动画执行后的状态，可以加入第48，50行代码
byValue和toValue的区别，前者是在当前的位置上增加多少，后者是到指定的位置。
执行效果：
设置代理：设置动画的代理，可以监听动画的执行过程，这里设置控制器为代理。
代码示例：
复制代码代码如下:
#import"YYViewController.h"
@interfaceYYViewController()@property(nonatomic,strong)CALayermyLayer;@end
@implementationYYViewController
-(void)viewDidLoad{[superviewDidLoad];//创建layerCALayermyLayer=[CALayerlayer];//设置layer的属性myLayer.bounds=CGRectMake(0,0,50,80);myLayer.backgroundColor=[UIColoryellowColor].CGColor;myLayer.position=CGPointMake(50,50);myLayer.anchorPoint=CGPointMake(0,0);myLayer.cornerRadius=20;//添加layer[self.view.layeraddSublayer:myLayer];self.myLayer=myLayer;}
//设置动画（基础动画）-(void)touchesBegan:(NSSet)toucheswithEvent:(UIEvent)event{//1.创建核心动画//CABasicAnimationanima=[CABasicAnimationanimationWithKeyPath:<#(NSString)#>]CABasicAnimationanima=[CABasicAnimationanimation];//1.1告诉系统要执行什么样的动画anima.keyPath=@"position";//设置通过动画，将layer从哪儿移动到哪儿anima.fromValue=[NSValuevalueWithCGPoint:CGPointMake(0,0)];anima.toValue=[NSValuevalueWithCGPoint:CGPointMake(200,300)];//1.2设置动画执行完毕之后不删除动画anima.removedOnCompletion=NO;//1.3设置保存动画的最新状态anima.fillMode=kCAFillModeForwards;anima.delegate=self;//打印NSStringstr=NSStringFromCGPoint(self.myLayer.position);NSLog(@"执行前：%@",str);//2.添加核心动画到layer[self.myLayeraddAnimation:animaforKey:nil];
}
-(void)animationDidStart:(CAAnimation)anim{NSLog(@"开始执行动画");}
-(void)animationDidStop:(CAAnimation)animfinished:(BOOL)flag{//动画执行完毕，打印执行完毕后的position值NSStringstr=NSStringFromCGPoint(self.myLayer.www.hunanwang.netposition);NSLog(@"执行后：%@",str);}
@end
打印position的属性值，验证图层的属性值还是动画执行前的初始值{50，50}，并没有真正被改变为{200，300}。
三、缩放动画
实现缩放动画的代码示例：
复制代码代码如下:
////YYViewController.m//08-核心动画平移////Createdbyappleon14-6-21.//Copyright(c)2014年itcase.Allrightsreserved.//
#import"YYViewController.h"
@interfaceYYViewController(www.visa158.com)@property(nonatomic,strong)CALayermyLayer;@end
复制代码代码如下:
@implementationYYViewController
-(void)viewDidLoad{[superviewDidLoad];//创建layerCALayermyLayer=[CALayerlayer];//设置layer的属性myLayer.bounds=CGRectMake(0,0,150,60);myLayer.backgroundColor=[UIColoryellowColor].CGColor;myLayer.position=CGPointMake(50,50);myLayer.anchorPoint=CGPointMake(0,0);myLayer.cornerRadius=40;//添加layer[self.view.layeraddSublayer:myLayer];self.myLayer=myLayer;}
-(void)touchesBegan:(NSSet)toucheswithEvent:(UIEvent)event{//1.创建动画CABasicAnimationanima=[CABasicAnimationanimationWithKeyPath:@"bounds"];//1.1设置动画执行时间anima.duration=2.0;//1.2设置动画执行完毕后不删除动画anima.removedOnCompletion=NO;//1.3设置保存动画的最新状态anima.fillMode=kCAFillModeForwards;//1.4修改属性，执行动画anima.toValue=[NSValuevalueWithCGRect:CGRectMake(0,0,200,200)];//2.添加动画到layer[self.myLayeraddAnimation:animaforKey:nil];}
@end
实现效果：
四、旋转动画
代码示例：
复制代码代码如下:
////YYViewController.m//09-核心动画旋转////Createdbyappleon14-6-21.//Copyright(c)2014年itcase.Allrightsreserved.//
#import"YYViewController.h"
@interfaceYYViewController()@property(nonatomic,strong)CALayermyLayer;@end
复制代码代码如下:
@implementationYYViewController-(void)viewDidLoad{[superviewDidLoad];//创建layerCALayermyLayer=[CALayerlayer];//设置layer的属性myLayer.bounds=CGRectMake(0,0,150,60);myLayer.backgroundColor=[UIColoryellowColor].CGColor;myLayer.position=CGPointMake(50,50);myLayer.anchorPoint=CGPointMake(0,0);myLayer.cornerRadius=40;//添加layer[self.view.layeraddSublayer:myLayer];self.myLayer=myLayer;}
-(void)touchesBegan:(NSSet)toucheswithEvent:(UIEvent)event{//1.创建动画CABasicAnimationanima=[CABasicAnimationanimationWithKeyPath:@"transform"];//1.1设置动画执行时间anima.duration=2.0;//1.2修改属性，执行动画anima.toValue=[NSValuevalueWithCATransform3D:CATransform3DMakeRotation(M_PI_2+M_PI_4,1,1,0)];//1.3设置动画执行完毕后不删除动画anima.removedOnCompletion=NO;//1.4设置保存动画的最新状态anima.fillMode=kCAFillModeForwards;//2.添加动画到layer[self.myLayeraddAnimation:animaforKey:nil];}@end
实现效果：
补充：
可以通过transform（KVC）的方式来进行设置。
代码示例（平移）：
复制代码代码如下:
#import"YYViewController.h"
@interfaceYYViewController()@property(nonatomic,strong)CALayermyLayer;@end
复制代码代码如下:
@implementationYYViewController-(void)viewDidLoad{[superviewDidLoad];//创建layerCALayermyLayer=[CALayerlayer];//设置layer的属性myLayer.bounds=CGRectMake(0,0,150,60);myLayer.backgroundColor=[UIColoryellowColor].CGColor;myLayer.position=CGPointMake(50,50);myLayer.anchorPoint=CGPointMake(0,0);myLayer.cornerRadius=40;//添加layer[self.view.layeraddSublayer:myLayer];self.myLayer=myLayer;}
-(void)touchesBegan:(NSSet)toucheswithEvent:(UIEvent)event{//1.创建动画CABasicAnimationanima=[CABasicAnimationanimation];anima.keyPath=@"transform";//1.1设置动画执行时间anima.duration=2.0;//1.2修改属性，执行动画anima.toValue=[NSValuevalueWithCATransform3D:CATransform3DMakeTranslation(0,100,1)];//1.3设置动画执行完毕后不删除动画anima.removedOnCompletion=NO;//1.4设置保存动画的最新状态anima.fillMode=kCAFillModeForwards;//2.添加动画到layer[self.myLayeraddAnimation:animaforKey:nil];}
实现效果：
绘制的图形在y的方向上移动100个单位。
五、关键帧动画
1.简单介绍
是CApropertyAnimation的子类，跟CABasicAnimation的区别是：CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue)，而CAKeyframeAnimation会使用一个NSArray保存这些数值
属性解析：
values：就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内，依次显示values数组中的每一个关键帧
path：可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path，那么values将被忽略
keyTimes：可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的
说明：CABasicAnimation可看做是最多只有2个关键帧的CAKeyframeAnimation
2.代码示例
第一种方式：
代码：
复制代码代码如下:
////YYViewController.m//10-核心动画（关键帧动画1）////Createdbyappleon14-6-21.//Copyright(c)2014年itcase.Allrightsreserved.//
#import"YYViewController.h"
@interfaceYYViewController()@property(weak,nonatomic)IBOutletUIViewcustomView;
@end
复制代码代码如下:
@implementationYYViewController
-(void)touchesBegan:(NSSet)toucheswithEvent:(UIEvent)event{//1.创建核心动画CAKeyframeAnimationkeyAnima=[CAKeyframeAnimationanimation];//平移keyAnima.keyPath=@"position";//1.1告诉系统要执行什么动画NSValuevalue1=[NSValuevalueWithCGPoint:CGPointMake(100,100)];NSValuevalue2=[NSValuevalueWithCGPoint:CGPointMake(200,100)];NSValuevalue3=[NSValuevalueWithCGPoint:CGPointMake(200,200)];NSValuevalue4=[NSValuevalueWithCGPoint:CGPointMake(100,200)];NSValuevalue5=[NSValuevalueWithCGPoint:CGPointMake(100,100)];keyAnima.values=@[value1,value2,value3,value4,value5];//1.2设置动画执行完毕后，不删除动画keyAnima.removedOnCompletion=NO;//1.3设置保存动画的最新状态keyAnima.fillMode=kCAFillModeForwards;//1.4设置动画执行的时间keyAnima.duration=4.0;//1.5设置动画的节奏keyAnima.timingFunction=[CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut];//设置代理，开始—结束keyAnima.delegate=self;//2.添加核心动画[self.customView.layeraddAnimation:keyAnimaforKey:nil];}
-(void)animationDidStart:(CAAnimation)anim{NSLog(@"开始动画");}
-(void)animationDidStop:(CAAnimation)animfinished:(BOOL)flag{NSLog(@"结束动画");}@end
说明：这个项目在storyboard中拖入了一个view，并和控制器中的custom进行了关联。
效果和打印结果：
补充：设置动画的节奏
第二种方式（使用path）让layer在指定的路径上移动（画圆）：
代码：
复制代码代码如下:
#import"YYViewController.h"
@interfaceYYViewController()@property(weak,nonatomic)IBOutletUIViewcustomView;
@end
复制代码代码如下:
@implementationYYViewController
-(void)touchesBegan:(NSSet)toucheswithEvent:(UIEvent)event{//1.创建核心动画CAKeyframeAnimationkeyAnima=[CAKeyframeAnimationanimation];//平移keyAnima.keyPath=@"position";//1.1告诉系统要执行什么动画//创建一条路径CGMutablePathRefpath=CGPathCreateMutable();//设置一个圆的路径CGPathAddEllipseInRect(path,NULL,CGRectMake(150,100,100,100));keyAnima.path=path;//有create就一定要有releaseCGPathRelease(path);//1.2设置动画执行完毕后，不删除动画keyAnima.removedOnCompletion=NO;//1.3设置保存动画的最新状态keyAnima.fillMode=kCAFillModeForwards;//1.4设置动画执行的时间keyAnima.duration=5.0;//1.5设置动画的节奏keyAnima.timingFunction=[CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut];//设置代理，开始—结束keyAnima.delegate=self;//2.添加核心动画[self.customView.layeraddAnimation:keyAnimaforKey:nil];}
-(void)animationDidStart:(CAAnimation)anim{NSLog(@"开始动画");}
-(void)animationDidStop:(CAAnimation)animfinished:(BOOL)flag{NSLog(@"结束动画");}@end
说明：可以通过path属性，让layer在指定的轨迹上运动。
停止动画：
复制代码代码如下:
#import"YYViewController.h"
@interfaceYYViewController()@property(weak,nonatomic)IBOutletUIViewcustomView;-(IBAction)stopOnClick:(UIButton)sender;
@end
复制代码代码如下:
@implementationYYViewController
-(void)touchesBegan:(NSSet)toucheswithEvent:(UIEvent)event{//1.创建核心动画CAKeyframeAnimationkeyAnima=[CAKeyframeAnimationanimation];//平移keyAnima.keyPath=@"position";//1.1告诉系统要执行什么动画//创建一条路径CGMutablePathRefpath=CGPathCreateMutable();//设置一个圆的路径CGPathAddEllipseInRect(path,NULL,CGRectMake(150,100,100,100));keyAnima.path=path;//有create就一定要有releaseCGPathRelease(path);//1.2设置动画执行完毕后，不删除动画keyAnima.removedOnCompletion=NO;//1.3设置保存动画的最新状态keyAnima.fillMode=kCAFillModeForwards;//1.4设置动画执行的时间keyAnima.duration=5.0;//1.5设置动画的节奏keyAnima.timingFunction=[CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut];//2.添加核心动画[self.customView.layeraddAnimation:keyAnimaforKey:@"wendingding"];}
-(IBAction)stopOnClick:(UIButton)sender{//停止self.customView.layer上名称标示为wendingding的动画[self.customView.layerremoveAnimationForKey:@"wendingding"];}@end
点击停止动画，程序内部会调用[self.customView.layerremoveAnimationForKey:@"wendingding"];停止self.customView.layer上名称标示为wendingding的动画。
3.图标抖动
代码示例：
复制代码代码如下:
////YYViewController.m//12-图标抖动////Createdbyappleon14-6-21.//Copyright(c)2014年itcase.Allrightsreserved.//
#import"YYViewController.h"#defineangle2Radian(angle)((angle)/180.0M_PI)
@interfaceYYViewController()@property(weak,nonatomic)IBOutletUIImageViewiconView;
@end
复制代码代码如下:
@implementationYYViewController
-(void)touchesBegan:(NSSet)toucheswithEvent:(UIEvent)event{//1.创建核心动画CAKeyframeAnimationkeyAnima=[CAKeyframeAnimationanimation];keyAnima.keyPath=@"transform.rotation";//设置动画时间keyAnima.duration=0.1;//设置图标抖动弧度//把度数转换为弧度度数/180M_PIkeyAnima.values=@[@(-angle2Radian(4)),@(angle2Radian(4)),@(-angle2Radian(4))];//设置动画的重复次数(设置为最大值)keyAnima.repeatCount=MAXFLOAT;keyAnima.fillMode=kCAFillModeForwards;keyAnima.removedOnCompletion=NO;//2.添加动画[self.iconView.layeraddAnimation:keyAnimaforKey:nil];}
@end
说明：图标向左向右偏转一个弧度（4），产生抖动的视觉效果。
程序界面：
|
|
