分三部分讲述:UIView动画,transform动画,layer动画
UIView动画
有两种形式:
**第一种形式:**
UIView提供的动画方法:NSTimerInterval(double类型)
duration动画的时间间隔
[UIView animateWithDuration:3 animations:^{
//动画的内容写在block里
self.imageView.frame = CGRectMake(100, 100, 300, 300);
}];
//如果下句代码放在这就会显示出从某一处出现的,发到到下句的位置
self.imageView.frame = CGRectMake(100, 300, 150, 150);
**第二种形式:**
[UIView animateWithDuration:5 animations:^{
self.imageView.frame = CGRectMake(100, 100, 300, 300);
self.imageView.alpha = 0;
} completion:^(BOOL finished) {
//最后的回归的状态
//当动画结束的时候在执行的另外一个UIView动画,平滑的缩放
[UIView animateWithDuration:3 animations:^{
self.imageView.frame = CGRectMake(100, 300, 150, 150);
}];
self.imageView.alpha = 1;
}];
**第三种形式:**
第二参数:延迟时间
只能重复动画那部分的内容
[UIView animateWithDuration:5 delay:0.1 options:UIViewAnimationOptionRepeat animations:^{
self.imageView.frame = CGRectMake(100, 300, 150, 150);
} completion:^(BOOL finished) {
[UIView animateWithDuration:3 animations:^{
self.imageView.frame = CGRectMake(100, 300, 150, 150);
}];
self.imageView.alpha = 1;
}];
**第四种形式:**
颤抖动画
第三个参数:设置的越小,抖动的越剧烈
第四个参数:设置越大,图片的初速度越快
[UIView animateWithDuration:5 delay:0.1 usingSpringWithDamping:3 initialSpringVelocity:50 options:UIViewAnimationOptionRepeat animations:^{
self.imageView.frame = CGRectMake(100, 200, 200, 150);
} completion:^(BOOL finished) {
self.imageView.frame = CGRectMake(100, 300, 150, 150);
}];
transform动画
对视图进行旋转的操作
第一个参数:将原来的给他
第二个参数:设置旋转的弧度
self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, M_PI_4);
对视图缩放
第二三个参数设置缩放的比例
self.imageView.transform = CGAffineTransformScale(self.imageView.transform, 0.9, 0.9);
在设置视图的偏移量设置
self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, 100, 100);
layer动画
layer是种类最多的动画.主要负责显示空间的一些设置信息,比如边框,弧度等,layer动画的中种类很多,我们看见的UIView的动画也是封装了几个layer动画
第一种layer动画:
创建一个动画的效果
CATransition *transition = [CATransition animation];
设置动画的种类
transition.type = @"cube";
设置动画时长
[transition setDuration:3];
设置动画重复次数 NSIntegerMax整数的最大值
[transition setRepeatCount:NSIntegerMax];
向imageView上添加动画效果,添加到imageView的layer上
[self.imageView.layer addAnimation:transition forKey:@"transition"];
动画种类:rippleEffect-水波纹;cube-方形旋转;
下面首字母小写
typedef enum : NSUInteger {
fade = 1, //淡入淡出
push, //推挤
reveal, //揭开
moveIn, //覆盖
cube, //立方体
suckEffect, //吮吸
oglFlip, //翻转
rippleEffect, //波纹
pageCurl, //翻页
pageUnCurl, //反翻页
cameraIrisHollowOpen, //开镜头
cameraIrisHollowClose, //关镜头
curlDown, //下翻页
curlUp, //上翻页
flipFromLeft, //左翻转
flipFromRight, //右翻转
//都要小写
} AnimationType;
第二种layer动画(沿着轨迹跑)
关键帧动画
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
给动画创建一个行走的路径,用来记录移动的关键坐标
CGMutablePathRef path = CGPathCreateMutable();
指定起始的坐标位置
第一个参数:用path来保存起始路径
第二个参数:null
第三四个参数:要移动的控件的起始坐标
CGPathMoveToPoint(path, NULL, self.imageView.frame.origin.x, self.imageView.frame.origin.y);
设置图片的移动轨迹
CGPathAddLineToPoint(path, NULL, 100, 100);
CGPathAddLineToPoint(path, NULL, 10, 20);
CGPathAddLineToPoint(path, NULL, 50, 10);
CGPathAddLineToPoint(path, NULL, 140, 200);
给视图设置一条曲线的路径
CGPathAddCurveToPoint(path, NULL, 200, 200, 200, 100, 120, 40);
CGPathAddCurveToPoint(path, NULL, 80, 10, 20, 100, 300, 100);
CGPathAddCurveToPoint(path, NULL, 20, 90, 20, 100, 200, 150);
CGPathAddCurveToPoint(path, NULL, 30, 70, 60, 90, 110,50);
设置动画的时长
[keyAnimation setDuration:4];
重复次数
[keyAnimation setRepeatCount:NSIntegerMax];
把设计好的路线放到动画中
[keyAnimation setPath:path];
最后,把动画添加到视图上
[self.imageView.layer addAnimation:keyAnimation forKey:@"keyAnimation"];
**第三种layer动画**
**让图片缩放:**
本质还是修改transform的属性 让其放大缩小
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
对layer动画设置很多需要KVC的方式赋值,就是需要通过给定一个key再去设置
动画时长
[basic setDuration:3];
设置动画执行的次数
[basic setRepeatCount:NSIntegerMax];
这个动画设置的是一个缩放的效果,所以需要给定一个开始的初始值
fromValue与toValue是对象类型 需要一个id类型的对象 所以用number进行转型 number就是个对象类型
basic.fromValue = [NSNumber numberWithInt:1];
在设置一个结束的值
basic.toValue = [NSNumber numberWithInt:2];
把动画添加到视图上
[self.imageView.layer addAnimation:basic forKey:@"basic"];
**让图片旋转**
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
设置角度
basic.fromValue = [NSNumber numberWithFloat:0.0];
basic.toValue = [NSNumber numberWithFloat:2*M_PI];
设置动画时长
[basic setDuration:3];
设置动画次数
[basic setRepeatCount:NSIntegerMax];
[self.imageView.layer addAnimation:basic forKey:@"basic"];
让其自动旋转
[basic setAutoreverses:YES];