Объедините весеннюю анимацию с easyInOut в SwiftUI

Вы на правильном пути, но вы переусердствовали в разработке своего решения. По сути, вам нужно сделать 3 слоя. Первый — это фон, как он воспринимается пользователем, но на самом деле это базовый вид. Кроме того, вы добавляете свой визуальный элемент. Для простоты я использовал капсулы. Верхний слой — это маска, именно здесь происходит волшебство.

Чтобы добиться желаемого результата, средний слой должен выступать за нижний слой в смещении настолько, насколько вы хотите, чтобы он «сжался». Затем вы помещаете сверху маску того же размера, что и нижний слой, которая действует как окно, позволяющее пользователю видеть только большую часть того, что происходит внизу. Вот что, я думаю, вы ищете:

struct LineView: View {
    let height: CGFloat
    @State private var animating = false
    
    var body: some View {
        GeometryReader { geometry in
            Capsule() // Base layer
                .fill(.gray.opacity(0.3))
                .frame(height: height + 2)
                .overlay(alignment: .leading) {
                    let lineWidth = geometry.size.width / 3
                    Capsule()
                        .fill(.blue)
                        .frame(width: lineWidth)
                        // Here I am overshooting by half the line width in both directions
                        .offset(x: animating ? -(lineWidth / 2) : geometry.size.width - lineWidth / 2)
                        .animation(.easeInOut(duration: 1.0).repeatForever(), value: animating)
                }
                // Then mask over with a FillStyle(eoFill: true)
                .mask(
                    Capsule()
                        .fill(style: FillStyle(eoFill: true))
                        .frame(height: height + 2)
                )
                .onAppear {
                    animating.toggle()
                }
                .frame(maxHeight: .infinity)
        }
    }
}

В итоге вы получаете вот это:

(Обратите внимание, это гифка, и она не такая плавная, как настоящая анимация)

Это работает очень хорошо, если вы просто анимируете ведущие и конечные отступы и используете отрицательные отступы по бокам. Затем фигуру необходимо обрезать, чтобы в результате отрицательного заполнения линия выглядела короче.

На самом деле нет необходимости использовать форму Line. Вы можете просто использовать Rectangle как в качестве заполненной формы, так и в качестве формы клипа. Альтернативно, если вы хотите закругленные углы, используйте Capsule.

struct LineView: View {
    let height: CGFloat
    @State private var animating = false

    var body: some View {
        GeometryReader { geometry in
            let w = geometry.size.width
            let maxWidth = w / 3
            let minWidth = maxWidth / 2
            Capsule()
                .fill(.blue)
                .padding(.leading, animating ? minWidth - maxWidth : w - minWidth)
                .padding(.trailing, animating ? w - minWidth : minWidth - maxWidth)
                .clipShape(Capsule())
                .frame(height: height)
                .frame(maxHeight: .infinity)
                .animation(.easeInOut(duration: 1.0).repeatForever(), value: animating)
                .onAppear {
                    animating.toggle()
                }
        }
    }
}

Это также можно сделать, установив смещение по оси X вместо заполнения. Это тоже работает (и ближе к тому, что у вас было изначально):

Capsule()
    .fill(.blue)
    .frame(width: maxWidth, height: height)
    .offset(x: animating ? minWidth - maxWidth : w - minWidth)
    .frame(width: w, alignment: .leading)
    .clipShape(Capsule())
    .frame(maxHeight: .infinity)
    .animation(.easeInOut(duration: 1.0).repeatForever(), value: animating)
    .onAppear {
        animating.toggle()
    }