Как анимировать фигуру через переменную состояния в SwiftUI?

Question

Попытка анимировать правую сторону прямоугольника в SwiftUI при нажатии. Но он не работает (у него есть соотношение состояния var и он имеет анимируемый тип (CGFloat). Совершенно из идей почему. Пожалуйста, сообщите.

struct ContentView: View {
    @State private var animated = false

    var body: some View {
        Bar(ratio: animated ? 0.0 : 1.0).animation(Animation.easeIn(duration: 1))
        .onTapGesture {
            self.animated.toggle()
        }.foregroundColor(.green)
    }
}

struct Bar: Shape {
    @State var ratio: CGFloat

    var animatableData: CGFloat {
        get { return ratio }
        set { ratio = newValue }
    }

    func path(in rect: CGRect) -> Path {
        var p = Path()

        p.move(to: CGPoint.zero)

        let width = rect.size.width * ratio
        p.addLine(to: CGPoint(x: width, y: 0))

        let height = rect.size.height

        p.addLine(to: CGPoint(x: width, y: height))

        p.addLine(to: CGPoint(x: 0, y: height))

        p.closeSubpath()

        return p
    }
}

Answer 1

Это не нужно @State для анимируемых данных, поэтому исправить это просто

struct Bar: Shape {
    var ratio: CGFloat

Протестировано с этим демонстрационным видом (на Xcode 11.2 / iOS 13.2 )

struct TestAnimateBar: View {
    @State private var animated = false

    var body: some View {
        VStack {
            Bar(ratio: animated ? 0.0 : 1.0).animation(Animation.easeIn(duration: 1))
                .foregroundColor(.green)
        }
        .background(Color.gray)
        .frame(height: 40)
        .onTapGesture {
            self.animated.toggle()
        }
    }
}