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

はじめに

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

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

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

使用シナリオ

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

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

[cpp] view plaincopy

UIView.animateWithDuration(1, アニメーション: {
view.center.x += 200.0
}、完了: { _ in
UIView.animateWithDuration(1,アニメーション: {
view.center.y += 100.0
}、完了: { _ in
UIView.animateWithDuration(1, アニメーション: {
view.center.x -= 200.0
}、完了: { _ in
UIView.animateWithDuration(1, アニメーション: {
view.center.y -= 100.0
}、完了: nil)
})
})
})

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

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

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

[cpp ] view plaincopy

UIView.animateKeyframesWithDuration(2、遅延: 0、オプション: []、アニメーション: {
// キーフレームを追加
}、完了: nil)

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

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

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

[cpp] view plaincopy

UIView.animateKeyframesWithDuration(2、遅延: 0、オプション: []、アニメーション: {
UIView.addKeyframeWithRelativeStartTime(0、relativeDuration: 0.25、アニメーション: { >
view.center.x += 200.0
})
}、完了: 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

UIView.animateKeyframesWithDuration(2, late) : 0、オプション: []、アニメーション: {
UIView.addKeyframeWithRelativeStartTime(0、relativeDuration: 0.25、アニメーション: {
ビュー . center.x+= 200.0
})
UIView.addkeyframewithrelativeTarttime (0.25、RelativeDuration: 0.25、アニメーション: {
view.center.y += 100.0
})
UIView.addKeyframeWithRelativeStartTime(0.5、相対期間: 0.25) 、アニメーション: {
view.center.x -= 200.0
})
UIView.addKeyframeWithRelativeStartTime(0.75、relativeDuration: 0.25、アニメーション: {
view.center.y -= 100.0
})
}、完了: nil)

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

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

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

アニメーションの例

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

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

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

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

[cpp] view plaincopy

letzoomInScaleTransform = CGAffineTransformMakeScale(0.2, 0.2)
UIView.animateKeyframesWithDuration(3、遅延: 0、オプション: []、アニメーション: {
UIView.addKeyframeWithRelativeStartTime(0、relativeDuration: 0.2、アニメーション: {
self.customHeaderView.paperAirplane.center.x += self.view.frame.width
self.customHeaderView.paperAirplane.center.y += -180
self.customHeaderView.paperAirplane.transform =zoomInScaleTransform
})
UIView.addKeyframeWithRelativeStartTime(0.3、relativeDuration: 0.01、アニメーション: {
self.customHeaderView.paperAirplaneOpposite.alpha = 1
self.customHeaderView.paperAirplaneOpposite.transform = zoomInScaleTransform
})
UIView.addKeyframeWithRelativeStartTime(0.3, relativeDuration: 0.5, アニメーション: {
self.customHeaderView.paperAirplaneOpposite。変換 = CGAffineTransformIdentity
self.customHeaderView.paperAirplaneOpposite.center.x -= self.view.frame.width
self.customHeaderView.paperAirplaneOpposite.center.y += 90
})
UIView.addKeyframeWithRelativeStartTime(0.9, relativeDuration: 0.01, アニメーション: {
self.customHeaderView.paperAirplaneComeBack.alpha = 1
})
UIView.addKeyframeWithRelativeStartTime(0.9, relativeDuration: 0.2、アニメーション: {
self.customHeaderView.paperAirplaneComeBack.center.x += 33
})
}、完了: { _ in
self.restorePaperAirplaneStatus()
})

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

第一关键帧：完了1 番のマシンの画面が右上隅に移動し、画面が移動して、画面が少しずつ変化します。 > 2 番目の関連リンク: 2 番目のマシンの画面の最初の透明度が 0 であるため、2 番目の関連リンクでは透明度が 1 に設定され、画面が縮小されます。開始時間はアニメーション全体の 0.9 秒から始まり、最初のリンクフレームは 0.3 秒続きます。それぞれのリンクバンドが同時に実行を開始し、小さな変化から 2 つのネットワークビデオを完了し、左下方向に移動し、画面を 1 つ移動します。持続時間は 1.5 秒です。
第 5 のリンクフレームと同様に、3 番目のリンクフレームの透明度を変更します。
関連付けられたフレームが完了した後、完了したパケット内の restorePaperAirplaneStatus() メソッドを使用して、3 つのクラスのマシンビューの状態を更新します。
は、アニメーションを使用する際に、各関連付けの開始時間と継続時間に合わせて設定する必要があります。所定の時間必要に応じて、関連する図のいくつかの状態を変更する必要もありますが、すぐに完了することを示すために非常に短い継続時間が設定されます。 Auto Layout を使用する場合、どのように束縛によってアニメーションが実行されるか、今日はここに先着します。