版本记录
版本号 | 时间 |
---|---|
V1.0 | 2017.12.13 |
前言
如果你细看了我前面写的有关动画的部分,就知道前面介绍了
CoreAnimation
、序列帧以及LOTAnimation
等很多动画方式,接下来几篇我们就以动画示例为线索,进行动画的讲解。相关代码已经上传至GitHub - 刀客传奇。感兴趣的可以看我写的前面几篇。
1. 动画示例(一) —— 一种外扩的简单动画
2. 动画示例(二) —— 一种抖动的简单动画
3. 动画示例(三) —— 仿头条一种LOTAnimation动画
功能要求
利用CAEmitterLayer
实现下雪的动画。
功能实现
首先我们看一下这个类的API。
/* CoreAnimation - CAEmitterLayer.h
Copyright (c) 2007-2017, Apple Inc.
All rights reserved. */
/* Particle emitter layer.
*
* Each emitter has an array of cells, the cells define how particles
* are emitted and rendered by the layer.
*
* Particle system is affected by layer's timing. The simulation starts
* at layer's beginTime.
*
* The particles are drawn above the backgroundColor and border of the
* layer. */
#import <QuartzCore/CALayer.h>
@class CAEmitterCell;
NS_ASSUME_NONNULL_BEGIN
CA_CLASS_AVAILABLE (10.6, 5.0, 9.0, 2.0)
@interface CAEmitterLayer : CALayer
/* The array of emitter cells attached to the layer. Each object must
* have the CAEmitterCell class. */
@property(nullable, copy) NSArray<CAEmitterCell *> *emitterCells;
/* The birth rate of each cell is multiplied by this number to give the
* actual number of particles created every second. Default value is one.
* Animatable. */
@property float birthRate;
/* The cell lifetime range is multiplied by this value when particles are
* created. Defaults to one. Animatable. */
@property float lifetime;
/* The center of the emission shape. Defaults to (0, 0, 0). Animatable. */
@property CGPoint emitterPosition;
@property CGFloat emitterZPosition;
/* The size of the emission shape. Defaults to (0, 0, 0). Animatable.
* Depending on the `emitterShape' property some of the values may be
* ignored. */
@property CGSize emitterSize;
@property CGFloat emitterDepth;
/* A string defining the type of emission shape used. Current options are:
* `point' (the default), `line', `rectangle', `circle', `cuboid' and
* `sphere'. */
@property(copy) NSString *emitterShape;
/* A string defining how particles are created relative to the emission
* shape. Current options are `points', `outline', `surface' and
* `volume' (the default). */
@property(copy) NSString *emitterMode;
/* A string defining how particles are composited into the layer's
* image. Current options are `unordered' (the default), `oldestFirst',
* `oldestLast', `backToFront' (i.e. sorted into Z order) and
* `additive'. The first four use source-over compositing, the last
* uses additive compositing. */
@property(copy) NSString *renderMode;
/* When true the particles are rendered as if they directly inhabit the
* three dimensional coordinate space of the layer's superlayer, rather
* than being flattened into the layer's plane first. Defaults to NO.
* If true, the effect of the `filters', `backgroundFilters' and shadow-
* related properties of the layer is undefined. */
@property BOOL preservesDepth;
/* Multiplies the cell-defined particle velocity. Defaults to one.
* Animatable. */
@property float velocity;
/* Multiplies the cell-defined particle scale. Defaults to one. Animatable. */
@property float scale;
/* Multiplies the cell-defined particle spin. Defaults to one. Animatable. */
@property float spin;
/* The seed used to initialize the random number generator. Defaults to
* zero. Each layer has its own RNG state. For properties with a mean M
* and a range R, random values of the properties are uniformly
* distributed in the interval [M - R/2, M + R/2]. */
@property unsigned int seed;
@end
/** `emitterShape' values. **/
CA_EXTERN NSString * const kCAEmitterLayerPoint
CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerLine
CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerRectangle
CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerCuboid
CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerCircle
CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerSphere
CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
/** `emitterMode' values. **/
CA_EXTERN NSString * const kCAEmitterLayerPoints
CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerOutline
CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerSurface
CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerVolume
CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
/** `renderMode' values. **/
CA_EXTERN NSString * const kCAEmitterLayerUnordered
CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerOldestFirst
CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerOldestLast
CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerBackToFront
CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerAdditive
CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
NS_ASSUME_NONNULL_END
下面我们就看一下代码
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) CAEmitterLayer *fireEmitterLayer;
@end
@implementation ViewController
#pragma mark - Override Base Function
- (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [UIColor blackColor];
//下雪的动画
[self beginSnow];
}
#pragma mark - Object Private Function
- (void)beginSnow
{
CAEmitterLayer *snowEmitterLayer = [CAEmitterLayer layer];
snowEmitterLayer.frame = self.view.bounds;
[self.view.layer addSublayer:snowEmitterLayer];
//指定发射源的位置
snowEmitterLayer.emitterPosition = CGPointMake(self.view.bounds.size.width / 2, -10);
//指定发射源的大小
snowEmitterLayer.emitterSize = CGSizeMake(self.view.bounds.size.width, 0.0);
//指定发射源的形状 和 模式
snowEmitterLayer.emitterShape = kCAEmitterLayerLine;
snowEmitterLayer.emitterMode = kCAEmitterLayerOutline;
//创建CAEmitterCell
CAEmitterCell *snowCell = [CAEmitterCell emitterCell];
//每秒多少个
snowCell.birthRate = 3.0;
//存活时间
snowCell.lifetime = 100.0;
//初速度 因为动画属于落体效果,所以我们只需要设置它在 y 方向上的加速度就行了。
snowCell.velocity = 10;
//初速度范围
snowCell.velocityRange = 5;
//y方向的加速度
snowCell.yAcceleration = 3;
snowCell.emissionRange = 0;
snowCell.contents = (id)[[UIImage imageNamed:@"snow"] CGImage];
//缩小
snowCell.scale = 0.3;
snowEmitterLayer.emitterCells = [NSArray arrayWithObject:snowCell];
}
@end
功能效果
下面我们就看一下功能效果。
后记
未完,待续~~~