我的iOS学习历程 - UIView动画与CAAnimation动画详解

UIView动画
动画特点: 全部都是类方法 直接类去调用
1.UIView 直接调用
2.block方法

步骤:
1.开始动画
2.---之间写你要执行的动画
3.提交动画

开始动画
参数1 动画的ID
参数2 携带的参数
[UIView beginAnimations:@"donghua" context:@"asd"];

//  设置动画
//  设置动画执行的时间
[UIView setAnimationDuration:1];
//  延迟
//    [UIView setAnimationDelay:2];
//  是否反转
[UIView setAnimationRepeatAutoreverses:YES];
//  执行次数 CGFLOAT_MAX无限循环
[UIView setAnimationRepeatCount:1];
//  是否继续执行
[UIView setAnimationBeginsFromCurrentState:YES];
//  设置代理
[UIView setAnimationDelegate:self];
//  需要自己设置代理方法
//  动画将要开始
[UIView setAnimationWillStartSelector:@selector(animationWillStart:context:)];
//  动画结束
[UIView setAnimationDidStopSelector:@selector(animationDidStop)];

//  改变位置
self.imageView.frame = CGRectMake(100, 150, 100, 100);
//  改变颜色
self.imageView.backgroundColor = [UIColor greenColor];

self.imageView.alpha = 0.5;

//  提交动画
[UIView commitAnimations];
UIView的block方法
2D仿射
#pragma mark -- 平移
[UIView animateWithDuration:2 animations:^{
//  你要执行的动画
//  改变的视图 形变属性
self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, 100, 0);
} completion:^(BOOL finished) {
//  动画结束后 执行的block

//   block里面再嵌套一个动画block
[UIView animateWithDuration:2 animations:^{
self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, -100, 0);
} completion:^(BOOL finished) {
#pragma mark -- 缩放
//  填的是缩放比例
[UIView animateWithDuration:2 animations:^{
self.imageView.transform = CGAffineTransformScale(self.imageView.transform, 2, 2.5);

}];

}];

}];

CAAnimation 是一个抽象类

旗下三个子类

1.CAAnimationGroup 设置组动画

2.CAPropertyAnimation 属性动画 抽象类

旗下两个子

① CABasicAnimation 基本动画 旋转 改变大小等

② CAKeyframeAnimation 轨迹动画 比如改变一组颜色,按一组点移动

3 CATransaction 过渡动画 私有动画

layer动画步骤
1.选取合适类的去创建动画(修改一个值就用基本动画,修改一组值,就用轨迹动画)
2.创建动画 并且设置要修改的值
3.添加到要动画的视图上

/*
视图的构成 分两部分
最底下是UIView UIView上面 有layer层

layer层  负责渲染视图
UIView  负责把渲染完成的视图展示出来
UIView画布  layer就是花布上面的画
*/

//  设置layer的属性
//  圆角
//  视图正方形 宽的一半 设置为圆
self.imageView.layer.cornerRadius = self.imageView.frame.size.width / 2;
//  阴影 CGColorRef 专门绘制图层使用的颜色
self.imageView.layer.shadowColor = [UIColor blackColor].CGColor;
//  偏移距离
self.imageView.layer.shadowOffset = CGSizeMake(0, 0);
//  模糊程度
self.imageView.layer.shadowRadius = 50;
//  阴影透明度
self.imageView.layer.shadowOpacity = 1;
//  边框颜色
self.imageView.layer.borderColor = [UIColor orangeColor].CGColor;
//  边框大小
self.imageView.layer.borderWidth = 5;

//  旋转
- (void)rotationX {
//  创建基本动画
//  修改的是 改变属性中的弧度的x轴的值
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
//  修改值
//  由于修改值 需要把基本数据类型或者结构体类型 转化成 对象类型(NSNumber, NSValue)
animation.toValue = [NSNumber numberWithFloat:M_PI];
//  设置动画的事件
animation.duration = 2;
//  设置重复次数
animation.repeatCount = 2;

//  把动画 添加到 layer层上
[self.imageView.layer addAnimation:animation forKey:@"transform.rotation.y"];
}

//  改变视图的大小
- (void)animationBoundSize {
//  keypath一个字母都不能差
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
//  修改值(从一个值修改到一个值)
animation.fromValue = [NSValue valueWithCGSize:CGSizeMake(0, 0)];
animation.toValue = [NSValue valueWithCGSize:CGSizeMake(100, 100)];
//  设置时间
animation.duration = 3;
//  添加到layer层上
[self.imageView.layer addAnimation:animation forKey:@"transform.rotation.y"];
}

//  改变一组背景颜色
- (void)animationBackgroundColor {
//  修改一组值的变化
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
//  修改一组值
animation.duration = 3;
CGColorRef blueColor = [UIColor blueColor].CGColor;
CGColorRef cyanColor = [UIColor cyanColor].CGColor;
CGColorRef redColor = [UIColor redColor].CGColor;
animation.values = @[(id)blueColor, (id)cyanColor, (id)redColor];

[self.imageView.layer addAnimation:animation forKey:@"backgroundColor"];
}

//  轨迹移动 调整位置
- (void)animationPosition {
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

//  创建点
CGPoint p1 = CGPointMake(100, 105);
CGPoint p2 = CGPointMake(105, 100);
CGPoint p3 = CGPointMake(100, 105);
CGPoint p4 = CGPointMake(310, 333);
//  转化成对象类型
NSValue *point1 = [NSValue valueWithCGPoint:p1];
NSValue *point2 = [NSValue valueWithCGPoint:p2];
NSValue *point3 = [NSValue valueWithCGPoint:p3];
NSValue *point4 = [NSValue valueWithCGPoint:p4];
animation.duration = 5;
//  修改值
animation.values = @[point1, point2, point3, point4];
[self.imageView.layer addAnimation:animation forKey:@"position"];
}

//  抖动
- (void)animationShake {
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];

//  获取当前位置点
CGFloat center = self.imageView.layer.position.x;
CGFloat left = center - 20;
CGFloat right = center + 20;

NSNumber *c = [NSNumber numberWithFloat:center];
NSNumber *l = [NSNumber numberWithFloat:left];
NSNumber *r = [NSNumber numberWithFloat:right];

animation.values = @[l, c, r,l, c, r,l, c, r,l, c, r,l, c, r,l, c, r,l, c, r];
animation.duration = 1;
[self.imageView.layer addAnimation:animation forKey:@"position.x"];

}

//  3D转动
- (void)animationTransform {
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];

//  根据x y z轴进行角度转动
NSValue *value = [NSValue valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 100, 100, 100)];
animation.toValue = value;
animation.duration = 2;
[self.imageView.layer addAnimation:animation forKey:@"transform"];
}

//  组动画
- (void)animationGroup {
CAAnimationGroup *group = [CAAnimationGroup animation];
//  基本动画
//  修改的是 改变属性中的弧度的x轴的值
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
//  修改值
//  由于修改值 需要把基本数据类型或者结构体类型 转化成 对象类型(NSNumber, NSValue)
animation.toValue = [NSNumber numberWithFloat:M_PI];
//  设置动画的事件
animation.duration = 2;
//  设置重复次数
animation.repeatCount = 2;

//  轨迹动画
//  修改一组值的变化
CAKeyframeAnimation *animation2 = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
//  修改一组值
animation2.duration = 3;
CGColorRef blueColor = [UIColor blueColor].CGColor;
CGColorRef cyanColor = [UIColor cyanColor].CGColor;
CGColorRef redColor = [UIColor redColor].CGColor;
animation2.values = @[(id)blueColor, (id)cyanColor, (id)redColor];

//  添加到group的动画数组中
group.animations = @[animation, animation2];
group.duration = 5;

[self.imageView.layer addAnimation:group forKey:@"group"];

}