Я создал кнопку с тремя анимированными точками, используя SwiftUI. При изменении геометрии экрана (поворот устройства, открытие клавиатуры и т.д.) анимация сбивается. Смотрите прикрепленное видео. Как я могу заставить круги оставаться на своем месте относительно кнопки?
Это мой код:
struct ContentView: View {
var body: some View {
Button(action: {}, label: {
AnimatedDot().frame(minWidth: 200, maxWidth: .infinity, minHeight: 20, maxHeight: 20)
}).foregroundColor(Color.blue)
.padding()
.background(Color.gray)
.cornerRadius(10.0)
.frame(minWidth: 0, maxWidth: 350)
}
}
struct AnimatedDot: View {
@State private var shouldAnimate = false
var body: some View {
HStack {
Circle()
.fill(Color.white)
.frame(width: 15, height: 15)
.scaleEffect(shouldAnimate ? 1.0 : 0.5)
.animation(Animation.easeInOut(duration: 0.3).repeatForever())
Circle()
.fill(Color.white)
.frame(width: 15, height: 15)
.scaleEffect(shouldAnimate ? 1.0 : 0.5)
.animation(Animation.easeInOut(duration: 0.3).repeatForever().delay(0.3))
Circle()
.fill(Color.white)
.frame(width: 15, height: 15)
.scaleEffect(shouldAnimate ? 1.0 : 0.5)
.animation(Animation.easeInOut(duration: 0.3).repeatForever().delay(0.6))
}
.onAppear {
self.shouldAnimate = true
}
}
}
Вот фиксированное тело - присоедините анимацию к значению состояния.
Протестировано с Xcode 12.1/iOS 14.1
var body: some View {
HStack {
Circle()
.fill(Color.white)
.frame(width: 15, height: 15)
.scaleEffect(shouldAnimate ? 1.0 : 0.5)
.animation(Animation.easeInOut(duration: 0.3).repeatForever(), value: shouldAnimate)
Circle()
.fill(Color.white)
.frame(width: 15, height: 15)
.scaleEffect(shouldAnimate ? 1.0 : 0.5)
.animation(Animation.easeInOut(duration: 0.3).repeatForever().delay(0.3), value: shouldAnimate)
Circle()
.fill(Color.white)
.frame(width: 15, height: 15)
.scaleEffect(shouldAnimate ? 1.0 : 0.5)
.animation(Animation.easeInOut(duration: 0.3).repeatForever().delay(0.6), value: shouldAnimate)
}
.onAppear {
self.shouldAnimate = true
}
}
Мне лично нравится, как у вас было. это весело