Ios 如何为视图的 colored颜色 和宽度设置动画

我有一个进度条，我写了这样的.

ZStack(alignment: .leading) {
                RoundedRectangle(cornerRadius: 20)
                    .foregroundColor(.gray)
                    .frame(width: 300, height: 20, alignment: .center)
                RoundedRectangle(cornerRadius: 20)
                    .foregroundColor(Color(red: min(2.0 - (fraction * 2.0), 1.0), green: min((fraction * 2.0), 1.0), blue: 0))
                    .frame(width: 300 * fraction, height: 20)
                    
            }

进度用可变分数中的小数表示.

Here is an example of this code with fraction set to increasing amounts:

当第一次加载视图时，我希望所有的条从分数=0和红色开始，并在一秒钟内快速扩展和着色到所需的分数.

我的问题是，我还没有弄清楚如何设置变量值的动画，以及如何在修改器中使用它.这是在重新绘制视图时发生的.

这样比较理想(尽管这段代码显然无法编译):

                RoundedRectangle(cornerRadius: 20)
                    .foregroundColor(Color(red: min(2.0 - ((fraction*frame) * 2.0), 1.0), green: min(((fraction*frame) * 2.0), 1.0), blue: 0))
                    .frame(width: 300 * (fraction*frame), height: 20)
                    .animate(start: frame = 0; increment: frame += 0.1; end: frame <= 1, duration: 1s)