iOS开发13-iOS动画的学习
1UIView动画
1.1动画块
- (void)viewDidLoad {
[super viewDidLoad];
self.v1 = [[UIView alloc]init];
self.v1.frame = CGRectMake(100, 100, 200, 200);
self.v1.backgroundColor =[UIColor blueColor];
[self.view addSubview:self.v1];
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
//开始动画
[UIView beginAnimations:nil context:nil];//标记动画开始
//设置各种动画属性
/*
//[UIView setAnimationDuration:(NSTimeInterval)]//设置动画持续时间
//[UIView setAnimationDelay:(NSTimeInterval)]//设置动画开始前的延时
//[UIView setAnimationRepeatAutoreverses:(BOOL)]//
//[UIView setAnimationRepeatCount:(float)]//重复次数
//[UIView setAnimationDelegate:(nullable id)]//设置动画的代理
*/
//设置动画持续时间 2秒
[UIView setAnimationDuration:5];
//延迟开始 0.1秒后开始动画
[UIView setAnimationDelay:0.1];
//重复次数 1次
[UIView setAnimationRepeatCount:1];
//动画的速度曲线-开始结束的运行速度
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
//setAnimationCurve的枚举
/*
UIViewAnimationCurveEaseInOut,//开始和结束时候慢速
UIViewAnimationCurveEaseIn, //开始慢速
UIViewAnimationCurveEaseOut, //结束慢速
UIViewAnimationCurveLinear //线性,正常速度
*/
//设置动画过渡到的效果
//背景颜色
self.v1.backgroundColor=[UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1];
//中心点
//self.v1.center=CGPointMake(300, 300);
//开始时候,V1在父View里的位置和大小:self.v1.frame = CGRectMake(100, 100, 200, 200);
self.v1.frame = CGRectMake(300, 300, 30, 30);
//提交动画
[UIView commitAnimations];//标记动画结束
}
1.2动画Block
[UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
//在这里设置各种属性
self.fromView.backgroundColor=[UIColor greenColor];
} completion:^(BOOL finished) {
//动画完成之后
}];
2CAAnimation动画
2.1CABasicAnimation基本动画
可以通过animationWithKeyPath键值对的方式来改变动画
animationWithKeyPath的值:
transform.scale = 比例转换
transform.scale.x = 宽的比例转换
transform.scale.y = 高的比例转换
transform.rotation.z = 平面图的旋转
opacity = 透明度
margin
zPosition
backgroundColor 背景颜色
cornerRadius 圆角
borderWidth
bounds
contents
contentsRect
cornerRadius
frame
hidden
mask
masksToBounds
position
shadowColor
shadowOffset
shadowOpacity
shadowRadius
- (void)viewDidLoad {
[super viewDidLoad];
self.v1=[[UIView alloc]init];
self.v1.frame=CGRectMake(50, 50, 100, 100);
self.v1.backgroundColor=[UIColor redColor];
[self.view addSubview:self.v1];
}
//CABasicAnimation //基本动画
//position
//从一个位置到另外一个位置,沿着直线路径
CABasicAnimation * basic1 = [CABasicAnimation animationWithKeyPath:@"position"];
basic1.duration = 3.0f;//5秒
//从哪儿开始
NSValue *value1 = [NSValue valueWithCGPoint:self.v1.layer.position];
basic1.fromValue = value1;
//到哪里去
NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(300, 400)];
basic1.toValue =value2;
[self.v1.layer addAnimation:basic1 forKey:@"position"];
//不设置的话,动画结束后会回到原来的位置
self.v1.layer.position=CGPointMake(300, 400);
//移除动画
//[self.v1.layer removeAnimationForKey:@"positon"];
2、旋转
//旋转
CABasicAnimation * basic2 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
basic2.duration = 5;//5秒
basic2.fromValue = @(0);
basic2.toValue =@(M_PI*5);
[self.v1.layer addAnimation:basic2 forKey:@"b2"];
3、放大缩小
//放大缩小
CABasicAnimation * basic3 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
basic3.duration = 5.f;//5秒
basic3.fromValue = @(1);
basic3.toValue =@(3);
[self.v1.layer addAnimation:basic3 forKey:@"b3"];
动画效果:
2.2 CAKeyframeAnimation动画
2.2.1按照给定路线移动
// CAKeyframeAnimation
//移动路线
CAKeyframeAnimation *kf = [CAKeyframeAnimation animationWithKeyPath:@"position"];
kf.duration = 5.f;
id p1 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
id p2 = [NSValue valueWithCGPoint:CGPointMake(350, 100)];
id p3 = [NSValue valueWithCGPoint:CGPointMake(150, 550)];
id p4 = [NSValue valueWithCGPoint:CGPointMake(350, 550)];
kf.values=@[p1,p2,p3,p4];
[self.v1.layer addAnimation:kf forKey:@"kf1"];
动画效果:
2.2.2连续变换颜色
//变颜色
CAKeyframeAnimation *kf2 =[CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
kf2.duration = 5.f;
//变化过程
id c1 =(id)[UIColor blackColor].CGColor;
id c2 =(id)[UIColor greenColor].CGColor;
id c3 =(id)[UIColor yellowColor].CGColor;
id c4 =(id)[UIColor redColor].CGColor;
kf2.values=@[c1,c2,c3,c4];
[self.v1.layer addAnimation:kf2 forKey:@"kf2"];
动画效果:
2.3 CAAnimationGroup组合动画
//旋转
CABasicAnimation * basic2 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
basic2.duration = 5;//5秒
basic2.fromValue = @(0);
basic2.toValue =@(M_PI*5);
//移动路线
CAKeyframeAnimation *kf = [CAKeyframeAnimation animationWithKeyPath:@"position"];
kf.duration = 5.f;
id p1 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
id p2 = [NSValue valueWithCGPoint:CGPointMake(350, 100)];
id p3 = [NSValue valueWithCGPoint:CGPointMake(150, 550)];
id p4 = [NSValue valueWithCGPoint:CGPointMake(350, 550)];
kf.values=@[p1,p2,p3,p4];
//变颜色
CAKeyframeAnimation *kf2 =[CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
kf2.duration = 5.f;
//变化过程
id c1 =(id)[UIColor blackColor].CGColor;
id c2 =(id)[UIColor greenColor].CGColor;
id c3 =(id)[UIColor yellowColor].CGColor;
id c4 =(id)[UIColor redColor].CGColor;
kf2.values=@[c1,c2,c3,c4];
// CAAnimationGroup
CAAnimationGroup *group = [CAAnimationGroup animation];
group.duration=5;
group.animations = @[kf,kf2];
//添加组合动画
[self.v1.layer addAnimation:group forKey:@"group"];
动画效果:
2.4 CATransition动画
CATransition *tran1 = [CATransition animation];
tran1.duration = 5.f;
//动画效果
tran1.type = @"reveal";//类型 // fade, moveIn, push , reveal
tran1.subtype = @"fromLeft";//方向
/*
fromLeft
fromRight
fromTop
fromBottom
*/
[self.v1.layer addAnimation:tran1 forKey:@"tran1"];
动画效果: