小知識六添诉、CALayer動畫

CAShapeLayer 圓形指示器

   let ovalShapeLayer: CAShapeLayer = CAShapeLayer()
   let anotherOvalShapeLayer: CAShapeLayer = CAShapeLayer()

   override func viewDidLoad() {
       super.viewDidLoad()
       loadingIndicator()
       beginSimpleAnimation()
       
       complexLoadingIndicator()
       complexAnimations()
   }
   
   // MARK: - 簡單的加載指示器
   func loadingIndicator() {
       ovalShapeLayer.strokeColor = UIColor.white.cgColor
       ovalShapeLayer.fillColor = UIColor.clear.cgColor
       ovalShapeLayer.lineWidth = 7
       let ovalRadius = loadingView.bounds.size.height / 2.0 * 0.8
       ovalShapeLayer.path = UIBezierPath(ovalIn: CGRect(x: loadingView.frame.size.width/2 - ovalRadius, y: loadingView.frame.size.height/2 - ovalRadius, width: ovalRadius * 2, height: ovalRadius * 2)).cgPath
       ovalShapeLayer.strokeEnd = 0.4
       ovalShapeLayer.lineCap = kCALineCapRound
       loadingView.layer.addSublayer(ovalShapeLayer)
   }
   
   func beginSimpleAnimation() {
       let rotate = CABasicAnimation(keyPath: "transform.rotation")
       rotate.duration = 1.5
       rotate.fromValue = 0
       rotate.toValue = 2 * M_PI
       rotate.repeatCount = HUGE
       rotate.speed = 1
       loadingView.layer.add(rotate, forKey: nil)
       //loadingView.layer.anchorPoint = CGPoint(x: 0, y: 0)
   }
   
   // MARK: - 復雜的加載提示
   func complexLoadingIndicator() {
       anotherOvalShapeLayer.strokeColor = UIColor.white.cgColor
       anotherOvalShapeLayer.fillColor = UIColor.clear.cgColor
       anotherOvalShapeLayer.lineWidth = 3
       
       let anotherOvalRadius = complexLoadingView.frame.size.height/2 * 0.8
       anotherOvalShapeLayer.path = UIBezierPath(ovalIn: CGRect(x: complexLoadingView.frame.size.width/2 - anotherOvalRadius, y: complexLoadingView.frame.size.height/2 - anotherOvalRadius, width: anotherOvalRadius * 2, height: anotherOvalRadius * 2)).cgPath
       anotherOvalShapeLayer.lineCap = kCALineCapRound
       
       complexLoadingView.layer.addSublayer(anotherOvalShapeLayer)
   }
   
   func complexAnimations() {
       let strokeStartAnimate = CABasicAnimation(keyPath: "strokeStart")
       strokeStartAnimate.fromValue = -0.5
       strokeStartAnimate.toValue = 1
       
       let strokeEndAnimate = CABasicAnimation(keyPath: "strokeEnd")
       strokeEndAnimate.fromValue = 0.0
       strokeEndAnimate.toValue = 1
       
       let strokeAnimateGroup = CAAnimationGroup()
       strokeAnimateGroup.duration = 1.5
       strokeAnimateGroup.repeatCount = HUGE
       strokeAnimateGroup.animations = [strokeStartAnimate, strokeEndAnimate]
       anotherOvalShapeLayer.add(strokeAnimateGroup, forKey: nil)
   }

CAReplicatorLayer

/*CAReplicatorLayer是一個新面孔,它也是CALayer的子類,正如它的名稱一樣赵讯,CAReplicatorLayer可以對它自己的子Layer進行復制操作盈咳。
*/

    // MARK: - 正在播放音樂或廣播動畫
    func firstReplicatorAnimation() {
        
        let replicatorLayer = CAReplicatorLayer()
        replicatorLayer.bounds = CGRect(x: replicatorAnimationView.frame.origin.x, y: replicatorAnimationView.frame.origin.y, width: replicatorAnimationView.frame.size.width, height: replicatorAnimationView.frame.size.height)
        replicatorLayer.anchorPoint = CGPoint(x: 0, y: 0)
        replicatorLayer.backgroundColor = UIColor.clear.cgColor
        replicatorLayer.instanceCount = 3 // 設置三份
        replicatorLayer.instanceTransform = CATransform3DMakeTranslation(40, 0, 0) // 設置間隔
        replicatorLayer.instanceDelay = 0.3
        replicatorLayer.masksToBounds = true

        replicatorAnimationView.layer.addSublayer(replicatorLayer)
        
        
        let rectangle = CALayer()
        rectangle.bounds = CGRect(x: 0, y: 0, width: 30, height: 90)
        rectangle.anchorPoint = CGPoint(x: 0, y: 0)
        rectangle.position = CGPoint(x: replicatorAnimationView.frame.origin.x + 10, y: replicatorAnimationView.frame.origin.y + 110)
        rectangle.cornerRadius = 2
        rectangle.backgroundColor = UIColor.white.cgColor
        replicatorLayer.addSublayer(rectangle)
        
        let moveRectangle = CABasicAnimation(keyPath: "position.y")
        moveRectangle.toValue = rectangle.position.y - 70
        moveRectangle.duration = 0.7
        moveRectangle.autoreverses = true
        moveRectangle.repeatCount = HUGE
        rectangle.add(moveRectangle, forKey: nil)
    }
    
    func activityIndicatorAnimation() {
        
        let replicatorLayer = CAReplicatorLayer()
        replicatorLayer.bounds = CGRect(x: 0, y: 0, width: activityIndicatorView.frame.size.width, height: activityIndicatorView.frame.size.height)
        replicatorLayer.position = CGPoint(x: activityIndicatorView.frame.size.width/2, y: activityIndicatorView.frame.size.height/2)
        replicatorLayer.backgroundColor = UIColor.clear.cgColor
        
        
        replicatorLayer.instanceCount = 15
        let angle = CGFloat(2 * M_PI) / CGFloat(15)
        replicatorLayer.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1)
        replicatorLayer.instanceDelay = 1/15
        activityIndicatorView.layer.addSublayer(replicatorLayer)
        
        
        let circle = CALayer()
        circle.bounds = CGRect(x: 0, y: 0, width: 15, height: 15)
        circle.position = CGPoint(x: activityIndicatorView.frame.size.width/2, y: activityIndicatorView.frame.size.height/2 - 55)
        circle.cornerRadius = 7.5
        circle.backgroundColor = UIColor.white.cgColor
        circle.transform = CATransform3DMakeScale(0.01, 0.01, 0.01)
        replicatorLayer.addSublayer(circle)
        
        
        let scale = CABasicAnimation(keyPath: "transform.scale")
        scale.fromValue = 1
        scale.toValue = 0.1
        scale.duration = 1
        scale.repeatCount = HUGE
        circle.add(scale, forKey: nil)
    }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末甚带,一起剝皮案震驚了整個濱河市瘟则,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌沟突,老刑警劉巖组底,帶你破解...
    沈念sama閱讀 211,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件丈积,死亡現(xiàn)場離奇詭異,居然都是意外死亡债鸡,警方通過查閱死者的電腦和手機江滨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,347評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來厌均,“玉大人唬滑,你說我怎么就攤上這事」妆祝” “怎么了晶密?”我有些...
    開封第一講書人閱讀 157,435評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長模她。 經(jīng)常有香客問我稻艰,道長,這世上最難降的妖魔是什么缝驳? 我笑而不...
    開封第一講書人閱讀 56,509評論 1 284
  • 正文 為了忘掉前任连锯,我火速辦了婚禮,結(jié)果婚禮上用狱,老公的妹妹穿的比我還像新娘运怖。我一直安慰自己,他們只是感情好夏伊,可當我...
    茶點故事閱讀 65,611評論 6 386
  • 文/花漫 我一把揭開白布摇展。 她就那樣靜靜地躺著,像睡著了一般溺忧。 火紅的嫁衣襯著肌膚如雪咏连。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,837評論 1 290
  • 那天鲁森,我揣著相機與錄音祟滴,去河邊找鬼。 笑死歌溉,一個胖子當著我的面吹牛垄懂,可吹牛的內(nèi)容都是我干的骑晶。 我是一名探鬼主播,決...
    沈念sama閱讀 38,987評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼草慧,長吁一口氣:“原來是場噩夢啊……” “哼桶蛔!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起漫谷,我...
    開封第一講書人閱讀 37,730評論 0 267
  • 序言:老撾萬榮一對情侶失蹤仔雷,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后舔示,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體碟婆,經(jīng)...
    沈念sama閱讀 44,194評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,525評論 2 327
  • 正文 我和宋清朗相戀三年斩郎,在試婚紗的時候發(fā)現(xiàn)自己被綠了脑融。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,664評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡缩宜,死狀恐怖肘迎,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情锻煌,我是刑警寧澤妓布,帶...
    沈念sama閱讀 34,334評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站宋梧,受9級特大地震影響匣沼,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜捂龄,卻給世界環(huán)境...
    茶點故事閱讀 39,944評論 3 313
  • 文/蒙蒙 一释涛、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧倦沧,春花似錦唇撬、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,764評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至告希,卻和暖如春扑浸,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背燕偶。 一陣腳步聲響...
    開封第一講書人閱讀 31,997評論 1 266
  • 我被黑心中介騙來泰國打工喝噪, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人指么。 一個月前我還...
    沈念sama閱讀 46,389評論 2 360
  • 正文 我出身青樓仙逻,卻偏偏與公主長得像驰吓,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子系奉,可洞房花燭夜當晚...
    茶點故事閱讀 43,554評論 2 349

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