SwiftUIで動く破線の実装においてdashPhaseの指定部分の挙動が分からない

Question

前提

• 動く破線の実装をしており、参考にしたコードの中で分からない記述があります。
  • 参考にしたコード: How to Create Marching Ants Effect with SwiftUI

発生している問題・エラーメッセージ

• 下記のdashPhaseの指定でなぜうまく動いているのかがわかりません。
• 私の考えでは今回dashPattern.reduce(0){$0 + $1} = 26なので、以下のように動くように思います。
  • dashPhaseが-26からスタートする
  • dashPhaseが26となり右に52だけアニメーションして動く（順方向に動く）
  • dashPhaseが-26となり左に52だけアニメーションして動く（逆向きに動く）
  • (以上を繰り返し)
• しかし実際はずっと右方向に動いているようなアニメーションとして動作します。コード中でどのような処理になっているのでしょうか。

dashPhase: marching
? -dashPattern.reduce(0){$0 + $1}
: dashPattern.reduce(0){$0 + $1}))

該当のソースコード

import SwiftUI

struct RopeView: View {
    
    // MARK: - Properties
    
    let startPoint: CGPoint = .init(x: 50, y: 100)
    let endPoint: CGPoint = .init(x: 400, y: 100)
    private let dashPattern: [CGFloat] = [12, 14]
    @State private var marching = true
    
    // MARK: - LifeCycle
    
    // MARK: - View
        
    var body: some View {
        Path { path in
            path.move(to: startPoint)
            path.addLine(to: endPoint)
        }
        .stroke(style: StrokeStyle(
            lineWidth: 8,
            miterLimit: 10,
            dash: dashPattern,
            dashPhase: marching
            ? -dashPattern.reduce(0){$0 + $1}
            : dashPattern.reduce(0){$0 + $1}))
        .foregroundColor(.blue)
        .onAppear {
            marching = false
            withAnimation(.linear(duration: 1.0).repeatForever(autoreverses: false)) {
                marching.toggle()
            }
        }
        .background(.gray.opacity(0.3))
    }
    
}

struct RopeView_Previews: PreviewProvider {
    static var previews: some View {
        RopeView()
    }
}

Answer 1

marching.toggle() の直後に print(marching) を入れるとわかると思いますが、 withAnimation に指定するクロージャは、1秒に1回呼ばれるのではなく、最初に1回しか呼ばれません。クロージャで指定したアニメーションの変化を .linear(duration: 1.0).repeatForever(autoreverses: false) の指定で、1秒に1回無限に繰り返す(逆再生なし)ということだと思います。

つまり、marchingの初期値をfalseにし、 withAnimation のクロージャの中でtrueにすれば、dashPhaseを26から-26に変化させるアニメーションを作成したことになり、それを逆再生なしで1秒に1回繰り返すため、常に左から右に移動するアニメーションになるのだと思います。

Comments

[IKEH]

>1秒に1回呼ばれるのではなく、最初に1回しか呼ばれません。
まさにこの部分が分かっていなかったです。
ありがとうございます、理解できました！