1.UIKit層面的動畫

• 幀動畫,UIImage實現(xiàn)的動畫

1.image動畫,用一組image加載為閃圖

  let image = UIImage.animatedImage(with: images, duration: 3)

2.ImageView動畫

    imageView1.animationImages = images     添加圖片到view
    imageView1.animationDuration = 4             循環(huán)時間
    imageView1.animationRepeatCount = -1    循環(huán)次數(shù) -1重復(fù), 1運行完刪除
    imageView1.startAnimating()

imageViewAnimation.gif

3.Timer定時器

通過添加定時器連續(xù)調(diào)用一個方法來修改視圖的 center transform frame alpha bounds 來達到動畫的效果

imageDura.gif

勻速動畫的實現(xiàn)可以一個公式計算實現(xiàn)

當(dāng)前值= 開始值+當(dāng)前幀數(shù) ** (結(jié)束值-開始值)/幀率* *動畫時長

4.UIView層面的動畫

UIView動畫是系統(tǒng)為UIView 提供的專門用于控制視圖實現(xiàn)的動畫的方法

1. 只需要在動畫前設(shè)置好視圖要修改的視圖的起始狀態(tài)
2. 選擇合適的方法后
3. 在方法內(nèi)說明動畫結(jié)束時視圖的狀態(tài)

不需要關(guān)注中間的變化過程,只需要說明視圖動畫結(jié)束是什么樣子,系統(tǒ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  //動畫結(jié)束狀態(tài)
    },completion: { _ in   //動畫完成后
        self.imageView1.alpha = 0.3
        UIView.animate(withDuration: 3, animations: { //嵌套
            self.imageView1.alpha = 1
        })
    })

UIViewAnimation.gif

UIViewAnimationOptions

UIViewAnimationOptionLayoutSubviews           //提交動畫的時候布局子控件，表示子控件將和父控件一同動畫。
UIViewAnimationOptionAllowUserInteraction     //動畫時允許用戶交流，比如觸摸
UIViewAnimationOptionBeginFromCurrentState    //從當(dāng)前狀態(tài)開始動畫
UIViewAnimationOptionRepeat                   //無限重復(fù)動畫
UIViewAnimationOptionAutoreverse              //執(zhí)行反向動畫,前提是設(shè)置動畫無限重復(fù)
UIViewAnimationOptionOverrideInheritedDuration//忽略外層動畫嵌套的執(zhí)行時間
UIViewAnimationOptionOverrideInheritedCurve   //忽略外層動畫嵌套的時間變化曲線
UIViewAnimationOptionAllowAnimatedContent     //通過改變屬性和重繪實現(xiàn)動畫效果，如果key沒有提交動畫將使用快照
UIViewAnimationOptionShowHideTransitionViews  //用顯隱的方式替代添加移除圖層的動畫效果
UIViewAnimationOptionOverrideInheritedOptions //忽略嵌套繼承的?選項
時間函數(shù)曲線相關(guān)
UIViewAnimationOptionCurveEaseInOut           //默認(rèn),先慢再快再慢
UIViewAnimationOptionCurveEaseIn              //越來越快
UIViewAnimationOptionCurveEaseOut             //越愛越慢
UIViewAnimationOptionCurveLinear              //勻速
轉(zhuǎn)場動畫相關(guān)
UIViewAnimationOptionTransitionNone           //無轉(zhuǎn)場動畫
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)場動畫一般是使用在下面這個方法中

 UIView.transition(from: self.view, to: self.imageView2, duration: 3, options: UIViewAnimationOptions.transitionFlipFromBottom, completion: nil)

效果:

UIImageTanslation.gif

2.CoreAnimation層面的動畫

基礎(chǔ)CALayer

1. UIView核心顯示功能就是依靠CALayer實現(xiàn),每一個UIView都包含了一個CALayer對象,修改了CALayer,會影響表現(xiàn)出來的UIView的外觀
2. UIView與CALayer最大的不同在于Layer是不能夠響應(yīng)事件的,UIView由于繼承了UIResponder,所以還能夠響應(yīng)用戶事件

shadowColor       陰影顏色 
shadowOpacity     陰影透明
shadowOffset      陰影偏移量
shadowPath        陰影路徑
shadowRadius      陰影半徑
borderColor       邊界顏色
borderWidth       邊界寬度
backgroundColor   背景色
cornerRadius      拐角半徑
Position          位置 (是錨點在父視圖中所處的位置)
anchorPoint       錨點 (指的是圖層中固定的一點,對于圖層的操作旋轉(zhuǎn),縮放都是相對于這一固定點)
Position 與 anchorPoint 一個對于本圖層和一個對于父視圖在空間上相對重合的一點,修改一個不會影響另一個

• 例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動畫

CALayer很多屬性都有隱式動畫,修改該屬性會有動畫效果(屬性備注中有animation)如:

Paste_Image.png

CAAnimation動畫只是一個假象 而UIView的animation則會改變視圖的數(shù)據(jù)

1.CABasicAnimation 基礎(chǔ)動畫

只要設(shè)置動畫起始狀態(tài)和KeyPath與一些屬性即可

你只需要給出兩個狀態(tài)，一個初始狀態(tài)一個終止?fàn)顟B(tài)，系統(tǒng)自動為你將中間的動畫補全

其中有兩個主要屬性fromValue開始值 和 toValue 最終值

    let basicAnimation = CABasicAnimation()
    basicAnimation.keyPath = "position.y" //CALayer 中屬性的備注 最后只要有animation就可以支持動畫
    basicAnimation.toValue = 11
    basicAnimation.duration = 5
    basicAnimation.fillMode = kCAFillModeForwards
    basicAnimation.isRemovedOnCompletion = false //在動畫結(jié)束的位置不回到原點
    self.imageView1.layer.add(basicAnimation, forKey: nil) 注:把動畫加入layer后 再修改basicAnimation 是沒有效果的

CABasicAnimation.gif

2.CAKeyFrameAnimation 關(guān)鍵幀動畫

CAKeyFrameAnimation 可以通過Value屬性記錄中間變化的每一個細(xì)節(jié),CABasicAnimation相當(dāng)于是只有兩個關(guān)鍵幀的動畫

CAKeyFrameAnimation 最重要的效果就是可以自定義動畫路徑,通過Path屬性記錄

   let keyAnimation = CAKeyframeAnimation()
    keyAnimation.keyPath = "position"  //keyPath 必須為position, transform, opacity 其中的一個
    keyAnimation.path = UIBezierPath(rect: CGRect(x: 30, y: 30, width: 300, height: 300)).cgPath  //按照路徑運動
    keyAnimation.duration = 6
    keyAnimation.repeatCount = 6
    keyAnimation.isRemovedOnCompletion = false //不回到原點
    keyAnimation.fillMode = kCAFillModeForwards
    imageView1.layer.add(keyAnimation, forKey: nil)

CAKeyFrameAnimation.gif

3.CAAnimationGroup 動畫組

可以創(chuàng)建動畫組來管理所有動畫,同意設(shè)置動畫時長,添加到視圖的Layer