首先說明:這是一系列文章,參考本專題下其他的文章有助於你對本文的理解。
上一篇已經簡單的介紹過核心動畫了,這次就針對實力詳細介紹一下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)
}
當然,這些並不全面,這裏只起到一個拋磚引玉的作用。