iOS - QuartzCore


 

QuartzCore


     

      說起QuartzCore不知道有多少小伙伴很容易和Quartz2D、CoreGraphics等混淆在一起傻傻分不清楚?所以在下面我們先把這幾個很容易混淆或者是分不清楚的框架稍加整理。

      1. Quartz2D是CoreGraphics的一部分API的抽象,不是實際存在的.framework 

      2. CoreGraphics定義了顏色、位置、字體、路徑、圖片等UIKit的常見屬性。是構成UIKit的基石。

      3. QuartzCore里面的類以CA開頭,就像CG開頭的一般都是CoreGraphics框架里面的一樣,我們留一個基本的印象,以后遇到可以區分它屬於那個框架。

      QuartzCore這個框架也許在一些同行的印象中以為就是 Layer +  Path 也就是用來 “畫畫”的,其實這個框架里面的東西當仔細研究的時候還是很龐大的,就像我們以前有說過的 AVFoundation 一樣的,這篇文章的主要目就是下面這一段內容,簡單的介紹一下QuartzCore里面的東西,然后你知道它里面的東西都是用來干什么的,當你要具體的了解里面的東西的時候你需要看什么文章。

      下面的內容就是先告訴你這個類是用來干什么的,然后當你要具體了解里面的東西的時候有一些學習連接給你去了解:

    

 import Foundation

 import QuartzCore.CoreAnimation       

 import QuartzCore

 import QuartzCore.CAAnimation               ///  龐大的動畫架構 

 import QuartzCore.CABase

 import QuartzCore.CADisplayLink             ///  一個類似於定時器的link

 import QuartzCore.CAEAGLLayer               ///   用來顯示任意的OpenGL圖形

 import QuartzCore.CAEmitterCell             ///   粒子動畫 https://www.jianshu.com/p/9fa8bc02117c

 import QuartzCore.CAEmitterLayer            ///   粒子動畫 Emitter發射器

 import QuartzCore.CAGradientLayer           ///   漸變使用

 import QuartzCore.CALayer

 import QuartzCore.CAMediaTiming             ///    所有的動畫框架都遵守這個協議

 import QuartzCore.CAMediaTimingFunction

 import QuartzCore.CAMetalLayer              ///   https://www.jianshu.com/p/ee163fc050e4     https://developer.apple.com/documentation/quartzcore/cametallayer

 import QuartzCore.CAReplicatorLayer         ///  重復執行某個操作的layer

 import QuartzCore.CAScrollLayer             ///  CAScrollLayer提供了和UIScrollView的基本功能。只不過它是layer,只負責顯示,不響應用戶事件,也不提供滾動條。

 import QuartzCore.CAShapeLayer              ///  形狀Layer

 import QuartzCore.CATextLayer               ///  它以圖層的形式包含了UILabel幾乎所有的繪制特性,並且額外提供了一些新的特性。 https://www.jianshu.com/p/df115ffc1076

 import QuartzCore.CATiledLayer              ///  CATiledLayer為載入大圖造成的性能問題提供了一個解決方案  https://www.jianshu.com/p/ee0628629f92

 import QuartzCore.CATransaction             ///  CATransaction是 Core Animation 中的事務類  https://www.jianshu.com/p/5e02a8a56cc5

 import QuartzCore.CATransform3D             ///  https://www.jianshu.com/p/3dd14cfbdc53

 import QuartzCore.CATransformLayer

 import QuartzCore.CAValueFunction

 

      上面的連接和文字說明就大致說了QuartzCore里面的類都是用來干什么的,然后在下面着了一個我不怎么熟悉的CAEmitterLayer來寫一個簡單的粒子動畫吧。

     

 CAEmitterLayer 粒子動畫


 

      拿其中的這個我們寫一個簡單的粒子動畫,在QuartzCore里面別的Layer應該是使用的比較多的,比如像 CAGradientLayer、CAReplicatorLayer、CAShapeLayer這幾個我們平常還是在使用的,但這個CAEmitterLayer我還真的見得比較少,然后就看了一下它的一些具體的使用,總結寫了一個動畫,動畫的效果如下圖所示:

 

      下面是上面這個效果的代碼,里面擁戴的都加了注釋:

import Foundation
import UIKit

class PPEmitterButton: UIControl {
    
    let emitterName = "emitterButton"
    
    ///  給外部讀取按鈕的狀態
    var buttonSelected: Bool{
        set(newValue) {
            self.chose = newValue
        }
        get{
            return self.chose
        }
    }
    
    var normalImage  :UIImage?
    var selectedImage:UIImage?
    var effectlImage :UIImage?
    /// 記錄按鈕狀態
    private var chose :Bool = false
    
    lazy var imageView: UIImageView = {
        
        let imageView = UIImageView()
        imageView.isUserInteractionEnabled = true
        imageView.image = self.normalImage
        
        let tap =  UITapGestureRecognizer.init(target: self, action: #selector(imageViewTap))
        imageView.addGestureRecognizer(tap)
        return imageView
    }()
    
    
    lazy var emitterLayer: CAEmitterLayer = {
        
        let emitterLayer = CAEmitterLayer()
        /// 設置發射源的形狀
        emitterLayer.emitterShape = .circle
        /// 設置發射的模式
        emitterLayer.emitterMode  = .outline
        /// 設置粒子cells
        emitterLayer.emitterCells = [self.emitterCell]
        
        return emitterLayer
    }()
    
    
    lazy var emitterCell: CAEmitterCell = {
        
        let emitterCell  = CAEmitterCell()
        /// 設置粒子
        emitterCell.name = emitterName
        /// 設置粒子速度
        emitterCell.velocity = 40
        /// 設置粒子范圍
        emitterCell.velocityRange = 70
        /// 設置粒子參數的速度乘數因子
        emitterCell.birthRate  = 0
        /// 設置粒子生命周期
        emitterCell.lifetime   = 1.0
        /// 設置粒子透明度在生命周期內的改變速度
        emitterCell.alphaSpeed = -1
        /// 設置粒子要展現的圖片,是個 CGImageRef 的對象
        emitterCell.contents = self.effectlImage?.cgImage
        
        return emitterCell
    }()
    
    convenience init(frame: CGRect, andNormalImage normalImage:String,
                                    andSelectedImage selectedImage:String,
                                    andEffectImage effectlImage:String) {
        
        self.init(frame:frame)
        self.normalImage   = UIImage(named: normalImage)
        self.selectedImage = UIImage(named: selectedImage)
        self.effectlImage  = UIImage(named: effectlImage)

        addSubViews()
    }
    
    func addSubViews() {
        
        imageView.frame = self.bounds
        self.addSubview(self.imageView)
        
        emitterLayer.emitterPosition = CGPoint(x: self.frame.width/2.0, y: self.frame.height/2.0)
        emitterLayer.emitterSize = CGSize(width: self.frame.width, height: self.frame.height)
        self.layer.addSublayer(self.emitterLayer)
    }
    
    /// 點擊事件
    @objc func imageViewTap() {
        
        self.chose = !self.chose
        self.setCurrentImage()
        imageView.bounds = CGRect.zero
        UIView.animate(withDuration: 0.25, delay: 0, options: .curveLinear , animations: {
            
            self.imageView.bounds = self.bounds
            if(self.chose) {
                
                /// 這里我們設置的是粒子的擴散動畫,注意下面這個keyPath
                /// emitterCells  是cells
                /// emitterButton 是粒子的名稱
                /// birthRate
                let baseAnimation = CABasicAnimation.init(keyPath: "emitterCells.emitterButton.birthRate")
                baseAnimation.fromValue = NSNumber.init(value: 200)
                baseAnimation.toValue   = NSNumber.init(value: 0)
                baseAnimation.duration  = 0;
                baseAnimation.timingFunction  = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeOut)
                /// 添加動畫 Key就是粒子名稱 (這個自己設定)
                self.emitterLayer.add(baseAnimation, forKey: "HHHHHHH")
            }
        }, completion: nil)
        
    }
    
    /// 設置圖片
    func setCurrentImage() {
        
        if self.chose {
            imageView.image = selectedImage
        }else{
            imageView.image = normalImage
        }
    }
}

 

總結


 

      通過上面的東西你可以簡單的認識一下 QuartzCore,總的來說就是區分清楚  QuartzCore、CoreGraphics 甚至和CoreImage框架的區分等,這樣一扯就扯遠了 再比如說到CoreImage那你就還得和GPUImage一起了解一下,看一下他們之間的區別聯系和結合使用等等,這些知識可能都不是我們經常會使用到的東西,但這些真的才是重要的知識點呀,多多學習多多提高我們的能力。

      CoreImage和GPUImage的結合使用

      傻傻分不清:Quartz2D、QuartzCore、CoreAnimation、CoreImage、CoreGraphics

      Quartz2D簡介


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM