內(nèi)容層動(dòng)畫(layer層 Core Animation 核心動(dòng)畫)

核心動(dòng)畫簡(jiǎn)介:
核心動(dòng)畫直接作用于layer層晶默;在后臺(tái)線程執(zhí)行谨娜,不阻塞主線程


2FD30689-8D35-4B86-AB3A-5FCBD7BC65C1.png

一磺陡、CABasicAnimation (針對(duì)layer的屬性進(jìn)行動(dòng)畫效果)
1、位置動(dòng)畫:

override func viewWillAppear(_ animated: Bool) {
       super.viewWillAppear(animated)
       let animation:CABasicAnimation = CABasicAnimation()
       animation.keyPath = "position"
       animation.duration = 2;
       //下面代碼表示動(dòng)畫結(jié)束后坞靶,保持結(jié)束時(shí)的狀態(tài)
       animation.fillMode = CAMediaTimingFillMode.forwards
       animation.isRemovedOnCompletion = false
       animation.toValue = NSValue(cgPoint: CGPoint(x: 300, y: 600))
       layer?.add(animation, forKey: nil)
   }

其他屬性與上面一樣蝴悉,只要把要做的動(dòng)畫屬性賦值給 animation.duration 即可


0B03AE1D-168C-4382-9315-295D6C410158.png

CAB3D1BA-6CD9-41F9-8D7B-5273E9D90CB5.png

二、CAKeyframeAnimation 關(guān)鍵幀動(dòng)畫類
1尿这、屬性介紹:values : 一系列位置信息庆杜; keyTimes : 默認(rèn)是均勻播放的,取值范圍:0-1叨橱;
path : 繪制動(dòng)畫路徑
2断盛、介紹下 淡入淡出動(dòng)畫

  class ViewController: UIViewController {
    var myView:UIView?
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.white
        let myV = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
        myV.center = view.center
        myV.backgroundColor = UIColor.blue
        view.addSubview(myV)
        myView = myV;

        let animation:CAKeyframeAnimation = CAKeyframeAnimation()
        animation.duration = 10
        animation.keyPath = "opacity"
        let values:[NSNumber] = [NSNumber(value: 0.95),NSNumber(value: 0.90),NSNumber(value: 0.85),NSNumber(value: 0.80),
        NSNumber(value: 0.75),NSNumber(value: 0.70),NSNumber(value: 0.65),NSNumber(value: 0.60),NSNumber(value: 0.50),NSNumber(value: 0.40),NSNumber(value: 0.30),NSNumber(value: 0.20)]
        
        animation.values = values
        animation.fillMode = CAMediaTimingFillMode.forwards
        animation.isRemovedOnCompletion = false
        myV.layer.add(animation, forKey: nil)
    }
}

其他屬性動(dòng)畫類似,修改values和keypath 即可

3栖博、任意路徑動(dòng)畫

  let animation:CAKeyframeAnimation = CAKeyframeAnimation()
        animation.duration = 10
        let path = CGMutablePath()
        path.move(to: CGPoint(x: 40, y: 40))
        path.addLine(to: CGPoint(x: 300, y: 300))
        path.addLine(to: CGPoint(x: 40, y: 600))
        animation.path = path
        animation.keyPath = "position";
        animation.fillMode = CAMediaTimingFillMode.forwards
        animation.isRemovedOnCompletion = false
        myV.layer.add(animation, forKey: nil)

4厢洞、 CAAnimationGroup 組合動(dòng)畫介紹

       let ca1 = CABasicAnimation(keyPath:"transform.rotation")
       ca1.toValue = Double.pi
        let scale = CABasicAnimation(keyPath: "transform.scale")
        scale.toValue = 0.1
        let move = CABasicAnimation(keyPath: "transform.translation")
        move.toValue = NSValue(cgPoint: view.center)
        let animaGroup = CAAnimationGroup()
        animaGroup.animations = [ca1,scale,move]
        animaGroup.duration = 6
        animaGroup.fillMode = CAMediaTimingFillMode.forwards
        animaGroup.isRemovedOnCompletion = false
        myV.layer.add(animaGroup, forKey: nil)

三躺翻、綜合案例的實(shí)現(xiàn)
1、水紋按鈕動(dòng)畫效果的實(shí)現(xiàn)
主要分成胰腺癌5個(gè)主要模塊
1)UIBUtton的坐標(biāo)獲取
2)Draw 圓形繪制模塊
3)定時(shí)器刷新
4)其他模塊
5)調(diào)用模塊
代碼如下:代碼主要在自定義button中實(shí)現(xiàn)

import UIKit
class MyButton: UIButton {
    var timer:Timer?
    var touchPoint:CGPoint?
    var viewRadius:CGFloat = 0
    var targetAnimationColor:UIColor = UIColor(red: 216.0/255.0, green: 114.0/255.0, blue: 213.0/255.0, alpha: 0.8)
    
    var countNum:Int = 0
    
    override init(frame: CGRect) {
        super.init(frame:frame)
        backgroundColor = UIColor(red: 50.0/255.0, green: 185.0/255.0, blue: 170.0/255.0, alpha: 1.0)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    //此處禁用按鈕點(diǎn)擊事件踊淳,獲取點(diǎn)擊位置,
    func starButtonAnimation(send:UIButton,event:UIEvent) {
        isUserInteractionEnabled = false;
        let button:UIView = send as UIView
        let touchSet:NSSet = event.touches(for: button)! as NSSet
        var touchArray:[AnyObject] = touchSet.allObjects as [AnyObject]
        let touch1:UITouch = touchArray[0] as! UITouch
        let point:CGPoint = touch1.location(in: button)
        touchPoint = point
        timer = Timer.scheduledTimer(timeInterval: 0.2, target: send, selector: #selector(timeaction), userInfo: nil, repeats: true)
        
        RunLoop.main.add(timer!, forMode: RunLoop.Mode.common)
        
        
    }
    //定時(shí)器方法脱茉,定時(shí)刷新上下重新繪制
    @objc func timeaction() {
        countNum += 1
        let dismissTime:DispatchTime = DispatchTime.now() + Double(bitPattern: 0*NSEC_PER_SEC)
        DispatchQueue.main.asyncAfter(deadline: dismissTime) {
            self.viewRadius += 4
            self.setNeedsDisplay()
        }
        if countNum>70 {
            countNum = 0
            viewRadius = 0
            timer?.invalidate()
            DispatchQueue.main.asyncAfter(deadline: dismissTime) {
                self.viewRadius = 0
                self.setNeedsDisplay()
            }
            self.isUserInteractionEnabled = true
        }
    }
    //繪制圓
    override func draw(_ rect: CGRect) {
        let ctx:CGContext = UIGraphicsGetCurrentContext()!
        let endAngle:CGFloat = CGFloat(Double.pi*2)
        ctx.addArc(center: touchPoint ?? center, radius:viewRadius , startAngle: 0, endAngle: endAngle, clockwise: false)
        let stockColor:UIColor = targetAnimationColor
        stockColor.setStroke()
        stockColor.setFill()
        ctx.fillPath()
    }
}
//以上為自定義按鈕的實(shí)現(xiàn)內(nèi)用琴许,下面我控制器內(nèi)使用的代碼
class ViewController: UIViewController {
    var myView:UIView?
    var image:UIImageView?
    var myBtn:MyButton?
    override func viewDidLoad() {
        super.viewDidLoad()
        let mBtn:MyButton = MyButton(frame: CGRect(x: 0, y: 0, width: 200, height: 100))
        view.addSubview(mBtn)
        mBtn.center = view.center
        myBtn = mBtn
        mBtn.backgroundColor = UIColor.yellow
        mBtn.setTitle("登錄", for: UIControl.State.normal)
        mBtn.addTarget(self, action: #selector(buttonClick(_:event:)), for: UIControl.Event.touchUpInside)
    
    }
    @objc  func buttonClick(_ sender:UIButton,event:UIEvent) {
        let  bt:MyButton = sender as! MyButton
        bt.starButtonAnimation(send: sender, event: event)
        
    }
}

四榜田、CAShapeLayer 主要用于各種圖形繪制(如柱狀圖锻梳、餅狀圖、股票的K線圖等等)
都是基于貝濟(jì)埃曲線繪制辩块,首先來了解什么是貝濟(jì)埃曲線
1荆永、貝濟(jì)埃曲線,它是依據(jù)四個(gè)位置任意點(diǎn)的坐標(biāo)繪制出一條光滑的曲線(如四個(gè)頂點(diǎn)A滔以、B氓拼、C抵碟、D,其中A為繪制起點(diǎn),D為終點(diǎn)拟逮,在A處設(shè)置一條曲線敦迄,保證曲線的切剛好經(jīng)過B,同時(shí)在D出設(shè)置一條曲線罚屋,剛好保證曲線經(jīng)過C點(diǎn))
2、貝濟(jì)埃曲線的使用步驟:
1)創(chuàng)建一個(gè)貝濟(jì)埃曲線對(duì)象(UIBezierPath)
2) 設(shè)置曲線的各種屬性:顏色撕彤、線條粗細(xì)等
3)設(shè)置曲線起始點(diǎn)
4)開始繪制
3猛拴、UIBezierPath 的屬性介紹
1)線條寬度 lineWidth
2) 線條拐角 lineCapStyle (設(shè)置線條首位形狀的)
lineJoinStyle 用于設(shè)置兩條線段銜接處的

 func drawLine() {
        //設(shè)置路徑
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 20, y: 40))
        path.addLine(to: CGPoint(x: 200, y: 200))
        path.addLine(to: CGPoint(x: 40, y: 400))
        path.lineCapStyle = CGLineCap.round
        path.close()
        //開始繪畫
        let shapeLayer = CAShapeLayer()
        shapeLayer.lineWidth = 10
        shapeLayer.lineCap = .round
        shapeLayer.lineJoin = .round
        shapeLayer.strokeColor = UIColor.red.cgColor
        shapeLayer.fillColor = UIColor.yellow.cgColor
        shapeLayer.path = path.cgPath
        view.layer.addSublayer(shapeLayer)
    }

     4、繪制動(dòng)態(tài)圖表
        1)折線圖
        import UIKit
class MyChartLine: UIView {
    var charLine:CAShapeLayer = CAShapeLayer()
    var pathAnimation:CABasicAnimation = CABasicAnimation()
    init(frame: CGRect,path:UIBezierPath) {
        super.init(frame: frame)
        backgroundColor = UIColor.white
        clipsToBounds = true
        charLine.lineCap = .round
        charLine.lineJoin = .round
        charLine.fillColor = UIColor.white.cgColor
        charLine.strokeColor = UIColor.green.cgColor
        charLine.lineWidth = 3
       //這個(gè)屬性設(shè)置是為了职员,讓線不是一次性繪畫完成
        charLine.strokeEnd = 0.0
        charLine.path = path.cgPath
        layer.addSublayer(charLine)
        pathAnimation.keyPath = "strokeEnd"
        pathAnimation.timingFunction = CAMediaTimingFunction(name:CAMediaTimingFunctionName.linear)
        pathAnimation.fromValue = 0.0
        pathAnimation.toValue = 1.0
        pathAnimation.autoreverses = false
        pathAnimation.duration = 5
        pathAnimation.fillMode = CAMediaTimingFillMode.forwards
        pathAnimation.isRemovedOnCompletion = false
        
        charLine.add(pathAnimation, forKey: nil)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

以上代碼廉邑,是用于折線的view的內(nèi)部代碼,實(shí)現(xiàn)了line和動(dòng)畫糙箍,外界只要傳個(gè)路徑就可以

import UIKit
class MyController1: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.white
        let path:UIBezierPath = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: 500))
        path.addLine(to: CGPoint(x: 40, y: 60))
        path.addLine(to: CGPoint(x: 140, y: 300))
        path.addLine(to: CGPoint(x: 190, y: 290))
        path.addLine(to: CGPoint(x: 240, y: 360))
        path.addLine(to: CGPoint(x: 290, y: 180))
        path.addLine(to: CGPoint(x: 360, y: 60))
        let myLine:MyChartLine = MyChartLine(frame: CGRect(x:0, y: 500, width: UIScreen.main.bounds.size.width, height: 400), path: path)
        view.addSubview(myLine)
    }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末牵祟,一起剝皮案震驚了整個(gè)濱河市诺苹,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌收奔,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,378評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件棘利,死亡現(xiàn)場(chǎng)離奇詭異乾戏,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)念祭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門粱坤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人枚驻,你說我怎么就攤上這事蜒什。” “怎么了?”我有些...
    開封第一講書人閱讀 152,702評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵铃拇,是天一觀的道長(zhǎng)沈撞。 經(jīng)常有香客問我,道長(zhǎng)显晶,這世上最難降的妖魔是什么壹士? 我笑而不...
    開封第一講書人閱讀 55,259評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮唯笙,結(jié)果婚禮上盒使,老公的妹妹穿的比我還像新娘。我一直安慰自己少办,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評(píng)論 5 371
  • 文/花漫 我一把揭開白布挽放。 她就那樣靜靜地躺著鞋拟,像睡著了一般惹资。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上猴誊,一...
    開封第一講書人閱讀 49,036評(píng)論 1 285
  • 那天侮措,我揣著相機(jī)與錄音,去河邊找鬼澄成。 笑死,一個(gè)胖子當(dāng)著我的面吹牛墨状,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播列赎,決...
    沈念sama閱讀 38,349評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼镐确,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了诗越?” 一聲冷哼從身側(cè)響起息堂,我...
    開封第一講書人閱讀 36,979評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎感耙,沒想到半個(gè)月后持隧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,469評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡只酥,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評(píng)論 2 323
  • 正文 我和宋清朗相戀三年呀狼,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片绝编。...
    茶點(diǎn)故事閱讀 38,059評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡貌踏,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出逗堵,到底是詐尸還是另有隱情眷昆,我是刑警寧澤汁咏,帶...
    沈念sama閱讀 33,703評(píng)論 4 323
  • 正文 年R本政府宣布作媚,位于F島的核電站,受9級(jí)特大地震影響轰驳,放射性物質(zhì)發(fā)生泄漏弟灼。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評(píng)論 3 307
  • 文/蒙蒙 一勤哗、第九天 我趴在偏房一處隱蔽的房頂上張望掩驱。 院中可真熱鬧芒划,春花似錦欧穴、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至俊犯,卻和暖如春伤哺,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背默责。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來泰國(guó)打工桃序, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留烂瘫,地道東北人奇适。 一個(gè)月前我還...
    沈念sama閱讀 45,501評(píng)論 2 354
  • 正文 我出身青樓芦鳍,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親柠衅。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容