SwiftUI анимирует заливку прямоугольника снизу вверх ⇐ IOS

[Anonymous]

У меня есть представление Rectangle() SwiftUI. Я пытаюсь анимировать заливку внутри него на основе числового значения. Например, высота прямоугольника будет равна TotalHeight * Ratio. Вот код:

Код: Выделить всё

struct SquareOptionView: View {

let title: String
@Binding var voteRatio: Double
let color: Color
let tapAction: ()->()

var body: some View {
VStack(spacing: 10.0){
Text(title)
Text(
"\(voteRatio * 100, specifier: "%.2f")%"
)
}
.padding(25.0)
.frame(maxWidth: .infinity, alignment: .bottom)
.background{
color
.containerRelativeFrame(.vertical, alignment: .bottom) { length, _ in
return length * voteRatio
}
.animation(.bouncy, value: voteRatio)
.frame(alignment: .bottom)
}
.onTapGesture {
tapAction()
}
}
}

Это работает хорошо, но в конечном итоге анимация идет по центру, а не сверху вниз. Как видите, я пробовал рассылать спам по нижнему выравниванию, но представления по-прежнему анимируются по центру своего размера.
Фрагменты кода:

Код: Выделить всё

import Foundation

class SquareOptionsContainerViewModel: ObservableObject{

let firstOptionTitle: String
let secondOptionTitle: String
@Published var firstVoteRatio: Double
@Published var secondVoteRatio: Double
let firstOptionClickListener: ()->()
let secondOptionClickListener: ()->()

init(firstOptionTitle: String, secondOptionTitle: String, firstVoteRatio: Double, secondVoteRatio: Double, firstOptionClickListener: @escaping () -> Void, secondOptionClickListener: @escaping () -> Void) {
self.firstOptionTitle = firstOptionTitle
self.secondOptionTitle = secondOptionTitle
self.firstVoteRatio = firstVoteRatio
self.secondVoteRatio = secondVoteRatio
self.firstOptionClickListener = firstOptionClickListener
self.secondOptionClickListener = secondOptionClickListener
}
}

ParentView:

Код: Выделить всё

import SwiftUI

struct ContentView: View {

@ObservedObject var viewModel: SquareOptionsContainerViewModel

var body: some View {
HStack(spacing: 0.0){
SquareOptionView(title: viewModel.firstOptionTitle, voteRatio: $viewModel.firstVoteRatio, color: .green){
viewModel.firstVoteRatio = random(min: 0.0, max: 1.0)
}
Rectangle()
.frame(width: 2.0)
.foregroundColor(
.black
)
SquareOptionView(title: viewModel.secondOptionTitle, voteRatio: $viewModel.secondVoteRatio, color: .red){
viewModel.secondVoteRatio = random(min: 0.0, max: 1.0)
}
}
.clipShape(
RoundedRectangle(cornerSize: .init(width: 10.0, height: 10.0))
)
.overlay(
RoundedRectangle(cornerSize: .init(width: 10.0, height: 10.0))
.stroke(lineWidth: 2.0)
)
.padding(.vertical, 10.0)
}

func random(min: Double, max: Double) -> Double {
return random * (max - min) + min
}

var random: Double {
return Double(arc4random()) / 0xFFFFFFFF
}
}

Пример репозитория: https://github.com/mrikh/test



Подробнее здесь: https://stackoverflow.com/questions/790 ... ttom-to-up