iOS 動畫Animation-2-2: 動畫基礎:核心動畫

首先說明:這是一系列文章,參考本專題下其他的文章有助於你對本文的理解。
上一篇已經簡單的介紹過核心動畫了,這次就針對實力詳細介紹一下Animation 核心動畫。
Demo在Github地址,可以下載下來跟着敲一下

CALayer動畫

  • 前面也說了,核心動畫是作用在layer層的動畫。所以也先簡單的介入一下CALayer動畫,CALayer動畫主要有兩個屬性anchorPoint和position。
    1.錨點 anchorPoint 錨點決定layer層上的那個點是position點 錨點默認是(0.5,0.5)跟視圖的中心點重合
    2.基準點 position 決定當前視圖的layer在父視圖上得位置,他以父視圖的座標系爲準,
    3.視圖創建出來的時候錨點,中心點,基準點是重合的,
  func layerAnimation(){
        animationView.layer.anchorPoint = CGPointMake(0.5, 0)
        animationView.transform = CGAffineTransformRotate(self.animationView.transform, CGFloat(M_PI_4))
        animationView.layer.position = CGPointMake(200, 300)
    }

這樣做就會使animationView圍繞着設定的那個點旋轉。

CABasicAnimation 基礎動畫

CA動畫是根據KVC的原理去修改layer層的屬性,以達到做動畫的效果
keypath一般爲”position”和”transform”,以及他們等點出來的屬性

func basicAnimation(){

        let basic = CABasicAnimation(keyPath: "position.x")
        basic.duration = 3.0
        basic.repeatCount = 5
        basic.fromValue = -80
        basic.toValue = 500
        animationView.layer.addAnimation(basic, forKey: nil)
   }

關鍵幀動畫

func keyFrameAnimation(){
        /*
        let keyFrame = CAKeyframeAnimation(keyPath: "position.x")
        keyFrame.duration = 0.1
        keyFrame.repeatCount = 10
        let center = animationView.center
        keyFrame.values = [center.x - 5, center.x, center.x + 5]
        animationView.layer.addAnimation(keyFrame, forKey: nil)
        */
        /*
        let keyFrame = CAKeyframeAnimation(keyPath: "position")
        keyFrame.duration = 5
        keyFrame.repeatCount = 5
        //節點位置
        let point1 = animationView.center
        let point2 = CGPoint(x: 200, y: 100)
        let point3 = CGPoint(x: 100, y: point1.y)
        let point4 = CGPoint(x: 300, y: point1.y)
        let value1 = NSValue(CGPoint: point1)
        let value2 = NSValue(CGPoint: point2)
        let value3 = NSValue(CGPoint: point3)
        let value4 = NSValue(CGPoint: point4)
        //將節點位置加入到values中
        keyFrame.values = [value1, value4, value2, value3, value1]
        self.animationView.layer.addAnimation(keyFrame, forKey: nil)
        */

        let keyFrame = CAKeyframeAnimation(keyPath: "transform.rotation")
        keyFrame.duration = 0.1
        keyFrame.values = [-4/180*M_PI, 4/180*M_PI, -4/180*M_PI]
        keyFrame.repeatCount = 10
        animationView.layer.addAnimation(keyFrame, forKey:
 nil)

    }

CALayer過度動畫

let transiton = CATransition()
        transiton.duration = 1
        transiton.repeatCount = 5
        transiton.type = "rippleEffect"
        self.view.layer.addAnimation(transiton, forKey: nil)
}

其他常見的API
/*
* 各種動畫效果 其中除了’fade’, moveIn',push’ , `reveal’ ,其他屬於私有的API(我是這麼認爲的,可以點進去看下注釋).

    *  ↑↑↑上面四個可以分別使用'kCATransitionFade', 'kCATransitionMoveIn', 'kCATransitionPush', 'kCATransitionReveal'來調用.

    *  @"cube"                     立方體翻滾效果

    *  @"moveIn"                   新視圖移到舊視圖上面

    *  @"reveal"                   顯露效果(將舊視圖移開,顯示下面的新視圖)

    *  @"fade"                     交叉淡化過渡(不支持過渡方向)             (默認爲此效果)

    *  @"pageCurl"                 向上翻一頁

    *  @"pageUnCurl"               向下翻一頁

    *  @"suckEffect"               收縮效果,類似系統最小化窗口時的神奇效果(不支持過渡方向)

    *  @"rippleEffect"             滴水效果,(不支持過渡方向)

    *  @"oglFlip"                  上下左右翻轉效果

    *  @"rotate"                   旋轉效果

    *  @"push"

    *  @"cameraIrisHollowOpen"     相機鏡頭打開效果(不支持過渡方向)

    *  @"cameraIrisHollowClose"    相機鏡頭關上效果(不支持過渡方向)

    */

CAAnimationGroup分組動畫

  func animationGroup(){
        //創建第一個關鍵幀動畫,給熱氣球提供一個運動軌跡,
        let keyFramePath = CAKeyframeAnimation(keyPath: "position")
        //貝賽爾曲線
        //1.指定貝塞爾曲線的半徑
        //CGFloat radius = kScreenHeight;
        //01.圓心
        //02.半徑
        //03.開始角度
        //04.結束角度
        //05.旋轉方向,YES是順時針,NO是逆時針
        let path = UIBezierPath(arcCenter: CGPoint(x: -100, y: 300), radius: 300, startAngle: CGFloat(-M_PI_2), endAngle: CGFloat(M_PI_2), clockwise: true)
        keyFramePath.path = path.CGPath
        //2設置動畫執行完畢後,不刪除動畫
        keyFramePath.removedOnCompletion = false
        //3設置保存動畫的最新狀態
        keyFramePath.fillMode = kCAFillModeForwards
        //4.代理,有一個start和一個stop方法
        keyFramePath.delegate = self

        //4設置動畫的節奏
        keyFramePath.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        //創建第二個關鍵幀動畫,讓熱氣球運動的時候由小-->大-->小
        let keyFrameScale = CAKeyframeAnimation(keyPath: "transform.scale")
        keyFrameScale.values = [1.0,1.2,1.4,1.8,2.2,1.8,1.4,1.2,1.0]
        let group = CAAnimationGroup()
        group.duration = 8
        group.repeatCount = 100
        //將兩個動畫效果添加到分組動畫中
        group.animations = [keyFramePath, keyFrameScale]
        balloon.layer.addAnimation(group, forKey: nil)

    }

當然,這些並不全面,這裏只起到一個拋磚引玉的作用。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章