CAEmitterLayerとCAEmitterCellについて

About Caemitterlayer

今日は、開発におけるCAEmitterLayer（パーティクルジェネレーター）の使用について見ていきます。

まず、CAEmitterLayerパーティクルジェネレーター

1. CAEmitterLayerはCALayerのサブクラスであり、CAEmitterCellとともに使用して、さまざまなアニメーション効果を作成できます。

2、CAEmitterLayerは、主にCoreAnimationベースのパーティクルジェネレータシステムを実装するために使用されます。

3.パーティクルシステムでは、CAEmitterLayerがパーティクルの放出を担当します（もちろん、パーティクルはパーティクルを放出することもできます）。これらのいわゆる粒子はCAEmitterCellです。 CAEmitterLayerとCAEmitterCellコンテナを比較できます。これは、設定によって異なります。スタイルは引き続きパーティクルを生成します。これがCAEmitterCellです。

4. CAEmitterLayerは、パーティクルが放出されるジオメトリを決定します。この幾何学的特徴には、位置、形状、およびサイズが含まれます。レンダリング関連の機能もいくつかあります。他のいくつかの属性は、CAEmitterLayerとCAEmiiterCellの両方です。 CAEmitterLayerのこれらの属性は、CAEmitterCellの同じ属性の係数として使用されます。

たとえば、CAEmitterCellのライフタイムが2で、CAEmitterLayerのライフタイムが3の場合、他のパラメーターにデフォルト値が選択されていると、CAEmitterCellのライフタイムは2 * 3 = 6秒になります。 6秒後、CAEmitterCellはパーティクルシステムから削除されます。

5. CAEmitterCellは、速度、加速度、放出範囲、色など、パーティクル自体のいくつかの特性を決定します。これらの属性のほとんどは、値の範囲と組み合わされた「中間値」によって表されます。

たとえば、velocityとvelocityRangeです。 CAEmitterCellの初速度が速度±velocityRangeであることを示します。

次に、CAEmitterLayerのプロパティ

CAEmitterLayerクラスは、コアとしてのパーティクルエミッタシステムのアニメーションを提供します。これらのパーティクルは、CAEmitterCellの場所、打ち上げの形状など、CAEmitterCellの打ち上げの詳細の一部を管理するマネージャーとして機能するCAEmitterCellの例です。

/* @interface CAEmitterLayer : CALayer -- an array of particles set the set particles into an array and set them to the layer @property(nullable, copy) NSArray*emitterCells -- Particle generation coefficient, default 1.0 multiply the yield of each cell by the particle generation coefficient to get the number of particles created per second. That is: cell.birthRate is multiplied by layer.birthRate = number of particles per second @property float birthRate -- The lifetime factor of the particle, the default 1.0 is: (cell.lifetime multiplied by layer.lifetime) is equal to the life cycle of the particle @property float lifetime -- Location of the source center point Default (0,0) @property CGPoint emitterPosition -- position on the z axis @property CGFloat emitterZPosition -- is the size of the source, not the size of the layer @property CGSize emitterSize －－ @property CGFloat emitterDepth - The shape of the source is circular, square, etc. From what shape the particle is emitted, it does not represent the particle's own shape. kCAEmitterLayerPoints Point mode, the emitter emits particles in a point situation. kCAEmitterLayerOutline outline, that is, the entire border is the launch point, that is, the border is launched kCAEmitterLayerSurface area for throwing kCAEmitterLayerVolume volume, which is within the volume of the 3D graphics @property(copy) NSString *emitterShape -- divergent form kCAEmitterLayerPoint The shape of the point, the shape of the source is a point, kCAEmitterLayerLine The shape of the line, the shape of the source is a line, and the position is in the middle of the horizontal direction of the rect. kCAEmitterLayerRectangle is rectangular, and the source is a rectangle. kCAEmitterLayerCuboid is a three-dimensional rectangular shape. The emission source is a solid rectangle. If it is to be effective, you need to set the data in the z direction. If it is not set, it will be the same as the rectangle. kCAEmitterLayerCircle A circular shape, the emission source is a circle, the shape is a rectangle wrapped in a circle, two-dimensional kCAEmitterLayerSphere is a three-dimensional circle with a three-dimensional circle. It also needs to set the z-direction data. @property(copy) NSString *emitterMode --Drawing mode kCAEmitterLayerUnordered particles appear out of order, multiple sources will be mixed kCAEmitterLayerOldestFirst declares that the long-lasting particles will be rendered at the top kCAEmitterLayerOldestLast young particles will be rendered at the top kCAEmitterLayerBackToFront The rendering of particles is performed in the order of the Z axis. kCAEmitterLayerAdditive for particle blending @property(copy) NSString *renderMode -- Whether to show the effect on the z-axis. If the layer is deformed for 3d, such as 90 degrees along the y-axis, there will be obvious stereoscopic effects. @property BOOL preservesDepth - Particle velocity coefficient, the default 1.0 emission velocity and the velocity property of the cell together determine the velocity of the particle. The velocity of the particle is the product of the two. And the speed property of the cell is different. This property can be negative (cell.velocity multiplied by layer.velocity) equal to the speed of the particle. When it is negative, the direction of divergence is in the opposite direction, and the timing is in the specified direction. @property float velocity -- the scale factor of the particle, the default 1.0 scale size and the same speed. The scale value of the particle is the multiplication of the cell.scale multiplied by layer.scale) is equal to the scale of the particle. @property float scale -- Self-rotating speed factor, default 1.0 cell.spin multiplied by layer.spin) equals the spin rate of the particle @property float spin -- Random number setting seed @property unsigned int seed */

第三に、属性のCAEmitterCell部分

CAEmitterCellは、粒子放出システムの粒子です。 CAEmitterCellを使用して、必要な粒子のスタイル、画像、色、方向、動き、スケーリング、およびライフサイクルを定義します。

/* @interface CAEmitterCell : NSObject --particle creation + (instancetype)emitterCell --Get values ​​based on the key + (nullable id)defaultValueForKey:(NSString *)key -- Whether to archive key values - (BOOL)shouldArchiveValueForKey:(NSString *)key -- the name of the particle, default nil. @property(nullable, copy) NSString *name -- Is it allowed to be drawn? @property(getter=isEnabled) BOOL enabled --Generate rate default 0 @property float birthRate -- The life cycle is in seconds. Both default 0 @property float lifetime -- the maximum value of the offset of the absolute value of the life cycle @property float lifetimeRange - the angle of the emission angle in the z-axis direction, the angle of latitude represents the angle between the x-z plane and the x-axis, the default of both 0 @property CGFloat emissionLatitude - the angle of the launch angle in the xy plane, the longitude angle represents the angle between the x-y plane and the x axis @property CGFloat emissionLongitude -- surrounding firing angle, default 0 @property CGFloat emissionRange -- Radiation speed both default 0 @property CGFloat velocity --speed offset @property CGFloat velocityRange -- Speed ​​increments on three axes can make a gravity-like blow effect default 0 @property CGFloat xAcceleration @property CGFloat yAcceleration @property CGFloat zAcceleration --Scale value @property CGFloat scale -- the offset of the scaled value @property CGFloat scaleRange - The zoom speed is unclear. How to set it may be related to the velocity attribute. @property CGFloat scaleSpeed --Rotate @property CGFloat spin -- the offset of the rotation @property CGFloat spinRange --Set the color of the cell content The color will affect the actual color default white @property(nullable) CGColorRef color -- Set the value of the three primary colors and transparency offset 0-1 @property float redRange @property float greenRange @property float blueRange @property float alphaRange -- Discoloration rate @property float redSpeed @property float greenSpeed @property float blueSpeed @property float alphaSpeed The content of --cell is generally UIImage @property(nullable, strong) id contents --Content range default (0,0,1,1) @property CGRect contentsRect --Content scaling @property CGFloat contentsScale - Filter parameters used when rendering 'content' images. @property(copy) NSString *minificationFilter @property(copy) NSString *magnificationFilter @property float minificationFilterBias --- Particle emission particles @property(nullable, copy) NSArray *emitterCells @property(nullable, copy) NSDictionary *style */

要約すると、さまざまな必要なレンダリングをemitterShapeおよびemitterModeと組み合わせることができます。

第四に、関連する例

1. WeChatドロップ式の模倣：

snow.gif

コード：

- (void)snowAnimation { CAEmitterLayer *snowEmitter = [CAEmitterLayer layer] //The location of the landing area snowEmitter.frame = self.view.bounds / / Add to the parent view Layer [self.view.layer addSublayer:snowEmitter] / / Specify the location of the source snowEmitter.emitterPosition = CGPointMake(self.view.bounds.size.width / 2.0, -10) / / specify the size of the source snowEmitter.emitterSize = CGSizeMake(self.view.bounds.size.width, 0.0) / / specify the shape and mode of the source level snowEmitter.emitterShape = kCAEmitterLayerLine snowEmitter.emitterMode = kCAEmitterLayerOutline snowEmitter.renderMode = kCAEmitterLayerOldestFirst / / Create CAEmitterCell CAEmitterCell *snowflake = [CAEmitterCell emitterCell] //How many times per second snowflake.birthRate = 10.0 //survival time snowflake.lifetime = 50.0 //Initial speed, because the animation is a falling effect, so we only need to set its acceleration in the y direction. snowflake.velocity = 10 //Initial speed range snowflake.velocityRange = 5 //Acceleration in the y-axis direction snowflake.yAcceleration = 30 // The angle of emission that is spread out in a cone. The angle is in radians. The particles are evenly distributed within this conical range. snowflake.emissionRange = 5 / / Set the landing picture snowflake.contents = (id) [[UIImage imageNamed:@'love'] CGImage] //Image scaling snowflake.scale = 0.5 //Start animation snowEmitter.emitterCells = [NSArray arrayWithObject:snowflake] }

2、花火のレンダリング

yanhua.gif

コード：

- (void)fireWorkAnimation{ _emitterLayer = [CAEmitterLayer layer] //Source _emitterLayer.emitterPosition = CGPointMake(self.view.frame.size.width / 2.0, self.view.frame.size.height - 50) //Source size _emitterLayer.emitterSize = CGSizeMake(50, 0) //Source mode _emitterLayer.emitterMode = kCAEmitterLayerOutline //Source shape _emitterLayer.emitterShape = kCAEmitterLayerLine //Render mode _emitterLayer.renderMode = kCAEmitterLayerAdditive // launch direction _emitterLayer.velocity = 1 / / Generate the number of particles _emitterLayer.seed = (arc4random() % 100 ) + 1 CAEmitterCell *cell = [CAEmitterCell emitterCell] / / generated speed lv cell.birthRate = 1.0 // launch angle cell.emissionRange = 0.11 * M_PI //speed cell.velocity = 300 //range cell.velocityRange = 150 //y acceleration cell.yAcceleration = 75 //survival time cell.lifetime = 2.04 //cell content cell.contents = (__bridge id _Nullable)([UIImage imageNamed:@'FFRing'].CGImage) //scaling ratio cell.scale = 0.2 // particle color cell.color = [[UIColor colorWithRed:0.6 green:0.6 blue:0.6 alpha:1.0] CGColor] // The range in which a particle's color green can change cell.greenRange = 1.0 // The range in which a particle's color red can change cell.redRange = 1.0 // The range of the color blue of a particle can change cell.blueRange = 1.0 // sub-rotation angle range cell.spinRange = M_PI // Explosion CAEmitterCell *burst = [CAEmitterCell emitterCell] // particle generation coefficient burst.birthRate = 1.0 // speed burst.velocity = 0 // scaling ratio burst.scale = 2.5 // shifting the speed of the particle red in the life cycle burst.redSpeed = -1.5 // shifting the speed of the particle blue in the life cycle burst.blueSpeed = +1.5 // shifting the speed of the particle green in the life cycle burst.greenSpeed = +1.0 //The life cycle burst.lifetime = 0.35 // spark and finally, the sparks CAEmitterCell *spark = [CAEmitterCell emitterCell] // particle generation coefficient, the default is 1.0 spark.birthRate = 400 //speed spark.velocity = 125 // 360 deg / / around the angle of emission spark.emissionRange = 2 * M_PI // acceleration component in the gravity//y direction spark.yAcceleration = 75 //particle life cycle spark.lifetime = 3 / / Is a CGImageRef object, both the image to be displayed spark.contents = (id) [[UIImage imageNamed:@'FFTspark'] CGImage] / / scaling speed spark.scaleSpeed = -0.2 //The speed at which particle green changes during its life cycle spark.greenSpeed = -0.1 / / particle red change speed in the life cycle spark.redSpeed = 0.4 //The speed at which the particle blue changes during the life cycle spark.blueSpeed = -0.1 //The speed of particle transparency changes during the life cycle spark.alphaSpeed = -0.25 //sub-rotation angle spark.spin = 2* M_PI // sub-rotation angle range spark.spinRange = 2* M_PI self.emitterLayer.emitterCells = [NSArray arrayWithObject:cell] cell.emitterCells = [NSArray arrayWithObjects:burst, nil] burst.emitterCells = [NSArray arrayWithObject:spark] [self.view.layer addSublayer:self.emitterLayer] }

デモ： Github