UI第二十三讲.动画.
一.UIView层动画
1.UIView层动画的常用属性.
2.简单说明和常用代码
UIKit直接将动画集成到UIView类中，当内部的一些属性发生改变时，UIView将为这些改变提供动画支持执行动画所需要的工作由UIView类自动完成，但仍要在希望执行动画时通知视图，为此需要将改变属性的代码放在[UIView beginAnimations:nil context:nil]和[UIView commitAnimations]之间
常见方法解析:
+ (void)setAnimationDelegate:(id)delegate 设置动画代理对象，当动画开始或者结束时会发消息给代理对象
+ (void)setAnimationWillStartSelector:(SEL)selector 当动画即将开始时，执行delegate对象的selector，并且把beginAnimations:context:中传入的参数传进selector
+ (void)setAnimationDidStopSelector:(SEL)selector 当动画结束时，执行delegate对象的selector，并且把beginAnimations:context:中传入的参数传进selector
+ (void)setAnimationDuration:(NSTimeInterval)duration 动画的持续时间，秒为单位
+ (void)setAnimationDelay:(NSTimeInterval)delay 动画延迟delay秒后再开始
+ (void)setAnimationStartDate:(NSDate *)startDate 动画的开始时间，默认为now
+ (void)setAnimationCurve:(UIViewAnimationCurve)curve 动画的节奏控制
+ (void)setAnimationRepeatCount:(float)repeatCount 动画的重复次数
+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses 如果设置为YES,代表动画每次重复执行的效果会跟上一次相反
+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache 设置视图view的过渡效果, transition指定过渡类型, cache设置YES代表使用视图缓存，性能较好
3.UIView层动画的两种形式:
(1).UIView动画块的使用
1 /*
2
3 第一种.UIView动画块--------------------
4
5 */
6 //第一个参数代表动画的名字
7 //第二个代表上下文相关的
8 [UIView beginAnimations:nil context:nil];
9 //从当前状态开始
10 [UIView setAnimationBeginsFromCurrentState:YES];
11
12 //设置动画开始结束时的特效
13 [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
14 //设置动画执行时间
15 [UIView setAnimationDuration:3.0f];
16 [UIView setAnimationDelegate:self];
17 //动画将要开始 会执行
18 // UIView setAnimationWillStartSelector:@selector(<#selector#>)
19 //动画将要结束 会执行sell方法
20 // UIView setAnimationDidStopSelector:@selector(<#selector#>)
21 //设置动画重复次数
22 [UIView setAnimationRepeatCount:100];
23
24 self.myView.frame = CGRectMake(100, 100, 200, 200);
25 self.myView.backgroundColor = [UIColor greenColor];
26
27 //提交动画 去执行动画
28 [UIView commitAnimations];
(2).UIViewBlock块的使用
UIViewBlock动画的方法 几种Block块方法
1 /*
2
3 UIViewBlock动画的方法 几种Block块方法
4
5 */
6 //第一种 最简单的动画******
7 //第一个参数代表时间
8 //第一个Block代表执行的动画
9 //第二个代表block完成动画
10 [UIView animateWithDuration:1.0f animations:^{
11
12 pSelf.myView.backgroundColor = [UIColor greenColor];
13 } completion:^(BOOL finished) {
14 //这里写代码 不会被当做动画执行
15 pSelf.myView.backgroundColor = [UIColor yellowColor];
16 }];
17
18 //第二种 增加一个延时的block块******
19 //UIViewAnimationOptionRepeat 重复
20 //第一个参数代表执行时间
21 //第二个参数 代表延迟时间
22 //第三个参数 代表动画的一些特效
23 [UIView animateWithDuration:2.0f delay:1.0f options:UIViewAnimationOptionRepeat animations:^{
24
25 pSelf.myView.backgroundColor = [UIColor orangeColor];
26 } completion:^(BOOL finished) {
27
28 pSelf.myView.backgroundColor = [UIColor yellowColor];
29 }];
30
31 //第三种 阻尼系数动画*******
32 //usingSpringWithDamping 代表阻尼系数 0-1 值越大效果越小 值越小效果越明显
33 //initialSpringVelocity 代表初始速度
//options 用于选择响应的动画效果
34 [UIView animateWithDuration:1.0f delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:25 options:UIViewAnimationOptionAutoreverse animations:^{
35
36 pSelf.myView.frame = CGRectMake(200, 200, 100, 100);
37
38 } completion:^(BOOL finished) {
39
40
41 }];
两种UIView动画视图切换的方法(这里定义有一个tableView和一个collectView来进行切换)
1 /*
2
3 block的两种视图切换方法
4
5 */
6
7 //第一个参数 要变没的view
8 //第二个参数 要变出来的view
9 //第四个参数为效果 动作效果
10 [UIView transitionFromView:self.tableView toView:self.collectionView duration:5.0f options:UIViewAnimationOptionTransitionCrossDissolve
11 completion:^(BOOL finished) {
12
13 self.collectionView.backgroundColor = [UIColor greenColor];
14
15 }];
16
17
18 //切换视图的动画 (tableView和collectView之间的切换)
19 [UIView transitionWithView:self.view duration:1.0f options:UIViewAnimationOptionTransitionCurlUp animations:^{
20 if (pSelf.collectionView.superview == nil) {
21 [pSelf.tableView removeFromSuperview];
22 [pSelf.view addSubview:pSelf.collectionView];
23
24 } else{
25
26 [pSelf.collectionView removeFromSuperview];
27 [pSelf.view addSubview:pSelf.tableView];
28
29 }
30
31 } completion:^(BOOL finished) {
32
33
34 }];
二.CALayer层动画
实例代码:
#import "ViewController.h"
@interface ViewController ()
{
CALayer *_layer;
}
@property(nonatomic,strong)UIImageView *myimage;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.myimage =[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1.jpg"]];
// self.myimage = [[UIImageView alloc] init];
self.myimage.frame = CGRectMake(100, 100, 100, 100);
// self.myimage.backgroundColor = [UIColor redColor];
// self.myimage.layer.shadowColor = [UIColor yellowColor];
[self.view addSubview:self.myimage];
//初始化一个CALLayer
_layer = [[CALayer alloc] init];
//设置颜色
// _layer.backgroundColor = [UIColor greenColor].CGColor ;
_layer.frame = CGRectMake(0, 0, 100, 100);
//位置信息(与原图的相对位置)
_layer.position = CGPointMake(0, 0);
//锚点位置 相对原图的偏移位置(跟原图的边长bounds的比例) (API解释在上部)
_layer.anchorPoint = CGPointMake(0, 1);
[self.myimage.layer addSublayer:_layer];
//设置方形视图的圆角
self.myimage.layer.masksToBounds = YES;
self.myimage.layer.cornerRadius = 50;
//设定计时器
[ NSTimer scheduledTimerWithTimeInterval:1.0f target:self selector:@selector(Chang) userInfo:nil repeats:YES];
}
-(void)Chang
{
//让一个view按照本身的transfrom去改变transfrom 可以多次执行 让视图旋转
//第一个代表获取的获取view的transfrom
//第二个参数代表的是旋转多少度
// self.myimage.transform = CGAffineTransformRotate(self.myimage.transform, M_PI/6);
__weak typeof(self) pself = self;
[UIView animateWithDuration:1.0f animations:^{
//图片的缩放变化
if (pself.myimage.frame.size.width >100) {
//放大缩小
pself.myimage.transform = CGAffineTransformScale(pself.myimage.transform, 0.5, 0.5);
} else {
pself.myimage.transform = CGAffineTransformScale(pself.myimage.transform, 2 , 2);
}
}];
// //图片循环移动动画效果
// if (pself.myimage.frame.origin.x == 0 && pself.myimage.frame.origin.y == 0) {
// pself.myimage.transform = CGAffineTransformTranslate(pself.myimage.transform, pself.view.frame.size.width - 200, 0);
// } else if (pself.myimage.frame.origin.x == pself.view.frame.size.width - 200 && pself.myimage.frame.origin.y == 0) {
// pself.myimage.transform = CGAffineTransformTranslate(pself.myimage.transform, 0, pself.view.frame.size.height - 200);
// } else if (pself.myimage.frame.origin.x == pself.view.frame.size.width - 200 && pself.myimage.frame.origin.y == pself.view.frame.size.height - 200) {
// pself.myimage.transform = CGAffineTransformTranslate(pself.myimage.transform, -(pself.view.frame.size.width - 200), 0);
// } else {
// pself.myimage.transform = CGAffineTransformTranslate(pself.myimage.transform, 0, -(pself.view.frame.size.height - 200));
// }
//
// }];
}
//点击时候同时进行旋转,缩放,平移效果
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
// [UIView animateWithDuration:1.0f animations:^{
//
// //设置view的transfrom 属性旋转 这一个代表旋转角度
// self.myimage.transform = CGAffineTransformMakeRotation( M_PI/4);
//
// //设置view 的transFrom的缩放
// self.myimage.transform = CGAffineTransformMakeScale(2, 2);
//
// //设置view 的transfrom 平移的x,y的坐标
// self.myimage.transform = CGAffineTransformMakeTranslation(-100, 200);
//
// self.myimage.transform = CGAffineTransformRotate(self.myimage.transform, M_PI/2);
//
//
// }];
//CAlayer 是含有隐式动画的
// _layer.borderWidth = 10; //设置边框的大小
// _layer.cornerRadius = 50; //设置圆角(变为圆形)
// _layer.borderColor =[UIColor greenColor].CGColor;
// _layer.backgroundColor = [UIColor yellowColor].CGColor ;
}
三.核心动画使用
#import "ViewController.h"
@interface ViewController ()
@property(nonatomic,strong)UIView *myView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
//核心动画
self.myView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
self.myView.backgroundColor = [UIColor redColor];
[self.view addSubview: self.myView];
// //kaypath的参数 必须是在calyer类的属性 在其属性中的注释里要有"animatable" 这个单词才可以使用
// CABasicAnimation *BA = [CABasicAnimation animationWithKeyPath:@"transform.rotation" ];
// //设置动画持续时间
// BA.duration = 2.0f;
// //设置动画开始值
// BA.fromValue = @(0);
// //设置动画结束值
// BA.toValue = @(M_PI / 2);
//
// //核心动画要添加到layer里面
// //第一个参数代表哪一部分动画
// //第二个参数代表随便的一个key 可以使任意的 在移动时使用
// [self.myView.layer addAnimation:BA forKey:@"base"];
//相关的一组动画
CAKeyframeAnimation *keyFA = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//设置核心动画执行时间
// keyFA.duration = 20;
//设置核心动画重复次数
// keyFA.repeatCount = 5;
//如果设置的属性是结构体了性
NSValue *value = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(0, 300)];
NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(300, 400)];
NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(0, 400)];
keyFA.values = @[value,value1,value2,value3,value4];
[self.myView.layer addAnimation:keyFA forKey:@"base"];
CAKeyframeAnimation *keyAF1 = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
// keyAF1.duration = 10.f;
// keyAF1.repeatCount = 5;
id colore1 = (id)[UIColor redColor].CGColor;
id colore2 = (id)[UIColor yellowColor].CGColor;
id colore3 = (id)[UIColor orangeColor].CGColor;
id colore4 = (id)[UIColor blueColor].CGColor;
id colore5 = (id)[UIColor greenColor].CGColor;
// id colore6 = (id)[UIColor colorWithRed:arc4random()/255 green:<#(CGFloat)#> blue:<#(CGFloat)#> alpha:<#(CGFloat)#>]
//用value值,同时设置一组颜色
keyAF1.values = @[colore1,colore2,colore3,colore4,colore5];
[self.myView.layer addAnimation:keyAF1 forKey:@"base2"];
//播放一组的没有关联的核心动画
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[keyFA,keyAF1];
group.duration = 10.0;
group.repeatCount = 10;
// [self.myView.layer addAnimation:group forKey:@"base2"];
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//视图切换的效果
CATransition *transition = [CATransition animation];
//代表的是动画的效果
// transition.type = @"moveIn";
// transition.type = @"cube";
transition.type = @"suckEffect";
//
transition.duration = 3;
transition.repeatCount = 30;
//动画出来的方向
transition.subtype = kCATransitionFromRight;
[self.myView.layer addAnimation:transition forKey:@"key"];
}
