100 Days of SwiftUI（DAY 32（Project 6）

Creating implicit animations

import SwiftUI

struct ContentView: View {
    @State private var animationAmount: CGFloat = 1
    
    var body: some View {
        Button("Tap Me") {
            // do nothing
            self.animationAmount += 1
        }
        .padding(50)
        .background(Color.red)
        .foregroundColor(.white)
        .clipShape(Circle())
        .scaleEffect(animationAmount)
        .blur(radius: (animationAmount - 1) * 3)
        .animation(.default)
    }
}

“ease in, ease out”
モディファイア.animation(.default)をビューにアタッチすると、SwiftUIは、デフォルトのシステムアニメーションを使用して、そのビューで発生するすべての変更を自動的にアニメーション化します。実際には、これは「イーズイン、イーズアウト」アニメーションです。つまり、iOSはアニメーションをゆっくり開始し、速度を上げてから、終わりに近づくにつれて速度を落とします。

モディファイアに異なる値を渡すことで、使用するアニメーションのタイプを制御できます。たとえば、次のように使用.easeOutして、アニメーションを速く開始してから、スムーズに停止するまで減速させることができます。

import SwiftUI

struct ContentView: View {
    @State private var animationAmount: CGFloat = 1
    
    var body: some View {
        Button("Tap Me") {
             //self.animationAmount += 1
        }
        .padding(50)
        .background(Color.red)
        .foregroundColor(.white)
        .clipShape(Circle())
        .scaleEffect(animationAmount)
        //.animation(.default)
        //.animation(.easeInOut(duration: 2))
        /*
        .animation(
            Animation.easeInOut(duration: 2)
                .delay(1)
        )
         */
        /*
        .animation(
            Animation.easeInOut(duration: 1)
                .repeatCount(4, autoreverses: true)
        )
        */
        .animation(
            Animation.easeInOut(duration: 1)
                .repeatForever(autoreverses: true)
        )
        .onAppear {
            self.animationAmount = 2
        }
        
    }
}

SwiftUIでアニメーションをカスタマイズする
Customizing animations in SwiftUI

import SwiftUI

struct ContentView: View {
    @State private var animationAmount: CGFloat = 1
    
    var body: some View {
        Button("Tap Me") {
            // self.animationAmount += 1
        }
        .padding(40)
        .background(Color.red)
        .foregroundColor(.white)
        .clipShape(Circle())
        .overlay(
            Circle()
                .stroke(Color.red)
                .scaleEffect(animationAmount)
                .opacity(Double(2 - animationAmount))
                .animation(
                    Animation.easeOut(duration: 1)
                        .repeatForever(autoreverses: false)
                )
        )
        .onAppear {
            self.animationAmount = 2
        }
    }
}

バインディングのアニメーション
Animating bindings
animation()修飾子は、現在の新しい値との間のアニメーション化する値を生じさせる結合任意SwiftUIに適用することができます。これは、問題のデータがブールなどのアニメーション化できるように聞こえるものではない場合でも機能します。1.05、1.1、1.15などを実行できるため、1.0から2.0へのアニメーション化を想像できますが、 「false」から「true」への移行は、値の間に余裕がないように聞こえます。

import SwiftUI

struct ContentView: View {
    @State private var animationAmount: CGFloat = 1

    var body: some View {
        print(animationAmount)
        
        return VStack {
            /*
            Stepper("Scale amount", value: $animationAmount.animation(), in: 1...10)
        */
            
            Stepper("Scale amount", value: $animationAmount.animation(
                Animation.easeInOut(duration: 1)
                    .repeatCount(3, autoreverses: true)
            ), in: 1...10)
            
            Spacer()

            Button("Tap Me") {
                self.animationAmount += 1
            }
            .padding(40)
            .background(Color.red)
            .foregroundColor(.white)
            .clipShape(Circle())
            .scaleEffect(animationAmount)
        }
    }
}

そこにはいくつかの非ビューコードがあるので、Swiftが返されているビューのどの部分であるかを理解できるようreturnに、前に追加する必要VStackがあります。

import SwiftUI

struct ContentView: View {
    @State private var animationAmount = 0.0
    
    var body: some View {
        /*
        Button("Tap Me") {
            withAnimation {
                self.animationAmount += 360
            }
        }
        */
        Button("Tap Me") {
            withAnimation(.interpolatingSpring(stiffness: 5, damping: 1)) {
                self.animationAmount += 360
            }
        }
        .padding(50)
        .background(Color.red)
        .foregroundColor(.white)
        .clipShape(Circle())
        .rotation3DEffect(.degrees(animationAmount), axis: (x: 1, y: 0, z: 0))
    }
}

withAnimation()SwiftUIの他の場所で使用できるすべての同じアニメーションを使用して、アニメーションパラメータを指定できます。たとえば、次のwithAnimation()ような呼び出しを使用して、回転効果に春のアニメーションを使用させることができます。


import SwiftUI

struct ContentView: View {
    @State private var enabled = false
    
    var body: some View {
        
        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(.default)
     
    
    }
    
}

複数のanimation()モディファイヤ

import SwiftUI

struct ContentView: View {
    @State private var enabled = false
    
    var body: some View {
        
        Button("Tap Me") {
            self.enabled.toggle()
        }
        .frame(width: 200, height: 200)
        .background(enabled ? Color.blue : Color.red)
        .animation(.default)
        //.animation(nil)
        .foregroundColor(.white)
        .clipShape(RoundedRectangle(cornerRadius: enabled ? 60 : 0))
        .animation(.interpolatingSpring(stiffness: 10, damping: 1))
    
    }
    
}