SwiftUI でのアニメーション#

Transition の種類#

今回は左から現れて右に消えていく視覚効果でしたが、逆に右から現れて左に消えていく視覚効果を実装したい場合にはどうすれば良いでしょうか。

実は Transition には次の六種類しか存在しません。slideは常に左から現れて右に消えるため、右から現れて左に消すことはできないということです。

moveはslideと同じような視覚効果を持ちますが、現れた方向に消えていってしまうため右から表示させると右に消えていってしまいます。

じゃあどうすればいいかというと表示時と非表示時の視覚効果を変えればよいのです。

Transition の合成#

transitionは複数組み合わせることもできます。

// 不透明度を変えながらスライドするアニメーション
import SwiftUI

struct ContentView: View {
    @State private var transition: Bool = false

    var body: some View {
        VStack {
            Button(action: {
                withAnimation {
                    transition.toggle()
                }
            }, label: { Text("TRANSITION") })
            if transition {
                Circle()
                    .fill(Color.blue)
                    .frame(width: 100, height: 100, alignment: .center)
                    .transition(AnyTransition.slide.combined(with: .opacity))
            }
        }
    }
}

この場合、AnyTransitionを指定しなければコンパイルエラーが発生します。

TabView の場合#

import SwiftUI

struct ContentView: View {
    @State private var selection: Int = 0

    var body: some View {
        TabView(selection: $selection) {
            Circle()
                .fill(Color.blue)
                .frame(width: 100, height: 100, alignment: .center)
                .transition(.slide)
                .tabItem { Image(systemName: "1.circle") }
                .tag(0)
            Circle()
                .fill(Color.blue)
                .frame(width: 100, height: 100, alignment: .center)
                .transition(.scale)
                .tabItem { Image(systemName: "2.circle") }
                .tag(1)
        }
    }
}

タブが切り替わるたびにアニメーションが発生するかと思ったが、実際には全く発生しなかった。

おそらく、selectionの値が変わったときにwithAnimationが呼ばれていないのが原因だと思われる。

これらを解決する方法がいくつかありそうなのだが、あまりにめんどくさいのでここでは触れないことにする。

SwiftUI: How to animate a TabView selection?

SwiftUI: Animate Tab bar tab switch with a CrossDissolve slide?

NavigationView の場合#

import SwiftUI

struct ContentView: View {

    var body: some View {
        NavigationView {
            NavigationLink(destination: circle, label: { Text("Circle") })
        }
    }

    var circle: some View {
        Circle()
            .fill(Color.blue)
            .frame(width: 100, height: 100, alignment: .center)
            .transition(.slide)
    }
}

表示されたときに視覚効果が発生するならこれならいけるのではと思ったのですが、いけませんでした。

解決方法#

直接的にtransitionを利用する方法ではないが、View が表示されるたびに TabView でも NavigationView でもtransitionのような効果を発揮する Extension を作成した。

extension View {
    func transitionScale(_ animation: Animation? = nil, scale: Binding<CGFloat>) -> some View {
        onAppear {
            withAnimation(animation) {
                scale.wrappedValue = 1.0
            }
        }
        .onDisappear {
            withAnimation(animation) {
                scale.wrappedValue = 0.0
            }
        }
        .scaleEffect(scale.wrappedValue)
    }

    func transitionScale(_ animation: Animation? = nil, opacity: Binding<Double>) -> some View {
        onAppear {
            withAnimation(animation) {
                opacity.wrappedValue = 1.0
            }
        }
        .onDisappear {
            withAnimation(animation) {
                opacity.wrappedValue = 0.0
            }
        }
        .opacity(opacity.wrappedValue)
    }
}

例えばこういう Extension を書けばそのオブジェクトが表示されるたびにこのメソッドが呼ばれるので、あたかもtransitionのように振る舞うことができる。