title: iOS动画学习，持续更新ing...
date: 2016-10-31 14:47:45
tags:
CAEmitterLayer:
CAEmitterLayer继承于 CALayer是一个高性能的粒子引擎，被用来创建实时例子动画如：烟雾，火，雨等等这些效果。
CAEmitterLayer看上去像是许多CAEmitterCell的容器，这些CAEmitierCell定义了一个例子效果。你将会为不同的例子效果定义一个或多个CAEmitterCell作为模版，同时CAEmitterLayer负责基于这些模版实例化一个粒子流。一个CAEmitterCell类似于一个CALayer：它有一个contents属性可以定义为一个CGImage，另外还有一些可设置属性控制着表现和行为。我们不会对这些属性逐一进行详细的描述，你们可以在CAEmitterCell类的头文件中找到。
雪花动画：
- (void)createSnow{
self.view.backgroundColor = [UIColor blackColor];
// 创建粒子Layer
CAEmitterLayer *snowEmitter = [CAEmitterLayer layer];
// 粒子发射位置
snowEmitter.emitterPosition = CGPointMake(120,20);
// 发射源的尺寸大小
snowEmitter.emitterSize = self.view.bounds.size;
// 发射模式
snowEmitter.emitterMode = kCAEmitterLayerSurface;
// 发射源的形状
snowEmitter.emitterShape = kCAEmitterLayerLine;
// 创建雪花类型的粒子
CAEmitterCell *snowflake = [CAEmitterCell emitterCell];
// 粒子的名字
snowflake.name = @"snow";
// 粒子参数的速度乘数因子
snowflake.birthRate = 1.0;
snowflake.lifetime = 120.0;
// 粒子速度
snowflake.velocity =10.0;
// 粒子的速度范围
snowflake.velocityRange = 10;
// 粒子y方向的加速度分量
snowflake.yAcceleration = 2;
// 周围发射角度
snowflake.emissionRange = 0.5 * M_PI;
// 子旋转角度范围
snowflake.spinRange = 0.25 * M_PI;
snowflake.contents = (id)[[UIImage imageNamed:@"snow"] CGImage];
// 设置雪花形状的粒子的颜色
snowflake.color = [[UIColor whiteColor] CGColor];
snowflake.scaleRange = 0.6f;
snowflake.scale = 0.7f;
snowEmitter.shadowOpacity = 1.0;
snowEmitter.shadowRadius = 0.0;
snowEmitter.shadowOffset = CGSizeMake(0.0, 0.0);
// 粒子边缘的颜色
snowEmitter.shadowColor = [[UIColor whiteColor] CGColor];
// 添加粒子
snowEmitter.emitterCells = @[snowflake];
// 将粒子Layer添加进图层中
[self.view.layer addSublayer:snowEmitter];
}
烟花动画：
- (void)createFire{
self.view.backgroundColor = [UIColor blackColor];
//创建粒子
CAEmitterLayer *fireworksEmitter = [CAEmitterLayer layer];
//取个坐标系
CGRect viewBounds = self.view.layer.bounds;
// 粒子发射位置
fireworksEmitter.emitterPosition = \
CGPointMake(viewBounds.size.width/2.0, viewBounds.size.height);
// 周围发射大小
fireworksEmitter.emitterSize = CGSizeMake(viewBounds.size.width/2.0, 0.0);
// 周围发射角度
fireworksEmitter.emitterMode = kCAEmitterLayerOutline;
//常用的产生粒子模式 三种kCAEmitterLayerPoint 点 kCAEmitterLayerLine线 kCAEmitterLayerRectangle 矩形
fireworksEmitter.emitterShape = kCAEmitterLayerLine;
fireworksEmitter.renderMode = kCAEmitterLayerAdditive;
//用于初始化随机数生成的
fireworksEmitter.seed = (arc4random()%100)+1;
// Create the rocket
CAEmitterCell * rocket = [CAEmitterCell emitterCell];
rocket.birthRate = 10;//每秒产生120个粒子
rocket.emissionRange = 0.25 * M_PI; // //随机方向 -pi/4 --- pi/4
rocket.velocity = 380; //初始速度
rocket.velocityRange = 100; //随机速度 -200+380 --- 200+380
rocket.yAcceleration = 75; //给Y方向一个加速度
rocket.lifetime = 1.02; // 存活1.02秒
rocket.contents = (id) [[UIImage imageNamed:@"DazRing"] CGImage];
rocket.scale = 0.2;
rocket.color = [[UIColor redColor] CGColor];
rocket.greenRange = 1.0;
rocket.redRange = 1.0; //三个随机颜色
rocket.blueRange = 1.0;
rocket.spinRange = M_PI; // slow spin
// the burst object cannot be seen, but will spawn the sparks
// we change the color here, since the sparks inherit its value
CAEmitterCell *burst = [CAEmitterCell emitterCell];
burst.birthRate = 1.0; // at the end of travel
burst.velocity = 0; //初始速度
burst.scale = 2.5; //
burst.redSpeed =-1.5; // 颜色变化效果
burst.blueSpeed =+1.5; // 颜色变化效果
burst.greenSpeed =+1.0; // 颜色变化效果
burst.lifetime = 0.35; //存活0.35秒
// and finally, the sparks
CAEmitterCell* spark = [CAEmitterCell emitterCell];
spark.birthRate = 400; //每秒产生400个粒子
spark.velocity = 125; //初始速度
spark.emissionRange = 2* M_PI; //随机方向 360 度
spark.yAcceleration = 75; // gravity
spark.lifetime = 3; //存活3秒
spark.contents = (id) [[UIImage imageNamed:@"snow"] CGImage];
spark.scaleSpeed =-0.2; //逐渐变小
spark.greenSpeed =-0.1;
spark.redSpeed = 0.4; //三种随机色
spark.blueSpeed =-0.1;
spark.alphaSpeed =-0.25; //逐渐消失
spark.alphaRange = 0.75; //随机透明度
spark.spin = 2* M_PI;
spark.spinRange = 2* M_PI;
// 全部加起来
fireworksEmitter.emitterCells = [NSArray arrayWithObject:rocket];
rocket.emitterCells = [NSArray arrayWithObject:burst];
burst.emitterCells = [NSArray arrayWithObject:spark];
[self.view.layer addSublayer:fireworksEmitter];
}
基础动画CABasicAnimation:
继承于CAPropertyAnimation,一下介绍几个常见的熟悉
keyPath 动画方式，fromValue 从 toValue 到 repeatCount执行动画的次数，duration持续时间 ,autoreverses是否自动发转
//先初始化一个imageView
self.heart = [[UIImageView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];
self.heart.image = [UIImage imageNamed:@"4458.jpg"];
[self.view addSubview:self.heart];
//实例化动画
CABasicAnimation * animation = [CABasicAnimation animation];
//缩放动画
//设置缩放属性
animation.keyPath = @"transform.scale";
animation.toValue = @0.1;//缩到0.1
animation.fromValue = @0.5;//从0.5开始缩
//设置动画的其他属性
//设置动画的执行次数 MAXFLOAT 无线循环
animation.repeatCount = MAXFLOAT;
//设置动画自动发转，怎么去，怎么回
animation.autoreverses = YES;
//设置动画的执行时长
animation.duration = 0.25;
//添加动画到层上
[self.heart.layer addAnimation:animation forKey:nil];
//旋转动画
//设置缩放属性
animation.keyPath = @"transform.rotation";
animation.toValue = @(M_PI * 2);
//设置动画重复次数
animation.repeatCount = MAXFLOAT;
//设置动画执行时间
animation.duration = 1;
//添加动画到layer
//添加动画到层上
[self.heart.layer addAnimation:animation forKey:nil];
//平移动画
//keyPath可设置为x，y，z在对应方向平移或者直接写成transform.translation，在x和y方向同时平移
animation.keyPath = @"transform.translation.x";
animation.fromValue = @(-CGRectGetWidth(self.heart.bounds));
animation.toValue = @(CGRectGetWidth(self.heart.bounds));
//设置动画重复次数
animation.repeatCount = MAXFLOAT;
//设置动画执行时间
animation.duration = 1;
//添加动画到layer
[self.heart.layer addAnimation:animation forKey:nil];
关键帧动画CAKeyframeAnimation:
是CApropertyAnimation的子类，跟CABasicAnimation的区别是：CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue)，而CAKeyframeAnimation会使用一个NSArray保存这些数值
属性解析：
values：就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内，依次显示values数组中的每一个关键帧
path：可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path，那么values将被忽略
keyTimes：可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的
说明：CABasicAnimation可看做是最多只有2个关键帧的CAKeyframeAnimation
//先初始化一个imageView
self.iv = [[UIImageView alloc] initWithFrame:CGRectMake(50, 100, 200, 200)];
[self.view addSubview:self.iv];
self.iv.image = [UIImage imageNamed:@"4458.jpg"];
CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
// 1. 抖动幅度
//anim.values = @[@(angle2Rad(-3)),@(angle2Rad(3)),@(angle2Rad(-3))];
// 2. 抖动幅度还可以使用path
anim.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 5, 5)].CGPath;
anim.duration = 2;//抖动时间
//把抖动效果的原点由图片的中心点改成 左上角
self.iv.layer.anchorPoint = CGPointZero;
anim.keyPath = @"transform.rotation";//旋转 anim.repeatCount = MAXFLOAT;
[self.iv.layer addAnimation:anim forKey:nil];
还可以根据手势移动：
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
// 获取手指的触摸点
CGPoint curP = [touch locationInView:self.iv];
// 创建路径
UIBezierPath *path = [UIBezierPath bezierPath];
_path = path;
//设置起点
[path moveToPoint:curP];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
//获取手指的触摸点
CGPoint curP = [touch locationInView:self.iv];
[_path addLineToPoint:curP];
[self.view setNeedsDisplay];
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
//给imageView 添加核心动画
CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
anim.keyPath = @"position";
anim.path = _path.CGPath;
anim.duration = 2;
anim.repeatCount = MAXFLOAT;
[self.iv.layer addAnimation:anim forKey:nil];
}
- (void)drawRect:(CGRect)rect
{ //划线
[_path stroke];
} `
#define angle2Rad(angle) ((angle) / 180.0 * M_PI)
@property (nonatomic,strong) UIBezierPath *path;
@property (nonatomic,strong)UIImageView *iv;
@property (nonatomic,strong)UIImageView *heart;
形变 CATransform3D:
CATransform3D是一个用于处理3D形变的类,其可以改变控件的平移、缩放、旋转、斜交等,其坐标系统采用的是三维坐标系,即向右为x轴正方向,向下为y轴正方向,垂直屏幕向外为z轴正方向。在CALayer中有一个transform属性便是专门用来控制3D形变的，
CATransform3D MakeTranslation (CGFloat tx, CGFloat ty, CGFloat tz);
//CATransform3DMakeTranslation实现以初始位置为基准,在x轴方向上平移x单位,在y轴方向上平移y单位,在z轴方向上平移z单位
####平移动画####
[UIView animateWithDuration:0.6 animations:^{
iv.layer.transform = CATransform3DMakeTranslation(100, 100, 0);
}];
####缩放####
CATransform3D MakeScale (CGFloat sx, CGFloat sy, CGFloat sz);
//CATransform3DMakeScale实现以初始位置为基准,在x轴方向上缩放x倍,在y轴方向上缩放y倍,在z轴方向上缩放z倍
[UIView animateWithDuration:0.6 animations:^{
iv.layer.transform = CATransform3DMakeScale(2, 0.5, 1);
}];
####旋转####
CATransform3D MakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z);
// CATransform3DMakeRotation实现以初始位置为基准,在x轴,y轴,z轴方向上逆时针旋转angle弧度(弧度=π/180×角度,M_PI弧度代表180角度),x,y,z三个参数只分是否为0
[UIView animateWithDuration:0.6 animations:^{
iv.layer.transform = CATransform3DMakeRotation(M_PI*0.25, 0, 0, 1);
}];
####恢复####
transform属性默认值为CATransform3DIdentity,可以在形变之后设置该值以还原到最初状态
iv.layer.transform = CATransform3DIdentity;