iOS UIViewアニメーション練習(5)：キーフレームアニメーション_html/css_WEB-ITnose

はじめに

場合によっては、複雑で一貫した UIView アニメーションを作成する必要がある場合があります。このとき、アニメーションのセグメントを接続して連続アニメーションにする必要がある場合があります。

アニメーションを 2 つまたは 3 つだけ接続する場合は、この方法でも機能する可能性がありますが、接続する必要があるアニメーション クリップがさらに多い場合、この方法では致命的な問題が発生し、コードが非常に冗長になり、常にネストされます。コードが完了クロージャに含まれるため、コードの保守が非常に困難になります。そこで今日は、この要件をよりよく実現できるキーフレーム アニメーションの方法を紹介します。

キーフレーム アニメーションを使用すると、複数のアニメーション セグメントで接続されている複雑なアニメーションを効果的に分割でき、各アニメーション セグメントの開始点と継続時間をより正確に定義でき、コード構成も非常に明確になります。まず、今日実装するアニメーションのデモを見てみましょう:

使用シナリオ

まず、どのような状況でキーフレーム アニメーションを使用する必要があるかを理解しましょう。 。以下の図に示すように、これは 4 つのアニメーションで構成される複雑なアニメーションであり、UIView が長方形の軌道に沿って移動できるようになります。

コードで実装する方法を見てみましょう:

[cpp] view plaincopy

1. UIView.animateWithDuration(1, アニメーション: {

2. view.center.x += 200.0

3. }、完了: { _ in

4. UIView.animateWithDuration(1,アニメーション: {

5. view.center.y += 100.0

6. }、完了: { _ in

7. UIView.animateWithDuration(1, アニメーション: {

8. view.center.x -= 200.0

9. }、完了: { _ in

10. UIView.animateWithDuration(1, アニメーション: {

11. view.center.y -= 100.0

12. }、完了: nil)

13. })

14. })

15. })

上記の疑似コードからわかるように、アニメーションの各セグメントを接続するために補完クロージャーを使用しています。コードは明瞭で、可読性はまあまあです。しかし、UIView を複雑なルートに従って実行する場合、このアニメーションは 10 ～ 10 を超えるアニメーションで構成されている可能性があり、接続に完了クロージャを使用すると、コードはひどいものになります。幸いなことに、キーフレーム アニメーションがあります。キーフレーム アニメーションの使用方法を見てみましょう。

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

まず、UIView の別のアニメーション メソッド animateKeyframesWithDuration(_: 遅延: オプション: アニメーション: 完了: ):

[cpp ] view plaincopy

1. UIView.animateKeyframesWithDuration(2、遅延: 0、オプション: []、アニメーション: {

2. // キーフレームを追加

3. }、完了: nil)

このメソッドのいくつかのパラメーターは、アニメーションの前に使用したものと同じです。メソッドのパラメータは同じです。上記のコード スニペットは、キーフレーム アニメーション全体の継続時間が 2 秒で、遅延なし、アニメーション オプションなし、実行後にその後の実行がないことを意味します。

注: このメソッドのアニメーション オプションは UIViewAnimationOptions ではなく、UIViewKeyframeAnimationOptions になりました。特定の内容については、Apple のドキュメントを確認してください。

次に、アニメーション クロージャーにキーフレームを追加する必要があります:

[cpp] view plaincopy

1. UIView.animateKeyframesWithDuration(2、遅延: 0、オプション: []、アニメーション: {

2. UIView.addKeyframeWithRelativeStartTime(0、relativeDuration: 0.25、アニメーション: { >

3. view.center.x += 200.0

4. })

5. }、完了: nil)

addKeyframeWithRelativeStartTime(_:relativeDuration:animations:) は、UIView がキーフレームを追加するメソッドです。このメソッドには 3 つのパラメーターがあります。

• startTime: キーフレームの開始時間。 、この時間はキーフレーム アニメーション全体の継続時間に相対し、一般的な値は 0 ～ 1 です。 0 の場合は、このキーフレームがアニメーション全体の 0 秒目から実行されることを意味し、0.5 に設定されている場合は、アニメーション全体の途中から実行されることを意味します。

• relativeDuration: キーフレームの継続時間。この時間もキーフレーム アニメーション全体の継続時間に対して相対的であり、一般的な値も 0 から 1 の間です。 0.25 に設定すると、このキーフレームの継続時間がアニメーション全体の継続時間の 4 分の 1 であることを意味します。

• アニメーション: ビュー アニメーション プロパティのアニメーション クロージャを設定します。

上記のコードを説明しましょう。キーフレーム アニメーション全体の継続時間は 2 秒です。最初のキーフレームは 0 秒から始まり、0.5 秒間実行されます。次に、他の 3 つのキーフレームを完成させます。

[cpp] view plaincopy

1. UIView.animateKeyframesWithDuration(2, late) : 0、オプション: []、アニメーション: {

2. UIView.addKeyframeWithRelativeStartTime(0、relativeDuration: 0.25、アニメーション: {

3. ビュー . center.x+= 200.0

4. })

5. UIView.addkeyframewithrelativeTarttime (0.25、RelativeDuration: 0.25、アニメーション: {

6. view.center.y += 100.0

7. })

8. UIView.addKeyframeWithRelativeStartTime(0.5、相対期間: 0.25) 、アニメーション: {

9. view.center.x -= 200.0

10. })

11. UIView.addKeyframeWithRelativeStartTime(0.75、relativeDuration: 0.25、アニメーション: {

12. view.center.y -= 100.0

13. })

14. }、完了: nil)

2 番目のキーフレームの開始時間は 0.25、つまりアニメーション全体の 0.5 時間目から始まります。 time 実行時間も 0.5 秒です。最後の 2 つのキーフレームのパラメータを理解するのは難しくありません。

これで、コード全体が非常にきれいに整理され、非常に読みやすくなり、より正確に制御できるようになりました。さらにいくつかのキーフレームでも簡単に処理できます。

キーフレーム アニメーションは、同じビューのセグメント化されたアニメーションだけでなく、異なるビューの結合アニメーションにも使用されます。レイヤー アニメーションについてはまだ説明していないため、最初のサンプル アニメーションはキーフレーム アニメーションです。複数のビューを組み合わせたアニメーションを実装するために使用されます。

アニメーションの例

この例は紙飛行機ビューの連続アニメーションのように見えますが、実際には 3 つの紙飛行機ビューの組み合わせです:

写真からわかるように、実際には 3 つの紙飛行機ビューがありますが、インターフェースが読み込まれる前は、紙飛行機ビュー 2 番と 3 番の透明度は両方とも 0 です。

アニメーション全体は、キー フレーム アニメーションを通じて次の 3 つの紙飛行機ビューで構成されています。

3 つの飛行機ビューの走行軌跡とビューは、図にマークされています。

[cpp] view plaincopy

1. letzoomInScaleTransform = CGAffineTransformMakeScale(0.2, 0.2)

2. UIView.animateKeyframesWithDuration(3、遅延: 0、オプション: []、アニメーション: {

3. UIView.addKeyframeWithRelativeStartTime(0、relativeDuration: 0.2、アニメーション: {

4. self.customHeaderView.paperAirplane.center.x += self.view.frame.width

5. self.customHeaderView.paperAirplane.center.y += -180

6. self.customHeaderView.paperAirplane.transform =zoomInScaleTransform

7. })

8. UIView.addKeyframeWithRelativeStartTime(0.3、relativeDuration: 0.01、アニメーション: {

9. self.customHeaderView.paperAirplaneOpposite.alpha = 1

10. self.customHeaderView.paperAirplaneOpposite.transform = zoomInScaleTransform

11. })

12. UIView.addKeyframeWithRelativeStartTime(0.3, relativeDuration: 0.5, アニメーション: {

13. self.customHeaderView.paperAirplaneOpposite。変換 = CGAffineTransformIdentity

14. self.customHeaderView.paperAirplaneOpposite.center.x -= self.view.frame.width

15. self.customHeaderView.paperAirplaneOpposite.center.y += 90

16. })

17. UIView.addKeyframeWithRelativeStartTime(0.9, relativeDuration: 0.01, アニメーション: {

18. self.customHeaderView.paperAirplaneComeBack.alpha = 1

19. })

20. UIView.addKeyframeWithRelativeStartTime(0.9, relativeDuration: 0.2、アニメーション: {

21. self.customHeaderView.paperAirplaneComeBack.center.x += 33

22. })

23. }、完了: { _ in

24. self.restorePaperAirplaneStatus()

25. })

大家看到这大家可能会有疑问了，三段アニメーション画怎么会有五个关键呢，我们来刨分析一下：

• 第一关键帧： 完了1 番のマシンの画面が右上隅に移動し、画面が移動して、画面が少しずつ変化します。 > 2 番目の関連リンク: 2 番目のマシンの画面の最初の透明度が 0 であるため、2 番目の関連リンクでは透明度が 1 に設定され、画面が縮小されます。開始時間はアニメーション全体の 0.9 秒から始まり、最初のリンク フレームは 0.3 秒続きます。それぞれのリンク バンドが同時に実行を開始し、小さな変化から 2 つのネットワーク ビデオを完了し、左下方向に移動し、画面を 1 つ移動します。 持続時間は 1.5 秒です。

• 第 5 のリンク フレームと同様に、3 番目のリンク フレームの透明度を変更します。

• 関連付けられたフレームが完了した後、完了したパケット内の restorePaperAirplaneStatus() メソッドを使用して、3 つのクラスのマシン ビューの状態を更新します。

ずっと

• は、アニメーションを使用する際に、各関連付けの開始時間と継続時間に合わせて設定する必要があります。所定の時間必要に応じて、関連する図のいくつかの状態を変更する必要もありますが、すぐに完了することを示すために非常に短い継続時間が設定されます。 Auto Layout を使用する場合、どのように束縛によってアニメーションが実行されるか、今日はここに先着します。