1.UIKit層面的動(dòng)畫
- 幀動(dòng)畫,
UIImage實(shí)現(xiàn)的動(dòng)畫
1.image動(dòng)畫,用一組image加載為閃圖
let image = UIImage.animatedImage(with: images, duration: 3)
2.ImageView動(dòng)畫
imageView1.animationImages = images 添加圖片到view
imageView1.animationDuration = 4 循環(huán)時(shí)間
imageView1.animationRepeatCount = -1 循環(huán)次數(shù) -1重復(fù), 1運(yùn)行完刪除
imageView1.startAnimating()
imageViewAnimation.gif
3.Timer定時(shí)器
通過添加定時(shí)器連續(xù)調(diào)用一個(gè)方法來修改視圖的 center transform frame alpha bounds 來達(dá)到動(dòng)畫的效果
imageDura.gif
勻速動(dòng)畫的實(shí)現(xiàn)可以一個(gè)公式計(jì)算實(shí)現(xiàn)
當(dāng)前值= 開始值+當(dāng)前幀數(shù) ** (結(jié)束值-開始值)/幀率* *動(dòng)畫時(shí)長
4.UIView層面的動(dòng)畫
UIView動(dòng)畫是系統(tǒng)為UIView 提供的專門用于控制視圖實(shí)現(xiàn)的動(dòng)畫的方法
- 只需要在動(dòng)畫前設(shè)置好視圖要修改的視圖的起始狀態(tài)
- 選擇合適的方法后
- 在方法內(nèi)說明動(dòng)畫結(jié)束時(shí)視圖的狀態(tài)
不需要關(guān)注中間的變化過程,只需要說明視圖動(dòng)畫結(jié)束是什么樣子,系統(tǒng)就會(huì)為這個(gè)過程自動(dòng)添加動(dòng)畫
let rect = self.imageView1.frame
self.imageView1.frame = CGRect(x: -100, y: -100, width: 10, height: 20)
UIView.animate(withDuration: 5, delay: 1, options: UIViewAnimationOptions.curveEaseInOut,animations: {
self.imageView1.frame = rect //動(dòng)畫結(jié)束狀態(tài)
},completion: { _ in //動(dòng)畫完成后
self.imageView1.alpha = 0.3
UIView.animate(withDuration: 3, animations: { //嵌套
self.imageView1.alpha = 1
})
})
UIViewAnimation.gif
UIViewAnimationOptions
UIViewAnimationOptionLayoutSubviews //提交動(dòng)畫的時(shí)候布局子控件，表示子控件將和父控件一同動(dòng)畫侦铜。
UIViewAnimationOptionAllowUserInteraction //動(dòng)畫時(shí)允許用戶交流价说，比如觸摸
UIViewAnimationOptionBeginFromCurrentState //從當(dāng)前狀態(tài)開始動(dòng)畫
UIViewAnimationOptionRepeat //無限重復(fù)動(dòng)畫
UIViewAnimationOptionAutoreverse //執(zhí)行反向動(dòng)畫,前提是設(shè)置動(dòng)畫無限重復(fù)
UIViewAnimationOptionOverrideInheritedDuration//忽略外層動(dòng)畫嵌套的執(zhí)行時(shí)間
UIViewAnimationOptionOverrideInheritedCurve //忽略外層動(dòng)畫嵌套的時(shí)間變化曲線
UIViewAnimationOptionAllowAnimatedContent //通過改變屬性和重繪實(shí)現(xiàn)動(dòng)畫效果，如果key沒有提交動(dòng)畫將使用快照
UIViewAnimationOptionShowHideTransitionViews //用顯隱的方式替代添加移除圖層的動(dòng)畫效果
UIViewAnimationOptionOverrideInheritedOptions //忽略嵌套繼承的?選項(xiàng)
時(shí)間函數(shù)曲線相關(guān)
UIViewAnimationOptionCurveEaseInOut //默認(rèn),先慢再快再慢
UIViewAnimationOptionCurveEaseIn //越來越快
UIViewAnimationOptionCurveEaseOut //越愛越慢
UIViewAnimationOptionCurveLinear //勻速
轉(zhuǎn)場動(dòng)畫相關(guān)
UIViewAnimationOptionTransitionNone //無轉(zhuǎn)場動(dòng)畫
UIViewAnimationOptionTransitionFlipFromLeft //轉(zhuǎn)場從左翻轉(zhuǎn)
UIViewAnimationOptionTransitionFlipFromRight //轉(zhuǎn)場從右翻轉(zhuǎn)
UIViewAnimationOptionTransitionCurlUp //上卷轉(zhuǎn)場
UIViewAnimationOptionTransitionCurlDown //下卷轉(zhuǎn)場
UIViewAnimationOptionTransitionCrossDissolve //轉(zhuǎn)場交叉消失
UIViewAnimationOptionTransitionFlipFromTop //轉(zhuǎn)場從上翻轉(zhuǎn)
UIViewAnimationOptionTransitionFlipFromBottom //轉(zhuǎn)場從下翻轉(zhuǎn)
最后一組轉(zhuǎn)場動(dòng)畫一般是使用在下面這個(gè)方法中
UIView.transition(from: self.view, to: self.imageView2, duration: 3, options: UIViewAnimationOptions.transitionFlipFromBottom, completion: nil)
效果:
UIImageTanslation.gif
2.CoreAnimation層面的動(dòng)畫
基礎(chǔ)CALayer
-
UIView核心顯示功能就是依靠CALayer實(shí)現(xiàn),每一個(gè)UIView都包含了一個(gè)CALayer對(duì)象,修改了CALayer,會(huì)影響表現(xiàn)出來的UIView的外觀 -
UIView與CALayer最大的不同在于Layer是不能夠響應(yīng)事件的,UIView由于繼承了UIResponder,所以還能夠響應(yīng)用戶事件
shadowColor 陰影顏色
shadowOpacity 陰影透明
shadowOffset 陰影偏移量
shadowPath 陰影路徑
shadowRadius 陰影半徑
borderColor 邊界顏色
borderWidth 邊界寬度
backgroundColor 背景色
cornerRadius 拐角半徑
Position 位置 (是錨點(diǎn)在父視圖中所處的位置)
anchorPoint 錨點(diǎn) (指的是圖層中固定的一點(diǎn),對(duì)于圖層的操作旋轉(zhuǎn),縮放都是相對(duì)于這一固定點(diǎn))
Position 與 anchorPoint 一個(gè)對(duì)于本圖層和一個(gè)對(duì)于父視圖在空間上相對(duì)重合的一點(diǎn),修改一個(gè)不會(huì)影響另一個(gè)
- 例1: 切圓形圖片
imageView2.layer.borderWidth = 2
imageView2.layer.borderColor = UIColor.red.cgColor
imageView2.layer.cornerRadius = imageView2.frame.size.width * 0.5
imageView2.layer.masksToBounds = true
Paste_Image.png
- 例2: CATextLayer 制作水印
let tlayer = CATextLayer()
tlayer.string = "這是一條CATextLayer水印"
tlayer.fontSize = 15
tlayer.foregroundColor = UIColor.white.cgColor
tlayer.backgroundColor = UIColor.black.cgColor
tlayer.position = CGPoint(x: 200, y: 250)
tlayer.bounds = CGRect(x: 0, y: 0, width: 250, height: 30)
tlayer.opacity = 0.3
imageView2.layer.addSublayer(tlayer)
Paste_Image.png
.CAAnimation動(dòng)畫
CALayer很多屬性都有隱式動(dòng)畫,修改該屬性會(huì)有動(dòng)畫效果(屬性備注中有animation)如:
Paste_Image.png
CAAnimation動(dòng)畫只是一個(gè)假象 而UIView的animation則會(huì)改變視圖的數(shù)據(jù)
1.CABasicAnimation 基礎(chǔ)動(dòng)畫
只要設(shè)置動(dòng)畫起始狀態(tài)和KeyPath與一些屬性即可
你只需要給出兩個(gè)狀態(tài)鬼廓，一個(gè)初始狀態(tài)一個(gè)終止?fàn)顟B(tài)趁怔，系統(tǒng)自動(dòng)為你將中間的動(dòng)畫補(bǔ)全
其中有兩個(gè)主要屬性fromValue開始值 和 toValue 最終值
let basicAnimation = CABasicAnimation()
basicAnimation.keyPath = "position.y" //CALayer 中屬性的備注 最后只要有animation就可以支持動(dòng)畫
basicAnimation.toValue = 11
basicAnimation.duration = 5
basicAnimation.fillMode = kCAFillModeForwards
basicAnimation.isRemovedOnCompletion = false //在動(dòng)畫結(jié)束的位置不回到原點(diǎn)
self.imageView1.layer.add(basicAnimation, forKey: nil) 注:把動(dòng)畫加入layer后 再修改basicAnimation 是沒有效果的
CABasicAnimation.gif
2.CAKeyFrameAnimation 關(guān)鍵幀動(dòng)畫
CAKeyFrameAnimation 可以通過Value屬性記錄中間變化的每一個(gè)細(xì)節(jié),CABasicAnimation相當(dāng)于是只有兩個(gè)關(guān)鍵幀的動(dòng)畫
CAKeyFrameAnimation最重要的效果就是可以自定義動(dòng)畫路徑,通過Path屬性記錄
let keyAnimation = CAKeyframeAnimation()
keyAnimation.keyPath = "position" //keyPath 必須為position, transform, opacity 其中的一個(gè)
keyAnimation.path = UIBezierPath(rect: CGRect(x: 30, y: 30, width: 300, height: 300)).cgPath //按照路徑運(yùn)動(dòng)
keyAnimation.duration = 6
keyAnimation.repeatCount = 6
keyAnimation.isRemovedOnCompletion = false //不回到原點(diǎn)
keyAnimation.fillMode = kCAFillModeForwards
imageView1.layer.add(keyAnimation, forKey: nil)
CAKeyFrameAnimation.gif
3.CAAnimationGroup 動(dòng)畫組
可以創(chuàng)建動(dòng)畫組來管理所有動(dòng)畫,同意設(shè)置動(dòng)畫時(shí)長,添加到視圖的Layer
