一、动画的使用场景
iOS中的动画是指?些视图上的过渡效果，合理利?动画能提??户体验。
动画的分类
二、UIView动画
2.1 属性：
frame:视图框架
center:视图位置
bounds:视图??
backgroundColor:背景颜?
alpha:视图透明度
transform:视图转换
2.2 UIView动画的设置
?法名 作?
+ (void)setAnimationDuration:(NSTimeInterval)duration; 动画持续时间
+ (void)setAnimationDelay:(NSTimeInterval)delay; 动画开始前延时
+ (void)setAnimationCurve:(UIViewAnimationCurve)curve; 动画的速度曲线
+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses; 动画反转
+ (void)setAnimationRepeatCount:(float)repeatCount; 动画反转的次数
+ (void)setAnimationDelegate:(id)delegate; 设置动画的代理
+ (void)setAnimationWillStartSelector:(SEL)selector; 动画开始的代理?法
+ (void)setAnimationDidStopSelector:(SEL)selector; 动画结束的代理?法
+ (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState; 动画从当前状态继续执?
三、CGAffineTransform2D仿射变换
CGAffineTransform是结构体，表??个矩阵，?于映射视图变 换。 缩放、旋转、偏移是仿射变换?持的最常?的操作。 缩放、缩放、偏移区分“基于上?次”和“基于初始” 。
3.1 CGAffineTransfrom的API
CGAffineTransformMake(CGFloat a, CGFloat b, CGFloat c, CGFloat d,CGFloat tx, CGFloat ty) 通过设置矩阵值进?变换
CGAffineTransform CGAffineTransformMakeScale(CGFloat sx, CGFloat sy) 放?缩?(基于初始)
CGAffineTransform CGAffineTransformMakeRotation(CGFloat angle) 旋转(基于初始)
CGAffineTransform CGAffineTransformScale(CGAffineTransform t,CGFloat sx, CGFloat sy) 放?缩?(基于前?次变化)
CGAffineTransform CGAffineTransformRotate(CGAffineTransform t,CGFloat angle) 旋转(基于前?次变化)
3.2 Demo
#pragma mark -- 首尾动画 --
/*
语法形式：
[UIView beginAnimations:动画名 context:传给代理所执行的方法后面的参数];
[UIView commitAnimations];
*/
- (IBAction)didClickFirstBtn:(UIButton *)sender {
[UIView beginAnimations:@"第一个UIView动画" context:nil];
//动画和视图的属性设置
//1.设置动画的执行时间
[UIView setAnimationDuration:.1];
//2.设置动画重复次数
[UIView setAnimationRepeatCount:2];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
//从当前状态执行
[UIView setAnimationBeginsFromCurrentState:YES];
// [UIView setAnimationRepeatAutoreverses:YES];
//设置视图相关属性
// CGRect frame = self.view.frame;
// frame.size.width /= 50;
// frame.size.height /= 50;
// self.myView.frame = frame;
self.myView.transform = CGAffineTransformRotate(self.myView.transform, M_PI);
// self.myView.transform = CGAffineTransformMakeScale(0.5, 0.5);
self.myView.transform = CGAffineTransformScale(self.myView.transform, 2, 2);
[UIView commitAnimations];
}
#pragma mark -- BLOCK动画块 --
- (IBAction)didClickSecondBtn:(id)sender {
__block ViewController *VC = self;
[UIView animateWithDuration:0.5 animations:^{
//对动画和视图属性进行设置
// [UIView setAnimationBeginsFromCurrentState:YES];
[UIView setAnimationRepeatCount:1.0];
//视图设置
VC.myView.transform = CGAffineTransformRotate(VC.myView.transform, M_PI_4);
VC.myView.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1];
} completion:^(BOOL finished) {
//动画结束之后
[UIView animateWithDuration:0.5 animations:^{
[UIView setAnimationRepeatCount:1];
VC.myView.transform = CGAffineTransformScale(VC.myView.transform, 0.5, 0.5);
} completion:^(BOOL finished) {
}];
}];
}
#pragma mark -- UIView的转场动画 --
- (IBAction)transitionAnimation:(id)sender {
//1.view自身的转场动画
// [UIView transitionWithView:self.myView duration:1 options:UIViewAnimationOptionTransitionCurlUp animations:^{
// [UIView setAnimationRepeatCount:2];
// self.myView.backgroundColor = [UIColor redColor];
// } completion:^(BOOL finished) {
//
// }];
//2.两个view之间的转场动画
UIView *toView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
toView.backgroundColor = [UIColor cyanColor];
[UIView transitionFromView:_myView toView:toView duration:1.0 options:UIViewAnimationOptionTransitionCrossDissolve completion:nil];
//将self.myView从父视图上移除(销毁),同时添加toView
}
四、CALayer
4.1 UIView和CALayer的区别和联系
CALayer负责绘制，提供UIView 需要展?的内容。不能交互。是UIView的?个readonly属性。
UIView负责交互，显?CALayer绘制的内容。
4.2 CALayer的常?属性
属性 作?
CornerRadius 圆?
ShadowColor 阴影颜?
ShadowOffset 阴影偏移距离
ShadowRadius 阴影模糊程度
ShadowOpacity 阴影透明度
BorderWidth 描边粗细
BorderColor 描边颜?
anchorPoint 锚点
position 位置信息
transfrom 使CALayer产?3D空间内的平移、缩放、旋转等变化
4.3 anchorPoint和position
4.4 Demo
- (void)viewDidLoad {
[super viewDidLoad];
_imgView.backgroundColor = [UIColor redColor];
_imgView.layer.cornerRadius = 30;
// _imgView.layer.masksToBounds = YES; //如果设置masksToBounds=YES,设置阴影无效
_imgView.layer.anchorPoint = CGPointMake(0.5, 1);
_imgView.layer.shadowColor = [UIColor lightGrayColor].CGColor;
_imgView.layer.shadowOpacity = 1;
_imgView.layer.shadowOffset = CGSizeMake(10, 10);
_imgView.layer.shadowRadius = 1;
_myView.layer.cornerRadius = 50;
_myView.layer.shadowColor = [UIColor redColor].CGColor;
_myView.layer.shadowOpacity = 1;
_myView.layer.shadowOffset = CGSizeMake(10, 10);
#pragma mark -- 自定义CALayer --
[self customLayer];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)customLayer
{
CALayer *myLayer = [CALayer layer];
//设置其位置和大小
myLayer.bounds = CGRectMake(0, 0, 50, 50);
myLayer.backgroundColor = [UIColor yellowColor].CGColor;
//设置锚点
myLayer.anchorPoint = CGPointMake(0, 0);
// 设置position(定位点,默认是(0,0)).锚点和position始终重合
myLayer.position = CGPointMake(50, 50);
//添加到父图层
[self.view.layer addSublayer:myLayer];
}
- (IBAction)didClickBasic:(id)sender {
/*
//1.设置动画对象
CABasicAnimation *basicAnimation = [CABasicAnimation animation];
//2.告诉系统要执行的动画,影响的是哪个属性
basicAnimation.keyPath = @"position";
//3.设置通过动画,将layer从哪移动到哪
basicAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 500)];
//取消回到原位置
basicAnimation.removedOnCompletion = NO;
//设置保存动画的最新状态
basicAnimation.fillMode = kCAFillModeForwards;
basicAnimation.duration = 3.0;
[self.imgView.layer addAnimation:basicAnimation forKey:@"basic"];
*/
//实现旋转
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform"];
basic.duration = 2.0;
basic.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4*4, 1, 1, 1)];
basic.removedOnCompletion = NO;
basic.fillMode = kCAFillModeForwards;
[self.imgView.layer addAnimation:basic forKey:@"basic"];
//移除动画
// [self.imgView.layer removeAnimationForKey:@"basic"];
}
#pragma mark -- IBActions -------
#pragma mark -- 帧动画 --
- (IBAction)didClickKeyFrame:(id)sender {
CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
//设置动画时间
keyFrame.duration = 0.1;
//设置imageView的抖动角度
//角度转换为弧度: 度数/180*M_PI
keyFrame.values = @[@(-4.0/180*M_PI),@(4.0/180*M_PI)];
keyFrame.repeatCount = 100;
[self.imgView.layer addAnimation:keyFrame forKey:@"keyFrame"];
}
#pragma mark -- CATransition转场动画 --
- (IBAction)didClickTransition:(id)sender {
//属性:
//type:设置动画过渡类型
//subType:动画过度的方向
//startProgress:动画起点
//endProgress:动画终点
self.index++;
self.index = _index%19 +1;
self.imgView.image = [UIImage imageNamed:[NSString stringWithFormat:@"image%d.jpg",self.index]];
CATransition *transition = [CATransition animation];
transition.type = @"cube";
transition.subtype = kCATransitionFromLeft;
transition.duration = 2;
transition.repeatCount = 10;
// transition.startProgress = 0;
// transition.endProgress = 1;
[self.imgView.layer addAnimation:transition forKey:@"transition"];
}
五、CAAnimation动画
CAAnimation是抽象类,通常使?它的?类实现动画效果。所有CAAnimation及其?类的对象都添加在View的layer上,例如: [view.layer addAnimation:animation forKey:nil];
5.1 给layer添加/移除CALayer动画
- (void)addAnimation:(CAAnimation *)anim forKey:(NSString *)key;
- (void)removeAnimationForKey:(NSString *)key;
- (void)removeAllAnimations;
5.2 CAAnimation相关?类
CAPropertyAnimation也是?个抽象类 通常我们都使?它的两个?类:CABasicAnimation和 CAKeyFrameAnimation
5.2.1 CABasicAnimation
作?:基本layer动画,通过设定初始和结束值执?动画
+ (id)animationWithKeyPath:(NSString *)path; 系统提供的构造器?法
@property(copy) NSString *keyPath; 只能填写CALayer中能够做
动画的属性名
@property(retain) id fromValue; 起始值
@property(retain) id toValue; 结束值
@property(retain) id byValue; 相对值
5.2.2 CAKeyFrameAnimation
作?:关键帧动画，可以让你的view的layer按照预定轨迹做动画
?法名/属性名 作?
+ (id)animationWithKeyPath:(NSString *)path; 系统提供的构造器?法
@property CGPathRef path; 通过制定?个??定义的path来让某?个物体按照
这个路径进?动画
@property(copy) NSArray *values; ?个数组，提供了?组关键帧的值， 当使?path的
时候 values的值?动被忽略。
@property(copy) NSArray *keyTimes; ?个数组,设置每?帧的时间,其成员必须是
NSNumber。设置详情查看API。
@property(copy) NSString *rotationMode; 设定关键帧中间的值是如何计算
5.3 CAAnimaitionGroup
CAAnimationGroup只有?个数组属性,可以添加多个CAAnimation?起执?
5.3.1 CATrasition
作?:layer的过渡动画
有两个主要属性:type(设置过渡动画的效果)和subType(设置过渡动画的?向)
5.4 DEMO
- (IBAction)didGroupAnimation:(id)sender {
// 平移动画
CABasicAnimation *a1 = [CABasicAnimation animation];
a1.keyPath = @"transform.translation.y";
a1.toValue = @(100);
// 缩放动画
CABasicAnimation *a2 = [CABasicAnimation animation];
a2.keyPath = @"transform.scale";
a2.toValue = @(0.0);
// 旋转动画
CABasicAnimation *a3 = [CABasicAnimation animation];
a3.keyPath = @"transform.rotation";
a3.toValue = @(M_PI_2);
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[a1, a2, a3];
group.fillMode = kCAFillModeForwards;
// group.removedOnCompletion = NO;
[self.imgView.layer addAnimation:group forKey:@"group"];
}