[iPhone] CABasicAnimationを使たアニメーション

アニメーションは処理が重いのですがCABasicAnimationを使うと比較的スムーズな動きを出せます。こちらで画像のモザイクを試しましたが、それを動画にしてみましょう。

Xcode 13.4.1

CABasicAnimation

CALayer の CA は Core Animationのことでアニメーションの画像処理系の重い処理に適しています。またUIViewと被っているような気もするのですが、その差は
CALayer
‘An object that manages image-based content and allows you to perform animations on that content’

アニメーション的な処理はこちらが使いやすいということのようです

UIView
‘An object that manages the content for a rectangular area on the screen.’

描画する領域について色々定義しているということでしょうか

モザイク画からフェードインするような演出を作ります。
rasterizationScale をキーにして CABasicAnimation のインスタンスを生成
duration でアニメーション期間を設定して、その間の開始と終了時のキー値を入れます。
imgView.layer に追加する
コードは以下のようになります。

ViewController.swift

import UIKit

class ViewController: UIViewController {

    var imgView = UIImageView()

    override func viewDidLoad() {
        super.viewDidLoad()

        // 画面背景色を設定してみました
        self.view.backgroundColor = UIColor(red:0.9,green:1.0,blue:0.9,alpha:1.0)

        let img = UIImage(named: "sample")!
        imgView = UIImageView(image: img)

        // 画像のサイズ
        let iWidth = img.size.width
        let iHeight = img.size.height
        // スクリーンサイズ
        let screenWidth = self.view.bounds.size.width
        let screenHeight = self.view.bounds.size.height

        let scale = screenWidth/iWidth

        // 画像サイズ変更
        let rect = CGRect(x: CGFloat(0), y: CGFloat(0), width:
                          iWidth*scale, height: iHeight*scale)
        // ImageView frame をCGRectMakeで作った矩形に合わせる
        imgView.frame = rect

        // 画像をセンターに合わせる
        imgView.center = CGPoint(x: screenWidth/2, y: screenHeight/2)

    }

    @IBAction func buttonTapped(_ sender : Any) {
        rasterizationAnimation()
    }

    func rasterizationAnimation(){
        imgView.layer.shouldRasterize = true
        imgView.layer.rasterizationScale = 0.1
        imgView.layer.minificationFilter = CALayerContentsFilter.trilinear
        imgView.layer.magnificationFilter = CALayerContentsFilter.nearest

        let testAnimation = CABasicAnimation(keyPath: "rasterizationScale")

        // rasterizationScale を 0.01から1.0まで
        testAnimation.fromValue = 0.01
        testAnimation.toValue = 1.0

        // 期間(秒)
        testAnimation.duration = 10.0

        // このアニメーション結果を残す
        testAnimation.isRemovedOnCompletion = false
        testAnimation.fillMode = CAMediaTimingFillMode.forwards

        // アニメーションの追加
        imgView.layer.add(testAnimation, forKey: "testAnimation")

        // UIImageViewのインスタンスをビューに追加
        self.view.addSubview(imgView)

    }


}

import UIKit

class ViewController: UIViewController {

var imgView = UIImageView()

override func viewDidLoad() {

super.viewDidLoad()

// 画面背景色を設定してみました

self.view.backgroundColor = UIColor(red:0.9,green:1.0,blue:0.9,alpha:1.0)

let img = UIImage(named: "sample")!

imgView = UIImageView(image: img)

// 画像のサイズ

let iWidth = img.size.width

let iHeight = img.size.height

// スクリーンサイズ

let screenWidth = self.view.bounds.size.width

let screenHeight = self.view.bounds.size.height

let scale = screenWidth/iWidth

// 画像サイズ変更

let rect = CGRect(x: CGFloat(0), y: CGFloat(0), width:

iWidth*scale, height: iHeight*scale)

// ImageView frame をCGRectMakeで作った矩形に合わせる

imgView.frame = rect

// 画像をセンターに合わせる

imgView.center = CGPoint(x: screenWidth/2, y: screenHeight/2)

}

@IBAction func buttonTapped(_ sender : Any) {

rasterizationAnimation()

}

func rasterizationAnimation(){

imgView.layer.shouldRasterize = true

imgView.layer.rasterizationScale = 0.1

imgView.layer.minificationFilter = CALayerContentsFilter.trilinear

imgView.layer.magnificationFilter = CALayerContentsFilter.nearest

let testAnimation = CABasicAnimation(keyPath: "rasterizationScale")

// rasterizationScale を 0.01から1.0まで

testAnimation.fromValue = 0.01

testAnimation.toValue = 1.0

// 期間(秒)

testAnimation.duration = 10.0

// このアニメーション結果を残す

testAnimation.isRemovedOnCompletion = false

testAnimation.fillMode = CAMediaTimingFillMode.forwards

// アニメーションの追加

imgView.layer.add(testAnimation, forKey: "testAnimation")

// UIImageViewのインスタンスをビューに追加

self.view.addSubview(imgView)

}

あとは画像を選んでAssets.xcassetsに入れます。
（例：sample@2x.jpg）

ButtonをStoryboardに置いてコードと紐付けします。

Swiftのいつの頃からか、QuartzCore.framewarkを入れなくてもできるようになりましたね

画像のちょっとしたアレンジができそうです。

関連ページ：

References:
CABasicAnimation — Core Animation | Apple Developer Documentation
UIImageView — UIKit | Apple Developer Documentation
UIImage — UIKit | Apple Developer Documentation