Анимации сгруппированных свойств SwiftUI игнорируются при внедрении

Question

Исходя из примеров, мы видим, что можно анимировать разные свойства с помощью разных анимаций. Например:

Button("Tap me") {self.isShowingRed.toggle()}
    .frame(width: 200, height: 200)
    .background(isShowingRed ? Color.red : Color.blue)
    .animation(.easeIn(duration: 2.5))
    .clipShape(RoundedRectangle(cornerRadius: isShowingRed ? 50 : 0))
    .animation(Animation.easeInOut(duration: 0.1).repeatCount(5))

Этот код будет анимировать фон кнопки от красного до синего за 2,5 секунды, а анимировать радиус угла от 0 до 50 с 5 повторениями.

Проблема появляется, как только представление внедрено:

VStack {
    Button("Tap me") {self.isShowingRed.toggle()}
        .frame(width: 200, height: 200)
        .background(isShowingRed ? Color.red : Color.blue)
        .animation(.easeIn(duration: 2.5))
        .clipShape(RoundedRectangle(cornerRadius: isShowingRed ? 50 : 0))
        .animation(Animation.easeInOut(duration: 0.1).repeatCount(5))
    } 
}

Когда кнопка встроена, используется только первая анимация, в этом случае анимируются как цвет, так и радиус. через 2,5 секунды без повторений.

Даже если я сделаю кнопку отдельным компонентом, проблема не изменится.

Я что-то не так делаю или это ошибка SwiftUI?

Редактировать: я использую Xcode 11.1 и тестирую на симуляторе.

Answer 1

Как я заметил, когда что-то неожиданное случается, когда есть .background, тогда проблема в этом ... В вашем случае использования анимация должна применяться к фоновому содержимому, и это решает проблему.

ЗдесьЭто пример, который я использовал, и он анимирует, как вы хотели с и без контейнера.

import SwiftUI

struct TestButtonAnimation: View {
    @State private var isShowingRed = false
    var body: some View {
        VStack {
            Button("Tap me") {self.isShowingRed.toggle()}
                .frame(width: 200, height: 200)
                .background(
                    Group {isShowingRed ? Color.red : Color.blue}
                    .animation(.easeIn(duration: 2.5))
                )
                .clipShape(RoundedRectangle(cornerRadius: isShowingRed ? 50 : 0))
                .animation(Animation.easeInOut(duration: 0.1).repeatCount(5))
        }
    }
}

struct TestButtonAnimation_Previews: PreviewProvider {
    static var previews: some View {
        TestButtonAnimation()
    }
}

Протестировано с: Xcode 11.1

Answer 2

Вы можете попробовать этот способ .animation(.default) в контейнере

  var body: some View {
  VStack{
  Button("Tap me") {self.isShowingRed.toggle()}
 .frame(width: 200, height: 200)
 .background(isShowingRed ? Color.red : Color.blue)
 .animation(.easeIn(duration: 2.5))
.clipShape(RoundedRectangle(cornerRadius: isShowingRed ? 50 : 0))
.animation(Animation.easeInOut(duration: 0.1).repeatCount(5))
}.animation(.default)
}