SwiftUIでアニメーションを時間差で表示したいです。

Question

SwiftUIをやり始めた初心者です。
円形のわっかを順々に時間差で表示してできたら弾けるように外側に移動させたい（意味わかんないw）のですが参考になりそうなサイトが見つからず困っています。
始めたばかりなので具体的なコードと一緒に教えてくださると嬉しいです。もちろんやり方だけでも構いません。丸投げの質問と低評価をいただいたのですが、正直何からやればいいのか全くわからない状態です。参考にできそうなことなどを教えていただけると嬉しいです。

上から右回りに順番に表示して
![
矢印の方向に移動させて消したいです。
アニメーションや時間差でやるのが初めてで注文のようになってしまってすみません。
よかったら回答してくださると嬉しいです。本当すみません。

Comments

[hoshi-takanori]

純粋に質問ですが、SwiftUI でやりたい理由って何でしょうか？

[OtoMura]

そうですね
二週間ぐらい前まではSwiftの方をやっていたのですが、何度も詰まってネットをみていたら今までよりもやりやすいという言葉を見つけてカブトムシみたいに吸い寄せられて今に至ります。
確かにSwiftよりも格段にやりやすくわからないとこもたくさんあったけどなんとか乗り越えらてきてます。
今は家にいる時間がだいぶ長いので参考書をみながらやっているのですがアニメーションについての記事がなくネットにもSwiftUI自体が新しいせいなのかやりたいアニメーションについて参考になりそうなサイトがなく質問させてもらってます。

[hoshi-takanori]

自分も SwiftUI はあまり詳しくないんですが、ボタンやリストなどの UI を構築するのは簡単になりそうですが、アニメーションとかは得意じゃないと思ってたんですよね。でも、改めていろいろ調べてみたら Custom Control を作ればアニメーションもできるような気もしてきました。
ちなみに、今回の質問でアニメーションを開始するタイミングってどうなりますか？ また、アニメーションが終わった後は、画面は真っ白になってしまうのでしょうか？

[OtoMura]

今回のアニメーションはアプリを開いた時に流れさせようと思ってます。
なので開いた時にスタートでわっかが外側にフェイドアウトしたら終了にしたいと思ってます。終了後は真っ白で構いません。自分もCustom Controlでできないか調べてみます。
説明不足ですみません。

[OtoMura]

すみません。ところでなんですがCustom Controlってなんですか？
調べてみたのですがうまくヒットできません。ほんとうに申し訳なくなってきた。

Answer 1

こんな感じでしょうか？
なんとなくで作ってみました。

struct ContentView: View {
    @State private var viewState1 = false
    @State private var viewState2 = true
    
    var body: some View {
        ZStack {
            Circle()
                .stroke(Color.blue)
                .frame(width: 50, height: 50)
                .offset(x: 0, y: self.viewState1 ? -100 : 0)
                .opacity(self.viewState2 ? 0 : 1)
                .animation(Animation.spring().delay(0.2))
            Circle()
                .stroke(Color.blue)
                .frame(width: 50, height: 50)
                .offset(x: self.viewState1 ? 70 : 0, y: self.viewState1 ? -70 : 0)
                .opacity(self.viewState2 ? 0 : 1)
                .animation(Animation.spring().delay(0.4))
            
            Circle()
                .stroke(Color.blue)
                .frame(width: 50, height: 50)
                .offset(x: self.viewState1 ? 100 : 0, y: 0)
                .opacity(self.viewState2 ? 0 : 1)
                .animation(Animation.spring().delay(0.6))
            
            Circle()
                .stroke(Color.blue)
                .frame(width: 50, height: 50)
                .offset(x: self.viewState1 ? 70 : 0, y: self.viewState1 ? 70 : 0)
                .opacity(self.viewState2 ? 0 : 1)
                .animation(Animation.spring().delay(0.8))
            
            Circle()
                .stroke(Color.blue)
                .frame(width: 50, height: 50)
                .offset(x: 0, y: self.viewState1 ? 100 : 0)
                .opacity(self.viewState2 ? 0 : 1)
                .animation(Animation.spring().delay(1.2))
            
            Circle()
                .stroke(Color.blue)
                .frame(width: 50, height: 50)
                .offset(x: self.viewState1 ? -70 : 0, y: self.viewState1 ? 70 : 0)
                .opacity(self.viewState2 ? 0 : 1)
                .animation(Animation.spring().delay(1.4))
            
            Circle()
                .stroke(Color.blue)
                .frame(width: 50, height: 50)
                .offset(x: self.viewState1 ? -100 : 0, y: 0)
                .opacity(self.viewState2 ? 0 : 1)
                .animation(Animation.spring().delay(1.6))
            
            Circle()
                .stroke(Color.blue)
                .frame(width: 50, height: 50)
                .offset(x: self.viewState1 ? -70 : 0, y: self.viewState1 ? -70 : 0)
                .opacity(self.viewState2 ? 0 : 1)
                .animation(Animation.spring().delay(1.8))
            
        }
        .onAppear {
            withAnimation {
                self.viewState1 = true
                self.viewState2 = false
            }
        }
    }
}

.animation(Animation.spring().delay(0.2))
//この部分で時間差を表現しています。

Comments

[OtoMura]

ありがとうございます！！！
動かしてみてびっくりしました。これを参考にいろいろいじってみます。
ほんとにすごい✨✨

[OtoMura]

↓自分なりに調整しました。

import SwiftUI

struct ContentView: View {
@State private var viewState1 = false
@State private var viewState2 = true

var body: some View {
ZStack {
Circle()
.stroke(Color.blue, lineWidth: 3)
.offset(x: 0, y: self.viewState1 ? -100 : 0)
.opacity(self.viewState2 ? 0 : 1)
.animation(Animation.spring().delay(0.4))

Circle()
.stroke(Color.blue, lineWidth: 3)
.offset(x: self.viewState1 ? 70 : 0, y: self.viewState1 ? -70 : 0)
.opacity(self.viewState2 ? 0 : 1)
.animation(Animation.spring().delay(0.6))

Circle()
.stroke(Color.blue, lineWidth: 3)
.offset(x: self.viewState1 ? 100 : 0, y: 0)
.opacity(self.viewState2 ? 0 : 1)
.animation(Animation.spring().delay(0.8))

Circle()
.stroke(Color.blue, lineWidth: 3)
.offset(x: self.viewState1 ? 70 : 0, y: self.viewState1 ? 70 : 0)
.opacity(self.viewState2 ? 0 : 1)
.animation(Animation.spring().delay(1))

Circle()
.stroke(Color.blue, lineWidth: 3)
.offset(x: 0, y: self.viewState1 ? 100 : 0)
.opacity(self.viewState2 ? 0 : 1)
.animation(Animation.spring().delay(1.2))

Circle()
.stroke(Color.blue, lineWidth: 3)
.offset(x: self.viewState1 ? -70 : 0, y: self.viewState1 ? 70 : 0)
.opacity(self.viewState2 ? 0 : 1)
.animation(Animation.spring().delay(1.4))

Circle()
.stroke(Color.blue, lineWidth: 3)
.offset(x: self.viewState1 ? -100 : 0, y: 0)
.opacity(self.viewState2 ? 0 : 1)
.animation(Animation.spring().delay(1.6))

Circle()
.stroke(Color.blue, lineWidth: 3)
.offset(x: self.viewState1 ? -70 : 0, y: self.viewState1 ? -70 : 0)
.opacity(self.viewState2 ? 0 : 1)
.animation(Animation.spring().delay(1.8))

}
.frame(width: 100,height: 220)
.onAppear {
withAnimation {
self.viewState1 = true
self.viewState2 = false
}
}
}
}

struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

[OtoMura]

↓こんな感じで段階ごとに動かしたいんですけどいい方法はないですか？

if (a == 1){
Circle()
.stroke(Color.blue, lineWidth: 3)
.position(x: 0, y: 0)
.opacity(self.viewState2 ? 0 : 1)
.animation(Animation.spring().delay(0.2))
}
if (a == 2){
Circle()
.stroke(Color.blue, lineWidth: 3)
.position(x: 0, y: -100)
.opacity(self.viewState2 ? 0 : 1)
.animation(Animation.spring().delay(0.8))
}

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

.onAppear {
withAnimation {
//self.viewState1 = true
self.viewState2 = false
self.a = 1
self.a += 1
}
}