はじめに
この記事は、ZOZOテクノロジーズ #4AdventCalendar2019の記事です。
昨日は@Kyou13さんの「開発合宿でVue.js+Firebase+Onsen UIで食事の栄養管理アプリを作った話」でした。
さて、iOSでは、アニメーション中に画面を移動するとアニメーションが停止してしまうのは既知の事実かと思います。
基本的には ViewController のライフサイクルに合わせて調整してあげれば良いですが、コンポーネント化されたカスタムViewに関しては、コンポーネント側で管理されている方が利用しやすいケースの方が多いと思います。
この記事では、コンポーネント化されたカスタムView側でアニメーションを管理するTipsを紹介します。
アニメーションが止まるタイミング
まず、アニメーションが止まるタイミングですが、次の2つが考えられます。
- アプリ内で画面を移動する
- アプリをバックグラウンドに移動させる
では、下記のカスタムViewを例に、それぞれの対応方法を見ていきます。
動作環境
- Xcode 10.3
- Swift 5
- iOS 12.4
import UIKit
class IndicatorView: UIView {
private let strokeLayer = CAShapeLayer()
private var isAnimating = false
override init(frame: CGRect) {
super.init(frame: frame)
initialize()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
initialize()
}
override func draw(_ rect: CGRect) {
let lineWidth: CGFloat = 2.0
let radius = (rect.width - lineWidth) / 2
let startAngle = CGFloat.pi * (3 / 2)
let endAngle = startAngle + CGFloat.pi * 2.0
let path = UIBezierPath(
arcCenter: CGPoint(x: rect.width / 2.0, y: rect.height / 2.0),
radius: radius,
startAngle: startAngle,
endAngle: endAngle,
clockwise: true
)
strokeLayer.frame = rect
strokeLayer.path = path.cgPath
strokeLayer.lineWidth = lineWidth
}
private func initialize() {
strokeLayer.fillColor = UIColor.clear.cgColor
strokeLayer.strokeColor = UIColor.blue.cgColor
strokeLayer.strokeEnd = 0.8
layer.insertSublayer(strokeLayer, at: 0)
}
private func addAnimation() {
let animation = CABasicAnimation(keyPath: "transform.rotation")
animation.fromValue = 0.0
animation.toValue = 2.0 * Double.pi
animation.duration = 1.0
animation.repeatCount = .infinity
animation.timingFunction = CAMediaTimingFunction(name: .linear)
strokeLayer.add(animation, forKey: "rotate")
}
func startAnimating() {
guard !isAnimating else { return }
isAnimating = true
addAnimation()
}
func stopAnimating() {
guard isAnimating else { return }
isAnimating = false
strokeLayer.removeAllAnimations()
}
}
アプリ内で画面を移動した場合
ナビゲーションのプッシュやタブ移動などがこちらの対象になります。
Before
画面に戻ってくるとアニメーションが止まっていることがわかります。
対応方法
UIView の、 didMoveToWindow() メソッドを利用すると、 window が変わったタイミングでイベントを取得することができます。
画面に表示されるタイミングでは、 window プロパティに値が入っているので、そのタイミングでアニメーションを追加します。
override func didMoveToWindow() {
super.didMoveToWindow()
if let _ = window, isAnimating {
addAnimation()
}
}
After
アプリをバックグラウンドに移動させた場合
Before
バックグラウンドに移動後、アプリに戻ってくるとアニメーションが止まっています。
対応方法
NotificationCenter を利用するとアプリがフォアグラウンドなったタイミングでイベントを取得できるので、そのタイミングでアニメーションを追加してあげます。
private func initialize() {
strokeLayer.fillColor = UIColor.clear.cgColor
strokeLayer.strokeColor = UIColor.blue.cgColor
strokeLayer.strokeEnd = 0.8
layer.insertSublayer(strokeLayer, at: 0)
NotificationCenter.default.addObserver(
self,
selector: #selector(handleEnterForeground),
name: UIApplication.willEnterForegroundNotification,
object: nil
)
}
@objc func handleEnterForeground(_: Notification) {
if let _ = window, isAnimating {
addAnimation()
}
}
After
これでアプリを利用している間はアニメーションを止めることなく、動かし続けることができます。
最終的なコードです。
class IndicatorView: UIView {
private let strokeLayer = CAShapeLayer()
private var isAnimating = false
override init(frame: CGRect) {
super.init(frame: frame)
initialize()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
initialize()
}
override func draw(_ rect: CGRect) {
let lineWidth: CGFloat = 2.0
let radius = (rect.width - lineWidth) / 2
let startAngle = CGFloat.pi * (3 / 2)
let endAngle = startAngle + CGFloat.pi * 2.0
let path = UIBezierPath(
arcCenter: CGPoint(x: rect.width / 2.0, y: rect.height / 2.0),
radius: radius,
startAngle: startAngle,
endAngle: endAngle,
clockwise: true
)
strokeLayer.frame = rect
strokeLayer.path = path.cgPath
strokeLayer.lineWidth = lineWidth
}
override func didMoveToWindow() {
super.didMoveToWindow()
if let _ = window, isAnimating {
addAnimation()
}
}
private func initialize() {
strokeLayer.fillColor = UIColor.clear.cgColor
strokeLayer.strokeColor = UIColor.blue.cgColor
strokeLayer.strokeEnd = 0.8
layer.insertSublayer(strokeLayer, at: 0)
NotificationCenter.default.addObserver(
self,
selector: #selector(handleEnterForeground),
name: UIApplication.willEnterForegroundNotification,
object: nil
)
}
@objc func handleEnterForeground(_: Notification) {
if let _ = window, isAnimating {
addAnimation()
}
}
private func addAnimation() {
let animation = CABasicAnimation(keyPath: "transform.rotation")
animation.fromValue = 0.0
animation.toValue = 2.0 * Double.pi
animation.duration = 1.0
animation.repeatCount = .infinity
animation.timingFunction = CAMediaTimingFunction(name: .linear)
strokeLayer.add(animation, forKey: "rotate")
}
func startAnimating() {
guard !isAnimating else { return }
isAnimating = true
addAnimation()
}
func stopAnimating() {
guard isAnimating else { return }
isAnimating = false
strokeLayer.removeAllAnimations()
}
}
さいごに
「動作はつづける、アニメーションは止めない！」
明日は@iiizukkeyiii さんです。
お楽しみに！