SwiftUIでアニメーションを実装する

SwiftUIでのアニメーションを試してみました

まずは画面上にTextを配置します
最初はButtonで試したのですが、自動的にアニメーションが入ってしまうようなのでTextにしました

struct TestView: View {
    var body: some View {
        Text("Text")
    }
}

まずはボタンをタップしたら50px移動するようにします
今回はアニメーションなしです

struct TestView: View {
    @State private var buttonOffsetX: CGFloat = 0
    
    var body: some View {
        Text("Text").onTapGesture {
            buttonOffsetX += 50
        }.offset(x: buttonOffsetX)
    }
}

アニメーションを付けたい場合、処理をwithAnimationで囲むだけです

withAnimation {
    buttonOffsetX += 50
}

透過度を変える時も同じようにwithAnimationを使います

struct TestView: View {
    @State private var buttonOffsetX: CGFloat = 0
    @State private var opacity: CGFloat = 1
    
    var body: some View {
        Text("Text").onTapGesture {
            withAnimation {
                buttonOffsetX += 50
                opacity = 0.1
            }
        }.offset(x: buttonOffsetX).opacity(opacity)
    }
}

withAnimationは下のような形で遅延時間やアニメーション時間を変える事ができます

withAnimation(Animation.easeIn(duration: 1).delay(1)) {
    buttonOffsetX += 50
    opacity = 0.1
}

連続でアニメーションしたい場合、delayを使えばコントロールできそうです

withAnimation(Animation.easeIn(duration: 1)) {
    buttonOffsetX += 50
    opacity = 0.1
}
withAnimation(Animation.easeIn(duration: 0.3).delay(1)) {
    buttonOffsetX -= 50
    opacity = 1
}

アニメーションは下のようにanimationメソッドを使う形でも実現できます
animationの第2引数にセットした値を変更した時にアニメーションしてくれます

また、下のケースですとbuttonOffsetXもアニメーション対象になりました
同時に変更したプロパティーも一緒に変更してくれるのかと思います

Text("Text").onTapGesture {
    buttonOffsetX += 50
    opacity = 0.1
}.offset(x: buttonOffsetX).opacity(opacity)
    .animation(.easeIn, value: opacity)