动画(UIView CALayer动画,CABasicAnimation,CATransition,CAKeyframeAnimation)
UIView 动画
1.动画的作用
提高用户体验, 合理使用动画
2.动画的分类
a.UIView动画, 基于CALayer动画, 是对CALayer动画的封装
i.属性动画
ii.过渡动画
b.CAlayer动画
i.基本动画
ii.关键帧动画
iii.过渡动画
iv.组动画
3.UIView动画是对UIview(或子类)做的动画
a.属性动画和过渡动画都分了两种写法(动画块, block)
b.属性动画和过渡动画可以同时执行
4.什么是CALayer?
用于控制渲染和展示内容
UIView自带一个CALayer
5.CALayer动画是对CALayer做动画, CALayer上的动画是模拟动画, 模拟改变的过程, 没有实质性的修改
UIView属性动画
效果图:
写法1: 动画块, 以beginAnimations开头, 以commitAnimations结尾
// 参数1: 动画标识符
// 参数2: 传递参数
[UIView beginAnimations:@"辉哥真帅" context:"This is right!"];
//配置动画参数
//动画时长, 默认0.2s
[UIView setAnimationDuration:1];
//动画曲线, 默认淡进淡出
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
//动画重复次数, 默认为0
[UIView setAnimationRepeatCount:1];
//动画反弹, 默认NO
[UIView setAnimationRepeatAutoreverses:NO];
//动画延迟执行, 默认0
[UIView setAnimationDelay:0];
//动画代理
[UIView setAnimationDelegate:self];
//将要开始动画, 执行的方法
[UIView setAnimationWillStartSelector:@selector(willStart)];
//已经结束动画, 执行的方法
[UIView setAnimationDidStopSelector:@selector(didStop)];
//在动画块之间, 写属性的改变, 能够做动画的属性有: frame, center, alpha, backgroundColor, bounds, transform
self.animationView.center = CGPointMake(arc4random() % 376, arc4random() % 668);
self.animationView.backgroundColor = [UIColor colorWithRed:arc4random() % 256 / 255. green:arc4random() % 256 / 255. blue:arc4random() % 256 / 255. alpha:1];
self.animationView.transform = CGAffineTransformRotate(self.animationView.transform, M_PI_4);
self.animationView.transform = CGAffineTransformScale(self.animationView.transform, 1, 1.2);
[UIView commitAnimations];
写法2: block
动画时长
[UIView animateWithDuration:1 animations:^{
//属性的修改写在block中
self.animationView.center = CGPointMake(arc4random() % 376, arc4random() % 668);
}];
动画时长 + 动画delegate
[UIView animateWithDuration:(NSTimeInterval) animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>]
动画时长 + 动画延迟 + 动画参数 + 动画delegate
[UIView animateWithDuration:1 delay:0.5 options:UIViewAnimationOptionCurveLinear animations:^{
属性修改
} completion:^(BOOL finished) {
动画结束
}];
过渡动画
效果图
- (IBAction)transitionAnimation:(UIButton *)sender {
// /*
//过渡动画
// 写法1: 动画快
[UIView beginAnimations:@"过渡动画" context:nil];
[UIView setAnimationDuration:0.5];
// 过度变化
// 参数1: 动画类型
// 参数2: 对哪个视图做过渡动画
// 参数3: 是否需要缓存
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.animationView cache:YES];
self.animationView.backgroundColor = [UIColor colorWithRed:arc4random() % 256 / 255. green:arc4random() % 256 / 255. blue:arc4random() % 256 / 255. alpha:arc4random() % 256 / 255];
[UIView commitAnimations];
// */
//写法2: block
[UIView transitionWithView:self.animationView duration:1 options:UIViewAnimationOptionTransitionFlipFromTop animations:^{
self.animationView.backgroundColor = [UIColor colorWithRed:arc4random() % 256 / 255. green:arc4random() % 256 / 255. blue:arc4random() % 256 / 255. alpha:1];
} completion:^(BOOL finished) {
NSLog(@"动画完成");
}];
}
CALayer, 层类, 继承于NSObject, 一个UIView视图都自带有一个CALayer的属性
UIView和CALayer的关系
1.UIView控制大小和事件处理
2.CALayer控制渲染和内容展示
self.layer = [[CALayer alloc] init];
//layer的大小和UIView大小保持一致
self.layer.frame = CGRectMake(100, 100, 175, 175);
//layer的颜色类型是CGColorRef, 可以把UIColor转成CGColor
self.layer.backgroundColor = [UIColor colorWithRed:0.000 green:0.696 blue:1.000 alpha:1.000].CGColor;
//圆角半径
self.layer.cornerRadius = 175/2;
//边框宽度
self.layer.borderWidth = 5;
//边框颜色
self.layer.borderColor = [UIColor colorWithRed:0.456 green:0.900 blue:0.984 alpha:1.000].CGColor;
//阴影的偏移
self.layer.shadowOffset = CGSizeMake(10, 10);
//阴影的不透明度
self.layer.shadowOpacity = 1;
//阴影的颜色
self.layer.shadowColor = [UIColor grayColor].CGColor;
[self.view.layer addSublayer:self.layer];
CAAnimation, layer上的动画, 继承于NSObject
CAAnimation是一个抽象基类, 子类有:
1.CAPropertyAnimation, 属性动画, 抽象子类
a.CABasicAnimation, 基本动画
b.CAKeyframeAnimation, 关键帧动画
2.CAAnimationGroup, 动画组
3.CATransition, 过渡动画
基本动画,继承于属性动画, 在被动画的同时, 对属性做修改
keyPath写属性的名字, 或路径
可以做动画的属性, 都有一个标识符"Animatable"
CABasicAnimation * basic = [CABasicAnimation animationWithKeyPath:@"bounds"];
NSValue, 用于把结构体类型转换成对象类型
basic.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 100, 100)];
[self.layer addAnimation:basic forKey:@"帅"];
- (IBAction)basic:(UIButton *)sender {
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"bounds.size.width"];
basic.toValue = @10;
[self.layer addAnimation:basic forKey:@"haha"];
}
关键帧动画
- (IBAction)keyframe:(UIButton *)sender {
//关键帧动画
CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
keyframe.duration = 3;
keyframe.repeatCount = 3;
keyframe.values = @[(id)[UIColor yellowColor].CGColor,
(id)[UIColor greenColor].CGColor,
(id)[UIColor orangeColor].CGColor,
(id)[UIColor blueColor].CGColor,
(id)[UIColor redColor].CGColor];
//数组中的值, 要小于1, 并且升序排列
keyframe.keyTimes = @[@0.2, @0.4, @0.6, @0.9, @1];
[self.layer addAnimation:keyframe forKey:@"hehe"];
}
动画组, 把动画组合起来
- (IBAction)group:(UIButton *)sender {
//动画组, 把动画组合起来
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"bounds.size.height"];
basic.toValue = @10;
CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
keyframe.duration = 3;
keyframe.repeatCount = 3;
keyframe.values = @[(id)[UIColor yellowColor].CGColor,
(id)[UIColor greenColor].CGColor,
(id)[UIColor orangeColor].CGColor,
(id)[UIColor blueColor].CGColor,
(id)[UIColor redColor].CGColor];
//数组中的值, 要小于1, 并且升序排列
keyframe.keyTimes = @[@0.2, @0.4, @0.6, @0.9, @1];
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[basic, keyframe];
group.duration = 9;
[self.layer addAnimation:group forKey:@"hello"];
}
过渡动画
过度样式
suckEffect(三角)
rippleEffect(水波抖动)
pageCurl(上翻页)
pageUnCurl(下翻页)
oglFlip(上下翻转)
- (IBAction)transition:(UIButton *)sender {
//过渡动画
CATransition *transition = [CATransition animation];
transition.duration = 1;
//过度样式
transition.type = @"rippleEffect";
//过度子样式
transition.subtype = kCATransitionFromTop;
[self.view.layer addAnimation:transition forKey:nil];
}
风车旋转示例
效果图
具体代码:
@interface ThirdViewController ()
@property (strong, nonatomic) IBOutlet UIImageView *imageView;
@end
@implementation ThirdViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
[self rotation];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (void)rotation {
[UIView animateWithDuration:0.2 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, M_PI_4);
} completion:^(BOOL finished) {
[self rotation];
}];
}