不要急,不要怕

iOS动画学习,持续更新ing...

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<UITouch *> *)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;