【初心者】Swift UIを勉強する その⑧ ーーー transition delay

はじめに

前回はカードをタップしたら、リストを表示されるようにしたけど、リストのアニメーションを遅らせて欲しい。
今回はこの課題を踏まえて進んできます。完成品のこんな感じです。↓

　

目次

1. [transition delay](#transition delay)
2. まとめ
3. 参考文献

transition delay

・アニメーションを遅らせるにはdelay()というインスタンスメソッドを使います。
・若干複雑に見えますが、ひとつづつ分解すれば、1つのtransitionがあって、このtransitionは複数の条件が付けられています。
1つ目の条件はopacity(透明)、2つ目はanimation()(アニメーションのタイミング)。
アニメーションのタイミングは何かというと、spring(弾力)とdelay(遅れ)。

.transition(
     AnyTransition.opacity.animation(
            Animation.spring().delay(0.3)
     )
)

　

・開くアニメーションができたけど、閉じるほうもやる必要があります。
・また、今回のケースでは非相称のtransitionなので、`asymmetric(insertion: , removal:) を使えます。(appleが提供されたコード例も確認してみましょう)

CoursesView.swift

.transition(
      .asymmetric(
          insertion: AnyTransition.opacity.animation(
                Animation.spring().delay(0.3)
          ),
          removal: AnyTransition.opacity.animation(
                .spring()
          )
       )
)

　

・2枚目のカードを追加します。もちろん、2枚目のカードに対して何もしないと、リストと2枚目のカードは被らせてしまいます。
とりあえずはbackgroundをホワイトにして、続きは次回進んでいきます。
・また、カードを複数を追加していくので、カードを全部ScrollViewに詰めて、タップされた後の領域も決めたいので、frame(maxWidth: .infinity)を使います。

CoursesView.swift

ScrollView {
   VStack(spacing: 20) {
        CourseItem()
            .matchedGeometryEffect(
                id: "Card", in: namespace, isSource: !show
            )
            .frame(width: 335, height: 250)
         CourseItem()
            .frame(width: 335, height: 250)
    }
    .frame(maxWidth: .infinity)
}

まとめ

ソースコードGithub

参考文献

• Design Code --- SwiftUI for iOS 14