Today mainly through the implementation of a music playback state of the display bar, there is a point like the animation effect, to see CAReplicatorLayer, CAEmitterLayer and CAGradientLayer these three special layer.

I’m going to do it the same way, but let’s see what it looks like.

Play designator.gif

Thumb up animation


Gradient. GIF

1.CAReplicatorLayer

The CAReplicatorLayer is designed to efficiently generate many similar layers. It draws sublayers of one or more layers and applies different transformations to each copy. What do you mean? See how many lines are going up and down in this example? Actually, I didn’t write that many rules, just one. Add this to the CAReplicatorLayer copy layer and automatically generate the remaining bars based on the Settings.

Play designator.gif

1.1 Step 1: Write a layer and copy the rest

letlayer = CALayer.init() layer.frame = CGRect.init(x: 0, y: 0, width: 10, height: 70) layer.backgroundColor = uicolor.white.cgcolor layer.anchorPoint = cgPoint.init (x: 0.5, y: 0.5) layer. The add (self. ScaleYAnimation (),forKey: "scaleAnimation")

    fileprivate func scaleYAnimation() -> CABasicAnimation{
        let anim = CABasicAnimation.init(keyPath: "transform.scale.y")
        anim.toValue = 0.1
        anim.duration = 0.4
        anim.autoreverses = true
        anim.repeatCount = MAXFLOAT
        return anim

    }Copy the code

There’s nothing wrong with that? Basically, you set up a CALayer, you set the frame, you set the anchor point, you set the background color, you add up and down animation.

Wait, why is the background color white? Isn’t white invisible? Don’t worry, the answer will be revealed in step 2.

1.2 Step 2: Use CAReplicatorLayer for replication

/ / set. Duplicate the layer containing the number of sub-layer replicatorLayer instanceCount = 6 / son/set relative to the previous layer offset replicatorLayer. InstanceTransform = CATransform3DMakeTranslation (45, 0, 0)/son/set relative to the previous layer of delay time replicatorLayer. InstanceDelay = 0.2 / / set the color of layer, (premise is to set the background color of layer, If the background color is not set, it is transparent by default, and setting this property will have no effect. ReplicatorLayer. InstanceColor = UIColor. Green. CgColor / / color gradient, relative to the previous layer gradient (1 ~ + 1). There are three kinds of RGB color, so it is red, blue and green. ReplicatorLayer. InstanceGreenOffset = 0.2 replicatorLayer. InstanceRedOffset = 0.2 replicatorLayer. InstanceBlueOffset = -0.2 // Need to add the sub-layer to the copy layer, Duplicate the layer according to the front. Set the parameters of the automatic replication replicatorLayer addSublayer (layer) / / will be copied to join the view layer to show the inside layer. AddSublayer (replicatorLayer)Copy the code

See? Why is the background color of the base layer white? The final effect is really replicatorLayer. The instanceColor = UIColor. Green. CgColor. That’s it. That’s it. That’s it.

1.3 CAReplicatorLayer Properties

In order to be able to see the meanings between the attributes, a second copy layer is added. The second replication layer modifies the replication anchors, the number of replicates, and the offset of replicates. Let’s look at the differences between the two copy layers.

Indicator 2. GIF



    open var instanceCount: Int
    open var preservesDepth: Bool
    open var instanceDelay: CFTimeInterval
    open var instanceTransform: CATransform3D
    open var instanceColor: CGColor?
    open var instanceRedOffset: Float
    open var instanceGreenOffset: Float
    open var instanceBlueOffset: Float
    open var instanceAlphaOffset: FloatCopy the code

There are nine properties, right? Let’s see what it means.

  • InstanceCount: The number of times a layer is copied, including all its sublayers. The default value is 1, i.e. no sublayers are copied.

  • PreservesDepth: If set to YES, the layer will remain similar in nature to the CATransformLayer with the same limitations

  • InstanceDelay: Sets the delay time of the child layer relative to the previous layer
  • InstanceTransform: Sets the offset of the child layer relative to the previous layer
  • InstanceColor: Set the color of the layer, (the premise is to set the background color of the layer, if the background color is not set, the default is transparent, setting this property will not work.
  • InstanceRedOffset, instanceGreenOffset, instanceBlueOffset: The gradient of the color relative to the gradient of the previous layer (value -1 +1).RGB has three colors, so there are also green, red, and blue.
  • InstanceAlphaOffset: Gradient relative to previous layer transparency.

2. CAEmitterLayer

CAEmitterLayer is a high performance particle engine that is used to create real-time example animations such as smoke, fire, rain, etc. The CAEmitterLayer looks like a container for many Caemittercells that define an example effect.

In layman’s terms, for example, rain is made up of a lot of little raindrops. Each drizzle is the CAEmitterCell, and the CAEmitterLayer controls the drizzle. We don’t have to worry too much about cell creation and destruction, as long as the parameters are set, the system will do it for us.

Let’s go through a “like” animation to see how it works. The results are as follows:

Thumb up animation

2.1 Step 1: Create a thumb button

Create a button with selected and normal images. Write the trigger event. There’s nothing to explain here, just click on it to change the state.

@ibAction func priaseBtnClick(_ sender: UIButton) {sender.isselected =! sender.isSelected }Copy the code

2.2 Step 2: Customize button

In order to animate a button, you need to customize the button. Therefore, we need to rewrite the initialization method of the button and the method of changing the state of the button.

Swift overwrite method format is not the same as OC, need to pay attention to.

Var isSelected: Bool{didSet{explosionAni()}} CGRect) { explosionLayer = CAEmitterLayer.init() super.init(frame: frame) setupExplosion() } required init? (coder aDecoder: NSCoder) { explosionLayer = CAEmitterLayer.init() super.init(coder: aDecoder) setupExplosion() // fatalError("init(coder:) has not been implemented")}Copy the code

2.3 Create a single element of the dots around the likes via CAEmitterCell

Basically, CAEmitterCell uses all of its attributes, and we will continue to add the rest below.

    let explosionCell = CAEmitterCell.init()
        explosionCell.name = "explosion"AlphaRange = 0.10 alphaSpeed = -1.0 // The life cycle of the particle ExplosionCell. Lifetime = 0.7 / / particle life cycle of the range explosionCell. LifetimeRange = 0.3 / / particle emission velocity explosionCell birthRate = 2500 / / particle velocity explosionCell. Velocity = 40.00 / / particle velocity range explosionCell. VelocityRange = 10.00 / / particle explosionCell scaling. The scale = ScaleRange = 0.02 // The image to display explosionCell.contents = UIImage(named:"sparkle")? .cgImageCopy the code

2.4 Set CAEmitterLayer to control the cell

        explosionLayer.name = "explosionLayer". / / the shapes of the emission source explosionLayer emitterShape = kCAEmitterLayerCircle / / launch mode explosionLayer emitterMode = KCAEmitterLayerOutline / / source size explosionLayer emitterSize = CGSize. Init (width: 10, height: 0) / / source contains particles explosionLayer emitterCells = [explosionCell] / / rendering mode explosionLayer renderMode = kCAEmitterLayerOldestFirst explosionLayer.masksToBounds =falsePosition = cgPoint. init(x: frame.sie.width /2, y: frame.size.height/2) explosionLayer.zPosition = -1 layer.addSublayer(explosionLayer)Copy the code

2.5 Setting animation parameters

The animation here is basically just a CAKeyframeAnimation, very simple. CAKeyFrame Animation and CAAnimation Group.

2.6 Attributes of the CAEmitterLayer

Basically all the properties are used in this particle, and the only ones that need to be looked up in the manual are the following enumerations.

EmitterShape values. EmitterShape @available(iOS 5.0, *) publicletKCAEmitterLayerPoint: String // @available(iOS 5.0, *) publicletKCAEmitterLayerLine: String @available(iOS 5.0, *) publicletKCAEmitterLayerRectangle: the String / / rectangular @ the available public (iOS 5.0. *)letKCAEmitterLayerCuboid: String // rectangle @available(iOS 5.0, *) publicletKCAEmitterLayerCircle: String // circle @available(iOS 5.0, *) publicletKCAEmitterLayerSphere: String // sphere // emitterMode values. Available (iOS 5.0, *) publicletKCAEmitterLayerPoints: String @available(iOS 5.0, *) publicletKCAEmitterLayerOutline: String // Outline @available(iOS 5.0, *) publicletKCAEmitterLayerSurface: String @available(iOS 5.0, *) publicletKCAEmitterLayerVolume: String // renderMode values. Render mode @available(iOS 5.0, *) publicletKCAEmitterLayerUnordered: the String / / out-of-order @ the available public (iOS 5.0. *)letKCAEmitterLayerOldestFirst: the String / / the oldest first out @ the available public (iOS 5.0. *)letKCAEmitterLayerOldestLast: the String / / the oldest last out @ the available public (iOS 5.0. *)letKCAEmitterLayerBackToFront: before and after the String / / reverse @ the available public (iOS 5.0. *)letKCAEmitterLayerAdditive: String // AdditiveCopy the code

Don’t memorize them. Don’t memorize them. Just look it up when you use it.

3. CAGradientLayer

The CAGradientLayer is used to generate smooth gradients of two or more colors. It is also possible to copy a CAGradientLayer with Core Graphics and draw the contents to a normal layer’s host diagram, but the real benefit of CAGradientLayer is the hardware acceleration used for drawing. The implementation effect is as follows:

Gradient. GIF

    func createGradientLayer(){gradientLayer = CagradientLayer.init () gradientLayer.frame = view.bounds // Sets the color group. Here the five colors gradientlayer.colors = are set: black, blue, orange, red, and green [UIColor.black.cgColor,UIColor.blue.cgColor,UIColor.orange.cgColor,UIColor.red.cgColor,UIColor.green.cgColor] // Gradientlayer. startPoint = CGPoint(x: 0.0, y: 0.0) GradientLayer. endPoint = CGPoint(x: 1.0, y: 1.0) gradientLayer. endPoint = CGPoint(x: 1.0, y: 1.0) gradientLayer. endPoint = CGPoint(x: 1.0, y: 1.0) gradientLayer. endPoint = CGPoint(x: 1.0, y: 1.0) Gradientlayer. Locations = [0.1,0.5,0.7,0.75,0.95] GradientLayer.Copy the code

The source code for swift and OC can be downloaded here. Git.oschina.net/atypical/mu…

— — — — — — — — — — — — — — — — — — — — — — — luxuriant line, iOS animation series complete link — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — the first paper: iOS one of animation series: Learn the principles of CALayer and perspective in action. 2: iOS Animation series 2: Learn the principles of CALayer and Perspective through combat. Animate a clock with a time, minute and second hand. Includes OC and Swift two kinds of source code (next) chapter 3: iOS Animation series three: Core Animation. This section introduces the common properties and methods of Core Animation. CABasic Animation CABasic Animation iOS Animation series 4: Basic Animation translation IOS Animation Series 6: Using CABasic Animation to complete the login interface with drawing effects. IOS Animation Series 7: Implementing twitter-like startup Animation Using CAShapeLayer to draw dynamic flow diagrams iOS Animation Series 9: Achieve the like of the animation and play the ups and downs indicator 10: The Actual Series: Draw roller coaster scenes