XCTestを使ってアニメーションヒッチを除去する

アニメーションは、Appのユーザー体験を劇的に向上させ、直接操作しているような感覚を与え、自身が起こしたアクションがもたらす結果をより理解することに役立ちます。アニメーションヒッチはそのような経験を台無しにします。スクロールやアニメーションを円滑に行うために、割り込みを検知するXCTestの使用方法をお伝えします。あなたのAppを頼りにしている人々に影響が出る前に、不具合を見つけ出す方法もお伝えします。

リソース

- HDビデオ
- SDビデオ

関連ビデオ

WWDC21

究極のAppパフォーマンスサバイバルガイド

WWDC20

ダウンロード

こんにちは　WWDCへようこそ “XCTestを使ってアニメーションヒッチを除去する” ソフトウェアエンジニアのタヌジャですアニメーションはアプリケーションにおいて重要な要素です戻るボタンをタップして画面を移動するような軽い動作や上下にスクロールする時のように動作の中心となる場合もありますこうした動きに乱れがあると気になるのでスムーズに反応させることはとても大切ですユーザーが気づく乱れを“ヒッチ”と呼びますヒッチは１フレームが予想よりも遅れることでユーザーの邪魔になりアプリケーションの感性品質を落としかねませんヒッチが起きている状態を１フレームずつ確認しましょう３枚のフレームは予想どおりに表示され指の動きと完全に合ったなめらかな動作となります

ところが３枚目のフレームが残っていると指と異なる動きになるのです

そして４枚目が表示されると突然大きく動き指の位置に戻りますこのような動作はぜひ避けたいものですそのためにはフレームがどう画面に表示されるかを理解しましょう iPhoneやiPadのフレームは通常60ヘルツで１フレームごとに 16.67ミリ秒で更新しています iPad Proでは120ヘルツとなり１フレームごとの更新は8.33ミリ秒ですこの更新はVSYNCと表されていてフレームの切り替え判断時に起こりますヒッチが発生するのはフレームがVSYNCを逃した時ですヒッチの深刻度は画面上のフレームの遅れ具合で計測できますここでは４枚目のフレームが 16.67ミリ秒遅れています

ヒッチの確認方法は２つ

ヒッチタイムはフレームの遅延時間をミリ秒単位で表しますまたミリ秒で表したヒッチ比率の出し方はミリ秒単位の合計ヒッチタイムを秒単位の他の継続時間で割ります例えばテストの継続時間ですがここではドロップフレームや毎秒フレーム(fps)を計測してみましょう fpsはずれが起きやすい絶対的な目標値ですアニメーション実行中にテストが停止時間を含んでいれば停止時間中にスワップされたフレームを予測できないので fpsは役に立ちません

私たちはfpsの最大値を意図的に目標としていませんゲームなら30fps 映像は24fpsが必要となるでしょう電力や処理能力の理由から時計アプリケーションのアイコンの針は10fpsですが信頼性を重要視しヒッチタイムの目標は常にゼロにしています比較が難しい場合もあります１秒と10秒のテストでは合計のヒッチタイムが比較できないのですそこで継続時間のヒッチをミリ秒にし比率の値を正規化することでメトリックスを取得し異なるテストの比較やエンドユーザーへの影響を想定できますこれはエンドユーザーへの影響において推奨する目標のヒッチ比率です

５ミリ秒以下であればユーザーエクスペリエンスに最適な比率で５から10ミリ秒の範囲であればユーザーが気づくヒッチとなり検証が必要です

10ミリ秒以上ならユーザーにとって使いづらくなるので早急に対処してください iOS 14ではツールを使い開発と生産のワークフローでヒッチが追跡できます XCTestはヒッチやアニメーションデータをユニットやUIテストで収集し MetricKitやXcode Orgnizerはパフォーマンスメトリックスにアクセスできます今回は XCTestを使い開発ワークフローでヒッチを確認する方法です生産ワークフローでの確認方法については MetricKitやXcode Organizerに関するセッションをご覧ください Xcode 11では XCTMetricを導入しましたこのメトリックスは計測する内容を指定します現在 XCTMetricでテストできるのはクロック数や CPU メモリの使用率 os.signpostとストレージです Xcode 12にはアプリケーションの起動時間を計るメトリックスがありメトリックスを書くためのテンプレートもあります

ここで説明するXCTOSSignpostMetricはアニメーションテストに使うXCTMetricです Xcode 11では os.signpost intervalで時間を計測します Xcode 12で os.signpost intervalを使うとメトリックスやフレームレートフレーム数に関連するヒッチも取得できます

フレームレートやフレーム数とは画面に表示されるフレームの頻度や数を計測する値ですヒッチは先ほどお話ししましたねコード内でのヒッチの回数やテスト中にヒッチが継続した合計時間コード内の時間をヒッチの合計時間で割った比率を追跡できますこのメトリックスの収集には os.signpost intervalの実行コードが必要です方法は３つです non-animation intervalは時間だけを返し animation intervalはアニメーションメトリックスも値として返します Xcode 11なら non-animation os_signpost intervalを挿入するだけで時間を返すことができます

Xcode 12では animation os.signpost intervalを指定し animationBeginインターフェイスを使うだけです１つの変更で既存のコードを animation interval実行用にできアニメーションメトリックスを受け取れます

また定義済みのUIKitに intervalを挿入することで移動やスクロールのテストができますこれは XCTOSSignpostMetricクラスでのサブメトリックスですサブメトリックスの１つを使った例を見てみましょう XCTestでの性能テストです Meal Plannerをタップし食べ物のビューを表示スワイプでスクロールします

テストで scrollDecelerationのサブメトリックスを計測しましょう

ブロック内にスワイプアップとあり Xcode 12ではスクロールの速度が変更できます

テストは問題ありませんが改善点が見つかりましたデフォルトではブロックでの性能の計測が５回実行されますつまり現在の実装では連続で５回スワイプアップする間に別のコンテンツをスワイプしてしまいます

これを避けるため実行中にアプリケーションをリセットしたいのです XCTMeasureOptionを使うことで計測の収集を手動で停止できます命令を受けた計測用のブロックがstopMesuring を呼び出しアプリケーションをリセット書いたテストを実行しましょうその前に性能への影響を取り除くためテストスキームの設定をいくつか修正しますまず XCTestの性能テスト用に別々のテストスキームがあることを確認

Build Configurationで Releaseを選び Debuggerを無効に

また Automatic Screenshotと Code Coverageも無効にします最後に診断用の全オプションを無効にしてください Runtime Sanitizationや Runtime API Checking Memory Management内にあります XCTestを実行しレポートUIで結果を確認しましょうアニメーションメトリックスのドロップダウンで Hitch Time Ratioを選びます

繰り返した５回の計測値が集積されました

ヒッチタイム比率は平均1.2ミリ秒と表示されています

次に表示された平均値の1.2ミリ秒を基準として設定しましょう今後このテストを実施した時に比較するためです

ではコードベースでヒッチの頻度を確認します XCTestを使い万全な機能を顧客に提供しましょう

私が料理の注文や配達アプリケーションの開発担当者だと仮定してみます別のメニューアイテムのビューを実装したところです

ここにそれぞれの料理画像を表示させ見やすくしていきましょう機能を加える前に現在のアニメーション性能を計測します新しい機能を追加した後に比較するためです

性能テスト用のスキームを作り先ほどの内容に沿った設定を構成しましたテストを書き出します

アプリケーションを起動し Meal Plannerをタップスクロールするアニメーションを計測します

事前にテストをしたので結果を見てみましょう

ヒッチはゼロで要求どおりのアニメーションになっていますでは新しい機能を加えてみましょう

まず既に落とし込んでいる画像を表示させるビューを設定します

次に画像のサイズを確認してアプリケーションに合わせます再度性能テストを実行しましょう

XCTOSSignpostMetricを使うと os.signpost intervalが省略された時に計測ブロックがリッスンしますまた実行されたコードのメトリックスも収集します他にも計測用ブロックは異なるos.signpost intervalにも対応し scrollDecelerationや scrollDragging os.signpost intervalをリッスンできますスワイプアップと同じブロック内ですではテストの終了後から続けますヒッチ数が増加したようなのですぐに対処が必要です

問題は scaleAspectFitです残りのUIの元となるメインスレッドの画像を書き直すため CPUで新しいピクセルを作りメモリを割り当てます

書き直した画像をGPUに渡す CoreAnimationの setContentModeなら既存のピクセルを利用できるのでメインスレッドでの作業量を軽減できます

テストを再実行し問題が解決したか確認しましょう

アニメーションメトリックスのヒッチはゼロに性能も要求どおりになりました

XCTestでリグレッションを起こす機能を検出し修正することができたので安心して顧客に届けることができます

では今日のおさらいですヒッチはフレームが予想より遅く画面に表示されることで推奨の検証カテゴリーを使ってヒッチの状態を計測できます

そして XCTestを使った開発ワークフローでのヒッチの確認です UIKitや os.signpost intervalでも確認できますまた計測を繰り返す間にアプリケーションのコンテンツをリセットする方法や不正確さを防ぐスキーム構成も説明しましたコードベースでヒッチを回避してスムーズなアニメーションを提供しましょうご覧いただきありがとうございました

6:35 - Create an animation os_signpost interval

os_signpost(.animationBegin, log: logHandle, name: "performAnimationInterval")
os_signpost(.end, log: logHandle, name: "performAnimationInterval")

6:55 - Use a UIKit instrumented animation os_signpost interval

extension XCTOSSignpostMetric {
     open class var navigationTransitionMetric: XCTMetric { get }
     open class var customNavigationTransitionMetric: XCTMetric { get }
     open class var scrollDecelerationMetric: XCTMetric { get }
     open class var scrollDraggingMetric: XCTMetric { get }
}

7:12 - Measure scrolling animation performance using a Performance XCTest

// Measure scrolling animation performance using a Performance XCTest
func testScrollingAnimationPerformance() throws {
    app.launch()
    app.staticTexts["Meal Planner"].tap()
    let foodCollection = app.collectionViews.firstMatch
    
    measure(metrics: [XCTOSSignpostMetric.scrollDecelerationMetric]) {
        foodCollection.swipeUp(velocity: .fast)
    }
}

8:02 - Reset the application state between runs

func testScrollingAnimationPerformance() throws { 
    app.launch()
    app.staticTexts["Meal Planner"].tap()
    let foodCollection = app.collectionViews.firstMatch

    let measureOptions = XCTMeasureOptions()
    measureOptions.invocationOptions = [.manuallyStop]
        
    measure(metrics: [XCTOSSignpostMetric.scrollDecelerationMetric],
            options: measureOptions) {
        foodCollection.swipeUp(velocity: .fast)
        stopMeasuring()
        foodCollection.swipeDown(velocity: .fast)
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。