1

SwiftUIでドット進行のアニメーションを実現したい。

各ドットアニメーションと別のドットアニメーションの間に依存関係を追加する必要があると思います。そのような依存関係により、以下のアニメーションを実現できます!

参照ここに画像の説明を入力

以下のコードを試してみましたが、うまくいきません。このようなアニメーションを実現する適切な方法ではないことはわかっています。

誰かが解決策を持っている場合は、コードで自由に答えてください。

助けてくれてありがとう、ありがとう!

struct AnimatedDot: View {
    @State var rightAnimates = false
    
    var body: some View {
        
        ZStack {
            
            VStack(alignment: .leading) {
            HStack(alignment: .center, spacing: 0){
            Circle()
                .fill(Color.blue)
                .scaleEffect( rightAnimates ? 1: 0)
                .animation(Animation.spring().repeatForever(autoreverses: false)
                    .speed(0.7)
                    .delay(0.25))
                .offset(x: 20)
                .onAppear() {
                    self.rightAnimates.toggle()
                    }
            Circle()
            .fill(Color.blue)
            .scaleEffect( rightAnimates ? 1: 0)
            .animation(Animation.spring().repeatForever(autoreverses: false)
                .speed(0.7)
                .delay(0.5))
                .offset(x: 20).onAppear() {
                    //self.rightAnimates.toggle()
                }
            Circle()
            .fill(Color.blue)
            .scaleEffect( rightAnimates ? 1: 0.5)
            .animation(Animation.spring().repeatForever(autoreverses: false)
                .speed(0.7)
                .delay(0.75))
            .offset(x: 20)
            }.frame(height:20)
            }.frame(width: 120, height: 40)
        }
    }
}
4

1 に答える 1