概要
iOSアプリ開発でのメモ。
GIFをごにょごにょ読み込むこともSVGKit使ってSVG読み込むこともせずに、NowLoadingなアニメーションを実現
完成目標
※適当に録画→GIF出力してしまったので、GIFが雑です
用意するもの
クルクル回す画像
これはPreloaderというサイトで生成しました。便利。
APNGというアニメーション付きPNGで書き出されます。
これは最近登場した「GIFに代わるアニメーション画像」なのですがまだまだ対応環境は少なそうです...。
これの1番目のフレームをドラッグ&ドロップすると、画像が１枚抽出できます。
手順
[1]画像を配置
普通に配置します。そしてViewControllerに紐付けます。
ViewController.swift
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var loadingImage: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
}
}
[2]アニメーション！
CABasicAnimationを使います。
ViewController.swift
import UIKit
class LoadingViewController: UIViewController {
@IBOutlet weak var loadingImage: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
// z軸を中心に回転（つまり普通に2D回転）
let ca = CABasicAnimation(keyPath: "transform.rotation.z")
// 動きの具合（2PI[rad] = 360度）
ca.toValue = Double.pi * 2
// １回転にかける時間（秒）
ca.duration = 1.5
// アニメーション関数（後述）
ca.timingFunction = CAMediaTimingFunction(controlPoints: 0.645, 0.045, 0.355, 1)
// 繰り返し回数（無限に繰り返す時は HUGE）
ca.repeatCount = HUGE
// UIImageにアニメーションを紐付け
loadingImage.layer.add(ca, forKey: "loading")
}
}
[出典]アニメーション関数について
こちらの記事を参考に設定しました。
CoreAnimationでカスタムのEasing Functionを使う
まとめ
回転や移動などの簡単なアニメーションだけでなく、これらを組み合わせたものも紐付け可能です。
以上、素敵なアニメーションでした。