IOS fireworks effect, layer gradient, layer reflection effect. CAEmitterLayer particle Transmitter

IOS fireworks effect, layer gradient, layer reflection effect. CAEmitterLayer particle Transmitter
IOS fireworks effect, layer gradient, layer reflection effect. CAEmitterLayer particle Transmitter

In the previous section, I wrote a class related to the view layer. The usage and usage of the CALayer class mean that we need to modify its layer when processing the view, there are also some points to note, as well as the introduction of the anchor. This article mainly describes how to use a class in CALayer to implement a special effect of fireworks.

This is an effect produced by using the CAEmitterLayer particle transmitter layer. This dynamic tool is also recommended by the following friends. The effect is very good for mac addresses, it refers to the effect of transmitting some particles (cells) through a single Emission Point.
You can use this layer to "launch" some cells, add different cells, set the direction, speed, and so on. It is also a subclass inherited from CALayer, all of them are processing the layer of the view and bring their own animation effects, not to mention the code.

 @interface ViewController () @property (nonatomic ,strong)CAEmitterLayer *emitterLayer; @end - (CAEmitterLayer *)emitterLayer{      if (_emitterLayer) {         return _emitterLayer;     }      _emitterLayer = [[CAEmitterLayer alloc]init];      [self.view.layer addSublayer:_emitterLayer]; //    _emitterLayer.position = CGPointMake(200, 200);     return _emitterLayer;  }

An initial particle transmitter object is added to the parent view.

// Set the center point to the center point of the parent view, self. emitterLayer. emitterPosition = self. view. center; self. view. backgroundColor = [UIColor blackColor]; // first, set the attributes of the particle transmitter. // set the number of particles sent by the particle transmitter per second. self. emitterLayer. birthRate = 2; // set the style self of the particle transmitter. emitterLayer. renderMode = kCAEmitterLayerAdditive; // initialize the cell CAEmitterCell * cell to be transmitted = [CAEmitterCell emitterCell]; // contents: the content cell of the particle. contents = (id) [UIImage imageNamed: @ ""]. CGImage; // The type of the expected object is similar to that of the layer. // set the cell attributes. // set the particle birth cell. birthRate = 2; // survival time cell. lifetime = 3; cell. lifetimeRange = 1; // sets the particle sending speed cell. velocity = 50; cell. velocityRange = 30; // the direction of the particle sending to the cell. emissionLatitude = 90 * M_PI/180; // The acceleration cell of the sent particle. yAcceleration =-100; // range of emitted particles-> radian cell. emissionRange = 180 * M_PI/180; // Add the cell of the particle to the particle transmitter array to add multiple cell objects self. emitterLayer. emitterCells = @ [cell];

It will automatically generate particles (layers) for us and then automatically add effects through the attributes we give it,The emitted particle is not a View, but a display layer on the layer.

Next, we will introduce the attributes of the transmitter and cell.

1. Particle transmitter Layer
-CAEmitterLayer: Transmitter
-Number of particles sent per second: birthRate

Sending shape style: emitterShape

-CA_EXTERN NSString * const alert point-CA_EXTERN NSString * const alert line-CA_EXTERN NSString * const alert cube-CA_EXTERN NSString * const alert curve-CA_EXTERN NSString * const kCAEmitterLayerSphere circle

Sent style: emitterMode // start with line 120

-CA_EXTERN NSString * const defaults to the point style-CA_EXTERN NSString * const kCAEmitterLayerOutline style-CA_EXTERN NSString * const kCAEmitterLayerSurface in the form of-CA_EXTERN NSString * const limit in the group style

Particle Appearance style: renderMode // click to enter the first line to start

-CA_EXTERN NSString * const contains the last generated particle in the First-CA_EXTERN NSString * const contains the last-CA_EXTERN NSString * const kCAEmitterLayerBackToFront to put the following on-CA_EXTERN NSString * const kCAEmitterLayerAdditive overlay Effect

Add the particle: emitterCells to the particle transmitter.

Cell attributes

Indicates that the particle is: CAEmitterCell, which is not a Layer contents: Particle Content lifetime: survival time lifetimeRange: survival time range birthRate: number of particles generated per second emissionLatitude: the dimension that emits is a radian up/down emissionlongdegree: the longitude of the message to be sent-> the Radian-> the left/right velocity: the farther the transmission speed is faster-> the power velocityRange: transmission speed range: xAcceleration; x, y, z axis acceleration inertial force yAcceleration; zAcceleration; emissionRange: emission range-> radians-> range name: particle name you can find the particle by name

Then we add a cell to set different properties.

CAEmitterCell * cell2 = [CAEmitterCell emitterCell]; cell2.contents = (id) [UIImage imageNamed: @ ""]. CGImage; // particle birth rate cell2.birthRate = 4; // survival time cell2.lifetime = 3; cell2.lifetimeRange = 1; // set the particle sending speed cell2.velocity = 80; cell2.velocityRange = 50; // The Particle sending direction is cell2.emissionLatitude = 90 * M_PI/180; // the acceleration of the particle sending is cell2.yAcceleration =-100; // range of the emitted particle-> radian cell2.emissionRange = 180 * M_PI/180; // Add the cell of the particle to the particle transmitter // reset the emitterCellsself of the cell. emitterLayer. emitterCells = @ [cell, cell2];

For the effect, the birth volume and initial speed of the red dot are set to a greater value. When the acceleration is the same, the emission range is the same. The larger the initial speed, the larger the cell2 offset. You can try different styles by yourself, such as the rendering effect of the transmitter.

Then there is a layer gradient effect

2. gradient color
CAGradientLayer

We can see that the color of this layer is composed of three colors of gradient, the more the center, the heavier the color, the closer the edge color, the lighter the background effect is very good, here, we also use CAGradientLayer, a subclass of CALayer. <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4NCjxwcmUgY2xhc3M9 "brush: java;"> CAGradientLayer * layer = [CAGradientLayer]; layer. frame = self. view. frame; // sets the color array layer. colors = @ [(id) [UIColor colorWithRed: 1.000 green: 0.377 blue: 0.624 alpha: 1.000]. CGColor, (id) [UIColor colorWithRed: 0.597 green: 1.000 blue: 0.657 alpha: 1.000]. CGColor, (id) [UIColor colorWithRed: 0.649 green: 0.729 blue: 1.000 alpha: 1.000]. CGColor];

Here I set three colors to make a gradient effect in these three colors. All layer attributes can be used.

// Layer. opacity = 0.7; // set the transparency to see the background image, which looks like a starting layer of a filter // gradient. startPoint = CGPointMake (0, 0); // terminate the vertex layer. endPoint = CGPointMake (1, 1); // ratio of the color of the gradient interval. The first is in the second place, and the second is in the fifth place, the third one is in the position // layer. locations = @ [0.2, 0.5, 0.8]; [self. view. layer addSublayer: layer];

When I set the starting point to the upper left corner and the ending point to the lower right corner, it becomes such an effect. This effect is very good for processing layers. It is equivalent to the filter effect, but the two are still different. The filter adds a special effect to the image. This is to add a special effect to the layer.

This class only has so many attributes, it is relatively simple to use, and the effect is quite good.

Next we will talk about the effect of a reflection, similar to the special effect of an image.

3. Copy the CAReplicatorLayer

Copying a layer means copying this layer and adding effects to it to make some transform changes.

To copy a layer, you must overwrite the view layerClass to change the original CALayer to CAReplicatorLayer.

To use a view of CAReplicatorLayer, you must override its layerClass method to copy the layer using CAReplicatorLayer.

First look at the effect

We can see that it is an image on the source image layer, and the color or something is relatively light. Of course, this is all the effect of the image we have given it (copying. The following describes how to use it.

1. Override the layerClass METHOD OF THE VIEW
????????????
First, we create a class for UIView and rewrite its method. The first step is very important. If we do not rewrite this method, the initialization of the view will not be effective.

First, define a class and name it CanReplicatorView.

Then rewrite his method in. M.

// Only this step can be used to copy the layer above the view. // to assign values to the layer of the view, you must overwrite the layerClass + (Class) layerClass {return [CAReplicatorLayer class] of the view.}

2. initialize the view

CanReplicatorView * repView = [[CanReplicatorView alloc] initWithFrame: CGRectMake (100,100,100,100)];

// Add a view to display the image
UIImageView * imageView = [[UIImageView alloc] initWithFrame: CGRectMake (0, 0,200,200)];
ImageView. contentMode = UIViewContentModeScaleAspectFit;
ImageView. image = [UIImage imageNamed: @ "tu longdao"];

3. initialize the copy Layer

CAReplicatorLayerLayer = (CAReplicatorLayer) RepView. layer;

// Define attributes for the copy Layer
// InstanceCount the number of instanceCount layers must be explicitly copied.
Layer. instanceCount = 2; // write a 2 copy and copy it. In addition, the source image has two copies.

4. Set the transform value for the copy View

// InstanceTransform indicates that the style Transform of the copy layer is the style of the original view.
// Define a transform value that allows the view to pan down 400.
CATransform3D transform = CATransform3DMakeTranslation (0,400, 0 );
// Make the view 400 lower and rotate 180 degrees down to form a reflection
Layer. instanceTransform = CATransform3DRotate (transform, 180 * M_PI/180, 1, 0, 0 );

// You can also set the offset transparency of the color.
Layer. instanceRedOffset =-0.2; // red offset
Layer. instanceBlueOffset =-0.2; // blue
Layer. instanceGreenOffset =-0.2; // green
Layer. instanceAlphaOffset =-0.4; // transparency offset

5. Add a view
[Self. view addSubview: repView];
// Add the view of the displayed image to our view that can use the copy layer.
[RepView addSubview: imageView];

Through these three effects, the view can have various effects. We only change layers, not view attributes, and add some special effects to their layers, it makes the view more beautiful when used, and also provides some Processing Effects in iOS.