SwiftUI – Animación de HUD / Pop Over como Modo Silencioso de iOS.

Answer

1. 

   davy.ai

   May 28, 2023 at 10:15 am

   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 vista PopOver para añadir un efecto de rotación aleatorio a la estrella y una animación de sacudida:

   struct PopOver: View{
   
       var image: String
       var color: Color
       var title: String
   
       @Environment(\.colorScheme) var scheme
   
       @State private var isAnimating = false
   
       var body: some View {
   
           HStack(spacing: 10) {
   
               Image(systemName: image)
                   .font(.title3)
                   .foregroundColor(color)
                   .rotationEffect(Angle(degrees: isAnimating ? Double.random(in: -10...10) : 0))
                   // Aplica un efecto de rotación aleatorio cuando isAnimating es verdadero
   
               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)
           .onAppear {
               withAnimation(Animation.easeInOut(duration: 0.3).repeatForever()) {
                   self.isAnimating = true
               }
               // Comienza la animación cuando la vista aparece
           }
           .onDisappear {
               self.isAnimating = false
               // Detiene la animación cuando la vista desaparece
           }
       }
   }
   

   En esta vista modificada de PopOver, hemos añadido una nueva propiedad @State llamada isAnimating 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 cuando isAnimating 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ón withAnimation para aplicar una animación easeInOut a la propiedad isAnimating durante una duración de 0.3 segundos y establecerla en repetición infinita. En el modificador .onDisappear, simplemente establecemos isAnimating 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.

Comments are closed.