SwitUI:アニメーションスタックを制御する

今回は、あなたがすでに単独で理解している2つのことを一緒にしたいのですが、一緒にすると少し頭が痛いかもしれません.
以前,修飾子の順序の重要性を検討した.したがって、コードをこのように記述すると、

Button("Tap Me") {
    // do nothing
}
.background(Color.blue)
.frame(width: 200, height: 200)
.foregroundColor(.white)

結果は、次のようなコードとは異なります.

Button("Tap Me") {
    // do nothing
}
.frame(width: 200, height: 200)    
.background(Color.blue)
.foregroundColor(.white)

これは、Frameを調整する前にバックグラウンドをシェーディングする場合、拡張スペースではなく元の空間のみをシェーディングするためです.覚えている場合は、SwiftUIがビューを修飾子で包装することで、同じ修飾子を複数回適用できます.background（）とpadding（）を複数回繰り返して縞枠効果を作成します.
これがコンセプトの1つです.SwitUIは、修飾子の適用順序に従ってビューをパッケージするため、修飾子の順序が重要です.
コンセプト2は、ビューにanimation()修飾子を適用して、変更を暗黙的にアニメーション化することができることである.
この点を示すために、ボタンコードを変更して、いくつかの状態に応じて異なる色を表示することができます.まず、ステータスを定義します.

@State private var enabled = false

ボタンのアクションではtrueとfalseを切り替えることができます.

self.enabled.toggle()

次に、background（）修飾子内で条件値を使用することができます.これにより、ボタンは青または赤になります.

.background(enabled ? Color.blue : Color.red)

最後に、ボタンにanimation（）修飾子を追加して、これらの変更をアニメーション化します.

.animation(.default)

このコードを実行すると、ボタンをクリックすると青と赤の間にアニメーションの色が設定されます.
したがって、シーケンス修飾子は重要です.ビューに1つの修飾子を複数回アタッチし、animation（）修飾子で暗黙的なアニメーションを発生させることができます.今まで分かっていましたか?
それはいいですね.自分を守ることは、あなたを傷つける可能性があるからです.

animation()修飾子を複数回添付でき、使用順序が重要です。

この点を説明するには、他のすべての修飾子の後にこの修飾子をボタンに追加します.

.clipShape(RoundedRectangle(cornerRadius: enabled ? 60 : 0))

これにより、enabledのブール値に従ったボタンの状態が正方形と円角矩形との間で変化する.
このプログラムを実行すると、ボタンをクリックすると赤と青の間でアニメーション処理が行われますが、正方形と角の長方形の間でジャンプします.この部分ではアニメーション処理は行われません.
次のステップを参照してください:clipShape()修飾子をアニメーションの前に移動して、次のようにします.

.frame(width: 200, height: 200)
.background(enabled ? Color.blue : Color.red)
.foregroundColor(.white)
.clipShape(RoundedRectangle(cornerRadius: enabled ? 60 : 0))
.animation(.default)

コードを実行すると、背景色とクリップシェイプがアニメーション化されます.
したがって、animation（）修飾子の前に発生した変更だけがアニメーションを追加する順序を適用することが重要です.
興味深い部分は、animation（）の修飾子を複数適用すると、次のアニメーションまですべてのコンテンツが制御されます.これにより、すべてのアトリビュートを統一的に設定するのではなく、さまざまな方法でステータスを変更してアニメーションを設定できます.
たとえば、既定のアニメーションを使用して色を変更できますが、シェイプを変更するにはスプリングエフェクトを使用します.

Button("Tap Me") {
    self.enabled.toggle()
}
.frame(width: 200, height: 200)
.background(enabled ? Color.blue : Color.red)
.animation(.default)
.foregroundColor(.white)
.clipShape(RoundedRectangle(cornerRadius: enabled ? 60 : 0))
.animation(.interpolatingSpring(stiffness: 10, damping: 1))

必要に応じて、設計を構築するときに任意の数のanimation（）修飾子を使用することができます.これにより、1つのステータス変更を必要な複数のセグメントに分割できます.
より良い制御のために、nilを修飾子に渡すことで、アニメーションを完全に無効にすることができます.たとえば、カラーをすぐに変更したい場合がありますが、クリップシェイプはアニメーションのままにします.この場合、次のように記述できます.

Button("Tap Me") {
    self.enabled.toggle()
}
.frame(width: 200, height: 200)
.background(enabled ? Color.blue : Color.red)
.animation(nil)
.foregroundColor(.white)
.clipShape(RoundedRectangle(cornerRadius: enabled ? 60 : 0))
.animation(.interpolatingSpring(stiffness: 10, damping: 1))

このような制御は、animation（）の修飾子が複数ないと実現できません.アニメーションの後にbackground（）を変更しようとすると、clipShape（）の作業を取り消すだけであることがわかります.

Button("Tap Me") {
    self.enabled.toggle()
}
.frame(width: 200, height: 200)
.background(enabled ? Color.blue : Color.red)
.foregroundColor(.white)
.clipShape(RoundedRectangle(cornerRadius: enabled ? 60 : 0))
.animation(.interpolatingSpring(stiffness: 10, damping: 5))
.background(enabled ? Color.blue : Color.red)

最終的な形状は一定の矩形になります.
Controlling the animation stack
Previous:明示的なアニメーションを作成する
Hacking with iOS: SwiftUI Edition
Next:アニメーションジェスチャー
いいね~~~