iOS7(およびiOS8も同様)のリリース後、アニメーションとモーションエフェクトは、Appleとサードパーティの開発者の両方からアプリの設計の中心となりました。 iOS7ではフラットで最小限のデザインがアプリに導入され、必然的に同様のUIを持つアプリがいくつかありました。 他のアプリから自分のアプリを区別するために、開発者は自分のアプリが目立つようにアニメーションやモーション効果などの機能を採用しました。

アニメーションを使用してアプリを分離するだけでなく、アプリケーションの全体的なユーザーエクスペリエンスを向上させることができます。 Uxを改善するためにアニメーションがどのように使用されるかの素晴らしい例については、Appleがアプリでアニメーションをどのように使用しているかを見てみましょう。 たとえば、写真アプリでは、コレクションから写真を選択すると、選択した写真から写真が展開され、閉じたときに選択した写真に縮小されます。 これは、多くの写真を閲覧した場合、あなたがどこにいたかを正確に知ることができるという点で、アプリのナビゲーションに追加されます。

Facebookの論文はまた、アプリの全体的なユーザーエクスペリエンスに追加するために美しくアニメーションを採用しています。 あなたはそれを反転して読む記事を選択します。 このアクションは、記事がそのサムネイルバージョンから展開されるという事実は、反対のこと、すなわち記事を下方に反転させることで、それをサムネ ここでは、アニメーションは、アプリがどのように動作するかを伝えるために使用され、アプリのさえ初めてのユーザーはすぐにその使用上の仮定を行い、チュー

アニメーションは、アプリのユーザーエクスペリエンスに追加するだけでなく、App Storeからより良いもののためにアプリをアンインストールするのではなく、ユーザーが繰り返し使用を保証することを喜ばせ、感動させるものになる可能性があります。

アプリにアニメーションを含めるには、UIKit Dynamics、レイヤーアニメーション、view controllerトランジション、Facebook PopライブラリやJNWSpringAnimation frameworkなどのサードパーティのライブラリを使用する

このチュートリアルでは、単純なビューアニメーションを見ていきます。 Starterプロジェクトは、tutorial tutorialで示されている例を一覧表示するテーブルビューを備えた単一ビューアプリケーションです。 私たちはチュートリアルの例の部分に到達するとき、私は代わりにゼロから始まるのではなく、これを使用します。

チュートリアルでは、ビューをアニメーション化するために使用されるApiの概要から始まり、アプリでのApiの使用を示すいくつかの例で終わります。

基本的なビューアニメーション

ビューにアニメーションを作成することは、それらのプロパティを変更し、UIKitに自動的にアニメーション化させることです。 変更するプロパティは、Animatableとマークされたプロパティです。

次のリストは、アニメーション可能なプロパティを示しています。

  • センター
  • アルファ
  • フレーム
  • 境界
  • 変換
  • backgroundColor
  • contentStretch

あなたはそれを見つけるでしょうすべてのアニメーションには、上記のプロパティの1つまたは複数の変更が含まれます。

単純なビューアニメーションの場合、UIKitは画面上のビューをアニメーション化するために使用できる次のApiを提供します。

最初のパラメータは、アニメーションの秒単位の持続時間の値と、変更するプロパティを指定するクロージャの二つのパラメータを取ります。 UIKitはビューの元の状態を取得し、animationsクロージャで指定した内容に従って、その状態から終了状態へのスムーズな移行を作成します。

他の二つのApiは最初のApiに似ていますが、アニメーションに設定を追加する余分なパラメータを取ります。 このクロージャを使用して、最初のアニメーションの後に実行する別のアニメーションを指定するか、別のビューがシーンにアニメーション化された後にビュー階層からビューを削除するなど、UIのクリーンアップを行うことができます。

3番目のAPIは、アニメーションが開始されるまでの待機時間である遅延と、アニメーションの実行方法を示すUIViewAnimationOptions定数を追加の2つのパラメータを取ります。 以下に、使用可能なオプションを示します。

Spring Animations

Spring animationsは、ビューがある点から別の点に移動すると、位置に落ち着く前に端に向かって跳ね返る/振動するという点で、実際のスプリングの動作をモデ

以下は、spring animationsで使用するメソッドブロックです。

  • animateWithDuration(_:,delay:,usingSpringWithDamping:,initialSpringVelocity:,options:,animations:,completion:)

上記は、usingSpringWithDampingとinitialSpringVelocityという二つの新しいパラメータを除いて、前に見た方法と似ています。 Dampingは、アニメーションの終わりに向かってビューがどのくらい跳ね返るかを決定する0から1の値です。 値が1に近いほど、弾むことは少なくなります。 initialSpringVelocity名前が示すように、アニメーションの初期速度を決定します。 これは、アニメーションが開始する強さを決定します。 あなたはそれが積極的に開始したい場合は、より大きな値を設定し、スムーズなアニメーションが必要な場合は、値を0に設定することができます。

キーフレームアニメーション

キーフレームアニメーションを使用すると、アニメーションのさまざまなステージを設定できます。 いくつかの共通のプロパティを共有する異なるアニメーションをグループ化することができますが、それらを別々に制御することはできます。

パスに沿って移動するアニメーションの代わりに、UIKitはアニメーションのさまざまなステージを実行します。

キーフレームアニメーションApiは次のとおりです。

上記の二つのメソッドが一緒に使用され、第二は最初のanimationsクロージャにネストされます。

最初の方法は、アニメーションの全体的な構成、時間、遅延、およびそのオプションを設定します。 次に、アニメーションのさまざまなステージを設定するために、animationsクロージャ内に二つ目のメソッド(フレーム)の一つ以上を定義します。

各フレームの相対開始時間と相対持続時間は、アニメーションの合計持続時間内の時間の割合を表す0から1の間の値です。

ビュー遷移

ビュー遷移は、ビュー階層に新しいビューを追加したり、ビュー階層からビューを削除したりするときに使用されます。

ビュー遷移を作成するために使用されるApiは

最初のApiを使用して、ビュー階層にビューを導入します。 このメソッドは、他のアニメーションメソッドと同様のパラメータを取ります。

2番目のビューは、ビュー階層から1つのビューを取得し、その場所に新しいビューを配置するために使用されます。

ここでは、上記のAPI呼び出しのいくつかを使用して、指定されたstarterプロジェクトのビューをアニメーション化するいくつかの例を見てみましょう。

例I

プロジェクトを実行すると、作業する例を一覧表示するテーブルビューが表示されます。 リストで例Iを選択すると、ユーザー名とパスワードのフィールドとログインボタンを持つアプリのログイン画面が表示されます。

アプリの起動時にこれらを画面上にアニメーション化したい。

開始するには、ビューが最初に表示されたときにビューを視界から非表示にします。 自動レイアウトの前に、これはコード内の特定のビューの位置を変更する簡単な問題でしたが、storyboardファイル内のビューに自動レイアウト制約を設定するた

まず、変更する制約の参照を取得する必要があります。 Storyboardファイルを開きます。 例Iシーンで次の制約を探します。

アシスタントエディタを開き、それがExampleIViewControllerであることを確認します。分割画面のストーリーボードの横に表示されるswift。 Center X Alignment–View–Username制約からExampleIViewControllerクラスにドラッグします。 CenterAlignUsernameという名前のアウトレットを作成します。 Center X Alignment–View–Passwordについても同じことを行い、その名前をcenterAlignPasswordに設定します。 また、loginButtonという名前のログインボタンのコンセントと、同じボタンのアクションを作成し、loginという名前を付けます。 アクションのタイプをUIButtonに設定してください。 コードには次のようにする必要があります。

1
2
3
4
5
6
7

@IBOutlet weak var centerAlignUsername:NSLayoutConstraint!
@IBOutlet weak var centerAlignPassword:NSLayoutConstraint!
@IBOutlet weak var loginButton:UIButton!
@IBAction funcログイン(送信者:UIButton) {
}

ExampleIViewControllerで。swiftは、ビューが画面に表示される前に呼び出される次のメソッドを追加します。

これにより、ユーザー名とパスワードフィールドが表示されなくなり、ボタンのアルファ値が0に設定され、非表示になります。

ビューが表示されたときに右に呼び出される次のメソッドを追加します。

ここではUIViewを使用します。先ほど見たanimateWithDuration()メソッド。 UIViewAnimationOptionsが含まれています。アニメーションが高速に開始し、最後に遅くなりますCurveEaseOutオプション。 ここでさまざまなオプションを試すことができます。 Commandキーを押しながらUIViewAnimationOptionsをクリックすると、利用可能なすべてのオプションが表示されます。

アニメーションは0.5秒間続き、すぐに開始されます。 期間中は自由がありますが、アプリのアニメーションに時間がかかりすぎるように見えるときに、ユーザーを困らせるような大きな数を設定しないでくださ 通常、持続時間は0.5〜0.7秒の間に設定されていますが、私が言ったように、これは石に設定されておらず、あなたには正しいと感じるものに設定する自由があります。

アニメーションは、viewWillAppear()で行ったこととは正反対の動作をします。 layoutifneeded()は、変更されたビューをすぐにレイアウトするために使用されます。 あなたがそれを含めない場合、あなたはそれらが画面上にアニメーション化されるのを見ることはありません、代わりに彼らは彼らの最終的な位置に アプリを実行すると、次のように表示されます。

上記は静的なプレゼンテーションよりも面白いように見えますが、同時にアニメーション化されたビューは、その偉大な効果を作成しません。 以下に示すようにメソッドを変更します。

アプリを実行すると、結果のアニメーションには、異なる時間に画面上でアニメーション化されたビューがあります。 コードを見ると、最初のアニメーションブロックの後に、後続のアニメーションブロックに遅延を設定していることがわかります。

ログイン画面では、ログインが失敗したときに、通常、ログインが失敗したことをユーザーに示すアニメーションがあります。 これは、テキストフィールドやログインボタンの揺れ、およびログインが失敗したことをユーザーに知らせるメッセージとして行われることがあります。 Springsを使用してログインボタンにこのような効果を追加します。 次のようにlogin()関数を変更します。

上記は、押されたときにログインボタンのサイズを変更し、スプリングアニメーションでアクションをアニメーション化すると、ボタンの幅が拡大し、セト

減衰値で遊んでください。 1に設定すると、ボタンは拡張され、最後にバウンスすることはありません。 ユーザー名フィールドとパスワードフィールドでも同じ方法を使用できます。 代わりに、それらが画面上に来て、ちょうど最後に所定の位置に停止するのではなく、それらを春のようにして、落ち着く前に少しバウンスしています。

例II

アプリでは、何らかのアクションが発生したときにビューの背景画像を自動的に置き換える必要がある場合があります。 あなたは、画像がすぐにビュー上の別のものを置き換える方法でそれを行うことができ、またはあなたはゆっくりと素敵な遷移を作成するためにそ ここでこの効果を作成します。 ExampleIIViewControllerを開きます。swiftと以下を追加します。

ここでは、画像ビューを作成し、メインビューに追加します。 次に、imageFadeIn()を呼び出して、別の画像で2番目のビューを作成します。 このビューを最初の画像ビューの上に追加し、アルファを0に設定します。 Animationブロックでは、アルファ値をアニメーション化して可視にします。 次に、補完クロージャを使用して画像ビューの画像を2番目の画像に設定し、2番目の画像ビューが不要になったため、ビュー階層から2番目の画像ビューを削 テーブルビューから例IIを選択した瞬間にアニメーションが正しく発生しないように、長い遅延を追加しました。 私たちはデモで何が起こっているかを見ることができるように、期間も少し長いです。

以下がその効果です。

例III

次に、キーフレームアニメーションを見ていきます。 ExampleIIIViewControllerを開きます。swiftとファイルに次の変数と関数を追加します。 私は各ステップを説明するためのコードをコメントしました。

viewDidLoad()でcreateView()関数を呼び出します。 ViewDidLoad()の一番下に以下を追加します。

1
createView()

アプリを実行し、テーブルビューからExample IIIを選択すると、上部に画像ビューがあり、中央にボタンがある赤いビューが表示されます。

ビュー(これ以降はalertViewと呼びます)のサイズが縮小され、ビューから下方に落ちるようにしたいと考えています。

ボタンを作成したときに、リスナーを追加しました。 ボタンがタップされると、dismissAlert()が呼び出されます。 次のように関数を変更します。

上記のコードでは、ビューをアニメーション化する二つの段階に必要なものを表すフレームを作成します。 smallFrameはalertViewの半分のサイズに縮小され、中心点が維持され、finalFrameは画面の下部に位置し、ビュー外にあります。

二つのキーフレームを持つキーフレームアニメーションを使用します。 最初はalertViewのフレームをsmallFrameに設定し、2番目はfinalFrameに設定します。 その結果、alertViewはそのサイズの半分に縮小され、ビューから外れます。 4秒–私は持続時間のために、このような大規模な数を入れていることに注意してください。 あなたはこれを変更することができます、私はちょうどデモのためにスローモーションで実行されているアニメ アプリを実行し、例IIIを選択します.

アニメーションは、私たちが期待していたものではありません。 期待どおりに赤いalertView animateを見ることができますが、その子のスケールは変更されません。 親のフレームを変更しても、子のフレームは自動的には変更されません。

アニメーションを修正するには、iOS7で導入されたUIView snapshotsという機能を使用します。 これにより、UIViewのスナップショットをその階層と一緒に取得し、それを新しいUIViewにレンダリングすることができます。

dismissAlert()では、キーフレームアニメーションコードの直前に次のように追加します。

1
2
3
4

スナップショット=alertViewとします。snapshotviewafterscreenupdates(false)
スナップショット。フレーム=alertView。フレーム
ビュー。追加サブビュー(スナップショット)
alertView.removeFromSuperview()

ここでは、スナップショットビューを作成し、メインビューに追加します。 次に、スナップショットがそれを置き換えるので、ビューからalertViewを削除します。

キーフレームアニメーションを次のように置き換えます。

アプリケーションを実行し、Dismissをタップすると、ビュー(スナップショット、実際には)が期待どおりにアニメーション化されます。

例IV

単純なビューをアニメーション化する方法を見てきました。 この例では、テーブルビューをアニメーション化する方法を見ていきます。

テーブルビューから例IVを選択すると、項目のリストを含む別のテーブルビューが表示されます。 テーブルビューが表示されると、リスト項目はすでにテーブル上に配置されます。 私たちは、より興味深い効果を作成するために、ビュー上にそれらをアニメートしたいです。

ExampleIVViewControllerを開きます。swiftと次のメソッドを追加します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

オーバーライドfunc viewWillAppear(アニメーション化されています: Bool){
()
}
func animateTable(){
tableView.リローダータ()
セル=tableViewとします。visibleCells()
tableheight:CGFloat=tableViewを設定します。バウンド。サイズ。高さ
セル内のiの場合{
セルをuitableviewcell=iとしてuitableviewcell
セルとします。transform=C G A F F I N E T Ransformmaketranslation(0,tableHeight)
}
varインデックス= 0
for a in cells{
let cell: Uitableviewcell=aとしてUITableViewCell
UIView。animateWithDuration(1.5,delay:0.05*Double(index),usingSpringWithDamping:0.8,initialSpringVelocity:0,options:nil,animations:{
セル。transform=C G Affinetransformmaketranslation(0, 0);
}, 完了:nil)
インデックス+= 1
}
}

ここでは、ビューが表示されると、animateTable()関数が呼び出されます。 テーブルビューデータをリロードし、現在画面に表示されているセルをループし、それぞれを画面の下部に移動します。 次に、画面の下部に移動したすべてのセルを反復処理し、春のアニメーションでそれらを元の位置にアニメーション化します。

アプリを実行すると、次のように表示されます。

結論

アプリのビューにアニメーションを追加するために使用できるさまざまなApiを見てきました。 これはiOSのアニメーションに関する網羅的なガイドではありませんが、私たちが見てきた簡単なApiを使用することで、アプリでさまざまなアニメーション IOSアニメーションにさらに飛び込むには、UIKitダイナミクス、レイヤーアニメーション、view controllerトランジション、さらにはモーショ また、Facebook PopやJNWSpringAnimation frameworkのようなサードパーティのライブラリを見ることもできます。

完成したプロジェクトはこちらからダウンロードできます。

コメントを残す

メールアドレスが公開されることはありません。