1熄云、錨點(diǎn)的概念 x軸與y軸的取值在0~1之間
- Layer層的position參照點(diǎn)始終參與錨點(diǎn)重合
- 錨點(diǎn)決定視圖進(jìn)行動(dòng)畫(huà)時(shí)的參照點(diǎn)
2扣唱、幾種常用的CALayer子類
-
CAEmitterLayer類
CAEmitterLayer是一個(gè)粒子發(fā)射器系統(tǒng)，負(fù)責(zé)粒子的創(chuàng)建和發(fā)射源屬性的配置豆巨。它可以創(chuàng)建出炫酷的粒子效果動(dòng)畫(huà) -
CAGradientLayer類
可以創(chuàng)建色彩漸變的圖層效果
import UIKit
import ImageIO
class FourViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//創(chuàng)建圖層對(duì)象
let gradientLayer = CAGradientLayer()
//設(shè)置圖層尺寸與位置
gradientLayer.bounds = CGRect(x: 0, y: 100, width: 100, height: 100)
gradientLayer.position = CGPoint(x: 100, y: 100)
//設(shè)置要進(jìn)行色彩漸變的顏色
gradientLayer.colors = [UIColor.red.cgColor,UIColor.green.cgColor,UIColor.blue.cgColor]
//設(shè)置要進(jìn)行漸變的臨界位置 當(dāng)紅色渲染到1/5后開(kāi)始向綠色進(jìn)行漸變蜻拨，綠色渲染到1/2后開(kāi)始向藍(lán)色進(jìn)行漸變，當(dāng)?shù)竭_(dá)7/10距離后完成漸變過(guò)程眠冈，開(kāi)始渲染為純藍(lán)色
gradientLayer.locations = [NSNumber(value: 0.2),NSNumber(value: 0.5),NSNumber(value: 0.7)]
//設(shè)置漸變的起始點(diǎn)與結(jié)束點(diǎn) (0,0)左上角 (1,1)右下角
gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
//添加視圖
self.view.layer.addSublayer(gradientLayer)
}
}
結(jié)果：
Simulator Screen Shot - iPhone X - 2019-06-18 at 17.16.30.png
-
CAEAGLLayer類
可以通過(guò)OpenGL ES來(lái)進(jìn)行界面的繪制 -
CAReplicatorLayer類
CAReplicatorLayer是一個(gè)圖層容器飞苇，會(huì)對(duì)其中的子圖層進(jìn)行復(fù)制和屬性偏移∥贤纾可以用來(lái)創(chuàng)建類型倒影效果布卡，也可以進(jìn)行圖層的變換復(fù)制
import UIKit
import ImageIO
class FourViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//創(chuàng)建拷貝圖層
let replicatorLayer = CAReplicatorLayer()
replicatorLayer.position = CGPoint.zero
//創(chuàng)建內(nèi)容圖層
let subLayer = CALayer()
subLayer.bounds = CGRect(x: 0, y: 0, width: 20, height: 20)
subLayer.position = CGPoint(x: 30, y: 100)
subLayer.backgroundColor = UIColor.red.cgColor
replicatorLayer.addSublayer(subLayer)
//設(shè)置每次拷貝將副本沿x軸平移30個(gè)單位
replicatorLayer.instanceTransform = CATransform3DMakeTranslation(30, 0, 0)
//設(shè)置拷貝副本的個(gè)數(shù)
replicatorLayer.instanceCount = 10
//添加視圖
self.view.layer.addSublayer(replicatorLayer)
}
}
結(jié)果：
-
CAScrollLayer類
可以讓其管理的多個(gè)子層進(jìn)行滑動(dòng)，但是只能通過(guò)代碼進(jìn)行管理雇盖，不能進(jìn)行用戶點(diǎn)按觸發(fā) -
CAShapeLayer類
可以在圖層上直接繪制出自定義的形狀
import UIKit
import ImageIO
class FourViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//c創(chuàng)建圖層
let shapeLayer = CAShapeLayer()
shapeLayer.position = CGPoint.zero
//創(chuàng)建圖形路徑
let path = CGMutablePath()
//設(shè)置路徑起點(diǎn)
path.move(to: CGPoint(x: 100, y: 100))
//進(jìn)行畫(huà)線
path.addLine(to: CGPoint(x: 300, y: 100))
path.addLine(to: CGPoint(x: 200, y: 200))
path.addLine(to: CGPoint(x: 100, y: 100))
//設(shè)置圖層路徑
shapeLayer.path = path
//設(shè)置圖形邊緣線條起點(diǎn)
shapeLayer.strokeStart = 0
//設(shè)置圖形邊緣線條終點(diǎn)
shapeLayer.strokeEnd = 1
//設(shè)置填充規(guī)則
shapeLayer.fillRule = CAShapeLayerFillRule.evenOdd
//設(shè)置填充顏色
shapeLayer.fillColor = UIColor.red.cgColor
//設(shè)置邊緣線條顏色
shapeLayer.strokeColor = UIColor.blue.cgColor
//設(shè)置邊緣線條寬度
shapeLayer.lineWidth = 1
self.view.layer.addSublayer(shapeLayer)
}
}
Simulator Screen Shot - iPhone X - 2019-06-18 at 18.54.35.png
-
CATextLayer類
用于進(jìn)行文字的繪制 -
CATiledLayer類
瓦片視圖忿等，可以分區(qū)域繪制，常用于在一張大的圖片中分區(qū)域繪制 -
CATransformLayer類
用于構(gòu)建一些圖層變化效果崔挖，包括3D效果的圖層變換
3贸街、CoreAnimation框架中的屬性動(dòng)畫(huà)
CAAnimation類是CoreAnimation子類，主要分為：CAPropertyAnimation(CABasicAnimation屬性過(guò)渡動(dòng)畫(huà)虚汛、CAKeyframeAnimation關(guān)鍵幀屬性過(guò)渡動(dòng)畫(huà))匾浪、CATransition、CAAnimationGroup
- CABasicAnimation屬性過(guò)渡動(dòng)畫(huà)
import UIKit
import ImageIO
class FourViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.orange
//創(chuàng)建f動(dòng)畫(huà)實(shí)例卷哩，keyPath為要進(jìn)行屬性動(dòng)畫(huà)的屬性路徑 transform.rotation.z表示圖形屬性中以z軸為中心軸的旋轉(zhuǎn)屬性
let basicAni = CABasicAnimation(keyPath: "transform.rotation.z")
//從0度開(kāi)始旋轉(zhuǎn)
basicAni.fromValue = NSNumber(value: 0)
//旋轉(zhuǎn)到180度
basicAni.toValue = NSNumber(value: Double.pi)
//設(shè)置動(dòng)畫(huà)播放的時(shí)長(zhǎng)
basicAni.duration = 2
//將動(dòng)畫(huà)作用于當(dāng)前界面的視圖Layer層上
self.view.layer.add(basicAni, forKey: nil)
}
}
- CAKeyframeAnimation關(guān)鍵幀動(dòng)畫(huà)
import UIKit
import ImageIO
class FourViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.orange
//創(chuàng)建f動(dòng)畫(huà)實(shí)例蛋辈，keyPath為要進(jìn)行屬性動(dòng)畫(huà)的屬性路徑 transform.rotation.z表示圖形屬性中以z軸為中心軸的旋轉(zhuǎn)屬性
let keyframeAni = CAKeyframeAnimation(keyPath: "transform.rotation.z")
//從0度開(kāi)始旋轉(zhuǎn)
keyframeAni.values = [NSNumber(value: 0),NSNumber(value: Double.pi/4),NSNumber(value: 0),NSNumber(value: Double.pi)]
//設(shè)置動(dòng)畫(huà)播放的時(shí)長(zhǎng)
keyframeAni.duration = 3
//將動(dòng)畫(huà)作用于當(dāng)前界面的視圖Layer層上
self.view.layer.add(keyframeAni, forKey: "")
}
}
- CASpringAnimation類似彈簧的阻尼動(dòng)畫(huà)
import UIKit
import ImageIO
class FourViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.orange
//
let springAni = CASpringAnimation(keyPath: "position.y")
//模擬重物質(zhì)量，必須大于0将谊，默認(rèn)為1冷溶，會(huì)影響慣性
springAni.mass = 2
//模擬彈簧勁度系數(shù)，必須大于0尊浓，這個(gè)值越大逞频，則回彈越快
springAni.stiffness = 5
//設(shè)置阻尼系數(shù)，必須大于0栋齿，這個(gè)值越大苗胀，回彈的幅度越小
springAni.damping = 2
springAni.toValue = 300
springAni.duration = 3
//創(chuàng)建演示動(dòng)畫(huà)的Layer
let layer = CALayer()
layer.position = CGPoint(x: 100, y: 100)
layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
layer.backgroundColor = UIColor.red.cgColor
self.view.layer.addSublayer(layer)
layer.add(springAni, forKey: "")
}
}
- CATransition實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
import UIKit
import ImageIO
class FourViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.orange
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
//創(chuàng)建轉(zhuǎn)場(chǎng)動(dòng)畫(huà)實(shí)例
let transAni = CATransition()
//設(shè)置轉(zhuǎn)場(chǎng)動(dòng)畫(huà)類型
transAni.type = CATransitionType.reveal
//設(shè)置轉(zhuǎn)場(chǎng)動(dòng)畫(huà)方向
transAni.subtype = CATransitionSubtype.fromTop
let layer = CALayer()
layer.position = CGPoint(x: 100, y: 100)
layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
layer.backgroundColor = UIColor.red.cgColor
layer.add(transAni, forKey: "")
self.view.layer.addSublayer(layer)
}
}
type轉(zhuǎn)場(chǎng)動(dòng)畫(huà)屬性
//漸入效果
transAni.type = CATransitionType.fade
//移入效果
transAni.type = CATransitionType.moveIn
//壓入效果
transAni.type = CATransitionType.push
//溶解效果
transAni.type = CATransitionType.reveal
subtype屬性
//從右側(cè)執(zhí)行
transAni.subtype = CATransitionSubtype.fromRight
//從左側(cè)執(zhí)行
transAni.subtype = CATransitionSubtype.fromLeft
//從上側(cè)執(zhí)行
transAni.subtype = CATransitionSubtype.fromTop
//從下側(cè)執(zhí)行
transAni.subtype = CATransitionSubtype.fromBottom
- CAAnimationGroup組合動(dòng)畫(huà)
import UIKit
import ImageIO
class FourViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.orange
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
//創(chuàng)建背景色過(guò)渡動(dòng)畫(huà)
let basicAni = CABasicAnimation(keyPath: "backgroundColor")
basicAni.toValue = UIColor.green.cgColor
//創(chuàng)建形變動(dòng)畫(huà)
let basicAni2 = CABasicAnimation(keyPath: "transform.scale.x")
basicAni2.toValue = NSNumber(value: 2)
//i進(jìn)行動(dòng)畫(huà)組合
let groupAni = CAAnimationGroup()
groupAni.animations = [basicAni,basicAni2]
groupAni.duration = 3
let layer = CALayer()
layer.position = CGPoint(x: 100, y: 100)
layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
layer.backgroundColor = UIColor.red.cgColor
layer.add(groupAni, forKey: "")
self.view.layer.addSublayer(layer)
}
}
