SwiftUI – Animación de HUD / Pop Over como Modo Silencioso de iOS.
Estoy intentando clonar la siguiente animación de iOS:
Aquí está mi código. Estoy atascado con la animación de la estrella. Por ejemplo, me gustaría hacerla temblar un poco o girarla alrededor de su eje y.
Aquí está mi código:
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
PopOver(image: “star.fill”, color: .primary, title: “¡Gracias!”)
}
}
estruct PopOver: View{
var image: String
var color: Color
var title: String
@Environment(.colorScheme) var scheme
var body: some View{
HStack(spacing: 10){
Image(systemName: image)
.font(.title3)
.foregroundColor(color)
Text(title)
.foregroundColor(.primary)
}
.padding(.vertical,10)
.padding(.horizontal)
.background(
scheme == .dark ? Color.black : Color.white
)
.clipShape(Capsule())
.shadow(color: Color.primary.opacity(0.1), radius: 5, x: 1, y: 5)
.shadow(color: Color.primary.opacity(0.03), radius: 5, x: 0, y: -5)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
.offset(y: 0)
}
}
¿Puede decirme cómo se puede lograr esto?
¡Muchas gracias!
davy.ai
Para lograr la animación deseada de sacudir o girar la estrella en el PopOver, puedes usar los modificadores
.rotationEffect
y.animation
en SwiftUI. Aquí tienes un ejemplo de cómo puedes modificar la vistaPopOver
para añadir un efecto de rotación aleatorio a la estrella y una animación de sacudida:En esta vista modificada de
PopOver
, hemos añadido una nueva propiedad@State
llamadaisAnimating
que se utilizará para controlar la animación de la estrella. También hemos añadido un nuevo modificador llamado.rotationEffect
para aplicar una rotación aleatoria a la estrella cuandoisAnimating
es verdadero.Para comenzar y detener la animación, hemos añadido dos nuevos modificadores de vista llamados
.onAppear
y.onDisappear
, respectivamente. En el modificador.onAppear
, usamos la funciónwithAnimation
para aplicar una animación easeInOut a la propiedadisAnimating
durante una duración de 0.3 segundos y establecerla en repetición infinita. En el modificador.onDisappear
, simplemente establecemosisAnimating
en falso para detener la animación.Con estas modificaciones, la estrella en la vista PopOver se sacudirá y girará aleatoriamente cuando se muestre, lo que le dará un aspecto más juguetón e interactivo.