Swiftでテーブルビューをアニメーション化するためのガイド

標準のUITableViewは、アプリケーションでデータを表示するための強力であると同時に柔軟な方法です。 作成するアプリケーションのほとんどは、何らかの形で表形式のビューを使用する可能性があります。 ただし、ある程度のカスタマイズを行わないと、アプリケーションは見た目が悪く、何千もの類似したアプリケーションとマージされるという欠点があります。 「退屈な」テーブルを回避するために、アプリケーションを「活気づける」適切なアニメーション画像をいくつか追加できます。 Google+アプリでこのようなものを見たことがあるかもしれません。このアプリでは、表のセルが文字通り画面を飛び回り、クールなアニメーションを表示します。 注意を払っていない場合は、 ここからダウンロードできます （無料）。 また、Googleが2014 I / O Conferenceでリリースしたデザインガイドラインを理解しておくと便利で興味深い場合があります。 アプリケーションでアニメーションを効率的かつ正しく使用する方法に関する多くのヒントと例が含まれています。





この記事では、テーブルセルをスクロールして画像を垂直に移動するときに、既存のアプリケーションにSwift拡張プログラミング言語を使用します。 UIKitへの変換方法も説明されており、画面上で同時に発生するアクションが多すぎることによる過負荷を避けるための便利な使用法も説明されています。 タスクがシンプルかつ明確になり、メインコントローラーがシンプルになるように、プログラムコードを整理する方法に関するヒントを受け取ります。



始めるには、UITableViewとSwiftの基本的な要素を操作する方法に慣れる必要があります。 これに慣れる必要がある場合は、表形式のプレゼンテーションアプリケーションに関するSwift言語での作業の基本を学習するSwiftチュートリアルシリーズに慣れることができます。



始めましょう。



スタータープロジェクトをダウンロードし、Xcode 6で開きます。プロジェクトの簡単な説明（UITableViewController）サブクラス（MainViewController）が表示され、開発者を表示するUITableViewCell（CardTableViewCell）が設定されます。 また、チームメンバーに関するすべての情報を記述し、アプリケーション内にあるJSONファイルからこの情報を抽出する方法を知っているMemberクラスの例もあります。



プロジェクトをコンパイルして実行します。 以下が表示されます。







優れたデザイン、特別なタッチと洗練を与える準備ができて



アプリケーションはすぐに使用できますが、もう少し個人主義を含めることができます。いわば、独自の「ハイライト」を持つことができます。 これがあなたの仕事です。 Core Animationでいくつかのトリックを使用して、データセルにスパイスを加えます。



可能な限り簡単なアニメーション方法を特定します。



アプリケーションの基本構造を取得するには、簡単なヘルパークラスを作成することから始めます。 File \ New \ File ...に移動し、空のSwiftファイルのiOS \ Source \ Swift Fileのタイプを選択します。 [次へ]をクリックし、ファイルにTipInCellAnimator.swiftという名前を付けて、[作成]をクリックします。



ファイルの内容を次のコードに置き換えます。

import UIKit class TipInCellAnimator { // placeholder for things to come -- only fades in for now class func animate(cell:UITableViewCell) { if let view = cell.contentView { view.layer.opacity = 0.1 UIView.animateWithDuration(1.4) { view.layer.opacity = 1 } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この単純なクラスには、データを含むセルを取得し、そのコンテンツ（contentView）にアクセスし、レイヤーの初期透明度を0.1に設定するアルゴリズムが含まれています。 次に、1.4秒後、終了式のプログラムコードはレイヤーの透明度を1.0に戻します。



注： Swift の式は、外部変数にまたがることができるコードのブロックです。 たとえば、{}は単純な式です。 funcとして指定された関数は、名前付き式の例です。 Swiftでは、他の関数内の関数を開くことができます。



式を関数の最後の引数として渡した場合、特別な末尾クロージャー構文（最終式）を使用して、式を関数呼び出しの外側に移動できます。



式の詳細については、Swiftプログラミング言語の本を参照するか、Wikipediaのクロージャーの豊富な記事を参照してください。



アニメーションコードの準備ができたら、データセルが表示されたときに新しいアニメーションを開始するようにテーブルを構成する必要があります。



アニメーションを開始



アニメーションを開始するには、MainViewController.swiftファイルを開き、次のメソッドを追加します。

 override func tableView(tableView: UITableView!, willDisplayCell cell: UITableViewCell!, forRowAtIndexPath indexPath: NSIndexPath!) { TipInCellAnimator.animate(cell) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このアルゴリズムは、UITableViewDelegateプロトコルで定義され、セルが画面に表示される前に呼び出されます。 次に、アニメーションを開始するために、TipInCellAnimatorクラスアルゴリズムが各セルに対して呼び出されます。



アプリケーションをコンパイルして実行します。 情報の表をスクロールして、セルがゆっくり消える様子を確認します。







回転効果



アプリケーションをさらに魅力的にし、回転を追加しましょう。 これはポップアップアニメーションと同じように機能しますが、変換の開始と終了の両方を指定します。



TipInCellAnimator.swiftファイルを開き、内容を次のものに置き換えます。

 import UIKit import QuartzCore // 1 class TipInCellAnimator { class func animate(cell:UITableViewCell) { if let view = cell.contentView { let rotationDegrees: CGFloat = -15.0 let rotationRadians: CGFloat = rotationDegrees * (CGFloat(M_PI)/180.0) let offset = CGPointMake(-20, -20) var startTransform = CATransform3DIdentity // 2 startTransform = CATransform3DRotate(CATransform3DIdentity, rotationRadians, 0.0, 0.0, 1.0) // 3 startTransform = CATransform3DTranslate(startTransform, offset.x, offset.y, 0.0) // 4 // 5 view.layer.transform = startTransform view.layer.opacity = 0.8 // 6 UIView.animateWithDuration(0.4) { view.layer.transform = CATransform3DIdentity view.layer.opacity = 1 } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

今回は動きが速くなり（0.4秒）、フローティングがより便利になり、興味深い回転効果が得られます。 前述のアニメーションのキーは、セルを元の位置に戻すstartTransformマトリックスによって決まります。 これがどのように発生するかを理解します。



1.このクラスはキーアニメーション変換を使用するため、QuartzCoreをインポートする必要があります。

2.「ダミー操作」の算術式である変換を認識することから始めます。 これがデフォルトの画像変換です。

3. CATransform3DRotateに移動して、15度の回転を取得します。マイナス記号は反時計回りの回転を示します。 移動は軸0.0、0.0、1.0を中心に実行され、垂直軸zを表します。x= 0、y = 0、z = 1です。

4.テーブル/グラフはその中心に対して回転するため、回転だけの使用では不十分です。 角度から反転する効果を作成するには、シフトまたはオフセットを追加します。負の値は、左上への移動を示します。

5.変換結果を元のビューに設定します。

6.画像を動かして、元の値に戻します。



次の図に示すように、最終的な変換を作成できることに注意してください。





注：変換の任意のチェーンは、最終的に単一のマトリックスで表すことができます。 学校で行列代数を学んだ場合、行列の乗算のアクションを覚えておいてください。 各ステップは、最終的なマトリックスに到達するまで新しい変更を乗算します。



また、セル自体ではなく、セルの「幼稚な」外観が変化していることに気付くでしょう。 セル全体を回転させると、上下の部分が表示されなくなり、振動やセルのトリミングなどの奇妙な視覚効果が得られます。 ContentViewセルには、すべての構成要素が含まれます。



すべてのプロパティがアニメーションをサポートするわけではありません。 『 コアアニメーションプログラミングガイド』には、明確にするためのアニメーション可能なプロパティのリストがあります 。



アプリケーションをコンパイルして実行します。 データセルがどのように傾くかを確認します。





迅速なリファクタリング



Objective-Cの正規バージョンは、変換の開始を一度だけ決定します。 前述のソースコードのバージョンでは、毎回新しい方法でanimate（）によって計算されます。 Swiftでそれを行う方法は？



1つの方法は、式への遷移によって決定される不変ストレージを使用することです。 TipInCellAnimator.swiftファイルの内容を次のものに置き換えます。

 import UIKit import QuartzCore let TipInCellAnimatorStartTransform:CATransform3D = { let rotationDegrees: CGFloat = -15.0 let rotationRadians: CGFloat = rotationDegrees * (CGFloat(M_PI)/180.0) let offset = CGPointMake(-20, -20) var startTransform = CATransform3DIdentity startTransform = CATransform3DRotate(CATransform3DIdentity, rotationRadians, 0.0, 0.0, 1.0) startTransform = CATransform3DTranslate(startTransform, offset.x, offset.y, 0.0) return startTransform }() class TipInCellAnimator { class func animate(cell:UITableViewCell) { if let view = cell.contentView { view.layer.transform = TipInCellAnimatorStartTransform view.layer.opacity = 0.8 UIView.animateWithDuration(0.4) { view.layer.transform = CATransform3DIdentity view.layer.opacity = 1 } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

startTransformを生成するプログラムコードに注意してください。 これは、TipInクラスCellAnimatorStartTransformのプロパティになりました。 作成メソッドのプロパティと各リクエストの変更を定義する代わりに、式を割り当て、空の括弧のペアを割り当てることにより、デフォルトの変換プロパティを設定します。 ブラケットを使用すると、式をすぐに呼び出して、プロパティに戻り値を割り当てることができます。 この初期化イディオムは、初期化セクションのAppleのSwiftの本で説明されています。 詳細については、「式または関数のデフォルト値の設定」を参照してください。



注： TipInCellAnimatorStartTransformクラスでTipInCellAnimatorプロパティを作成すると便利ですが、執筆時点では、クラスプロパティはまだSwiftに実装されていません。



変換に制約を追加する



アニメーション効果はかなり簡潔ですが、慎重に使用してください。 サウンドエフェクトまたはアニメーションエフェクトの乱用が原因でプレゼンテーションを見ているときに不快感を経験したことがある場合は、過剰または乱用が何であるかを把握できます。 プロジェクトでは、セルが最初に表示されたとき（下から上へスクロールするとき）にのみアニメーションが表示されるようにします。 上にスクロールすると、セルはアニメーションなしになります。



以前に表示されたセルのアニメーションの繰り返しを避けるために、このような方法を開発する必要があります。 これを行うには、キーによるクイック検索を提供するSwift Dictionary（Dictionary）が表示されます。



注：命令のセットは、重複のない一意のレコードの順序付けられていないコレクションであり、配列は重複を許可する順序付けられたセットです。 Swift Library（Swift Standard Library）には一連の指示は含まれていませんが、Dictionary of Boolsを簡単に再生できます。



したがって、辞書の使用に対するペナルティは小さいため、おそらくSwift開発チームはそれらを最初のリリースから削除しました。 命令または辞書キーのセットの一般的な欠点は、一貫性を保証しないことですが、セルの順序付けはデータジェネレーターによって行われるため、これは問題ではありません。



MainViewController.swiftを開き、次のクラスプロパティを追加します。

 var didAnimateCell:[NSIndexPath: Bool] = [:]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、NSIndexPathをキーとして、Boolsをプロパティとして認識する空の辞書（辞書）を作成します。 次に、tableViewメソッド（tableView：、willDisplayCell：、forRowAtIndexPath :)を次のように置き換えます。

 override func tableView(tableView: UITableView!, willDisplayCell cell: UITableViewCell!, forRowAtIndexPath indexPath: NSIndexPath!) { if didAnimateCell[indexPath] == nil || didAnimateCell[indexPath]! == false { didAnimateCell[indexPath] = true TipInCellAnimator.animate(cell) } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テーブルを上下にスクロールしながらセルを表示するたびにアニメーション化する代わりに、セルのindexPathが辞書に保存されていることを確認してください。 そうでない場合は、セルが初めて表示されたため、アニメーションを開始し、indexPathを命令セットに追加する必要があります。 すでにキットに含まれている場合は、何もしないでください。



プロジェクトをコンパイルして実行します。 Tableviewを上下にスワイプすると、画面に最初に表示されたときにアニメーション化されたセルのみが表示されます。







次に何をする？



このチュートリアルでは、標準の視覚化制御方法にアニメーションを追加しました。 アニメーション実装の詳細は、MainViewControllerクラスで指定されていません。 それどころか、それらは補助クラスに移されました。 特にディスプレイコントローラーのアクティブな状態でクラスの責任を維持することは、IOSの開発における主要な課題の1つです。 完成したプロジェクトをダウンロードできます



セルにアニメーションを追加する基本を学習したので、変換の値を変更して、作成できる他の効果を確認してください。 いくつかのアイデア：



1.アニメーションの高速化または低速化。

2.より大きな傾斜角。

3.異なるオフセット：回転角度を変更する場合、ほとんどの場合、画像をまっすぐに見えるようにオフセットを変更する必要があります。 オフセットを完全に省略し、パラメーターの値（0、0）を使用すると、イメージはどのようになりますか？

4.創造性を発揮し、オリジナルの画像を作成します。

5.上級ユーザー向け：水平軸または垂直軸でテーブルを回転させる効果を得ることができますか？ 完全なクーデターのように見せることはできますか？

6.上級ユーザーの場合：else句をtableView（tableView：、willDisplayCell：、forRowAtIndexPath :)に追加し、データセルが2回目に表示されるときに異なるアニメーション効果を取得します。



データセルに適用できるクレイジーなひねり。



この記事からアニメーションを作成するための簡単なガイドを学習したとしても、この情報に基づいて無限のバリエーションを作成できます。 アニメーションは、ユーザーのアクションに大きく追加できます。たとえば、セルを円形に反転したり、フェードアウトしたり、プレゼンテーションに表示したり、セルを削除したりできます。



ps翻訳は、Habréで最も正確で最高の翻訳であるふりをしません。コメントがあれば、個人で書いて、編集します。 ご理解いただきありがとうございます。