Hola, les saluda Miguel y hoy les traigo otro nuevo artículo.
Índice
Hermosos estados de carga
Crear una animación intuitiva es muy simple y eficiente en el nuevo marco de Apple, SwiftUI. Antes de comenzar, vea el video a continuación para conocer lo que estamos a punto de discutir.
En SwiftUI, podemos agregar animación para ver propiedades animables usando el modificador .animation ()
. Hay una lista de propiedades animables en una vista, como:
1. Opacidad.
2. Compensar.
3. Escala.
4. Marco.
5. etc …
Debe aplicar cualquiera de las propiedades animables a su vista para obtener un efecto de animación usando el modificador .animation()
.
Una vista con el .animation()
el modificador sin ninguna propiedad animable no hace nada. Dicho esto, comencemos.
struct ContentView: View { let timer = Timer.publish(every: 1.6, on: .main, in: .common).autoconnect() @State var leftOffset: CGFloat = -100 @State var rightOffset: CGFloat = 100 var body: some View { ZStack { Circle() .fill(Color.blue) .frame(width: 20, height: 20) .offset(x: leftOffset) .opacity(0.7) .animation(Animation.easeInOut(duration: 1)) Circle() .fill(Color.blue) .frame(width: 20, height: 20) .offset(x: leftOffset) .opacity(0.7) .animation(Animation.easeInOut(duration: 1).delay(0.2)) Circle() .fill(Color.blue) .frame(width: 20, height: 20) .offset(x: leftOffset) .opacity(0.7) .animation(Animation.easeInOut(duration: 1).delay(0.4)) } .onReceive(timer) { (_) in swap(&self.leftOffset, &self.rightOffset) } } }
- Cree tres círculos usando la forma de círculo en SwiftUI con
20x20
de ancho y alto. - Aquí, estamos animando el desplazamiento de los círculos, lo que hace que los círculos se muevan de izquierda a derecha (➡️) y de derecha a izquierda (⬅️).
- Hemos agregado un temporizador que se activará cada
1,6
segundos para intercambiar el valor de compensación. Inicialmente, el desplazamiento estará en100 (leftOffset)
, lo que hace que los círculos se muevan de izquierda a derecha; después de1,6
segundos,leftOffset
se cambiará a-100
, lo que hace que los círculos se muevan de derecha a izquierda. - ¿Por qué un temporizador de
1,6
segundos?1.6
segundos=
duración de la animación de1
círculo( 1 ) +
retraso del segundo círculo( 0.2 ) +
retraso del tercer círculo( 0.4 )
. - Hemos reducido la opacidad de los círculos para dar una sensación agradable al pasar de un lado a otro.
- ¿Notaste un retraso en el segundo y tercer círculo? Si, el retraso ayuda a iniciar la animación después de esperar el retraso mencionado. En nuestro caso, la demora nos ayuda a mover los círculos uno a uno. Si no mencionáramos el retraso, todos los círculos se moverían al mismo tiempo.
- Hemos utilizado la animación
easyInOut
predeterminada con una duración de1
segundo. Hay un montón de animaciones disponibles por defecto, comoeasyIn, easyOut, spring
, etc … adelante y juega con él.
struct ContentView: View { @State private var shouldAnimate = false @State var leftOffset: CGFloat = -100 @State var rightOffset: CGFloat = 100 var body: some View { RoundedRectangle(cornerRadius: 10) .fill(Color.blue) .frame(width: 80, height: 20) .offset(x: shouldAnimate ? rightOffset : leftOffset) .animation(Animation.easeInOut(duration: 1).repeatForever(autoreverses: true)) .onAppear { self.shouldAnimate = true } } }
- Cree una forma
RoundedRectangle
concornerRadius
como10
y un marco de80x20
. - Aquí estamos animando el
offSet
de la vista. Pero esta vez, hemos logrado la animación sin el temporizador. En su lugar, hemos agregado la variableshouldAnimate @State
. - Siempre que cambiemos el valor
shouldAnimate
, SwiftUI volverá a representar la propiedad del cuerpo de la vista nuevamente. Inicialmente, lo hemos establecido como falso y.onAppear ()
lo hemos establecido como verdadero, lo que activa la animación. - ¿Cómo se recupera la vista sin cambiar el desplazamiento? 🤔 Puede ser debido a
.repeatForever (autoreverses: true)
(🔁). Esto hace que la vista para animar continúe para siempre con una bonita animación inversa. - Intente cambiar las reversiones automáticas como falsas y vea qué sucede. 😅
- Hemos utilizado la animación
easyInOut
predeterminada con una duración de1 segundo
.
struct ContentView: View { @State private var shouldAnimate = false var body: some View { HStack(alignment: .center, spacing: shouldAnimate ? 15 : 5) { Capsule(style: .continuous) .fill(Color.blue) .frame(width: 10, height: 50) Capsule(style: .continuous) .fill(Color.blue) .frame(width: 10, height: 30) Capsule(style: .continuous) .fill(Color.blue) .frame(width: 10, height: 50) Capsule(style: .continuous) .fill(Color.blue) .frame(width: 10, height: 30) Capsule(style: .continuous) .fill(Color.blue) .frame(width: 10, height: 50) } .frame(width: shouldAnimate ? 150 : 100) .animation(Animation.easeInOut(duration: 1).repeatForever(autoreverses: true)) .onAppear { self.shouldAnimate = true } } }
- Crea una forma de cápsula con estilo como continuo y marco de
10x50
. - Aquí, estamos animando la vista de contenedor
HStack
en lugar de una cápsula cambiando su ancho y espaciado según la variable de estadoshouldAnimate
. - Mire cómo las vistas secundarias se animan muy bien cuando cambiamos el ancho y el espaciado de la vista del contenedor.
- Uso de la animación
easyInOut
conrepeatForever
(autoreverses: true
)para obtener una bonita animación inversa con una duración de1 segundo
.
struct ContentView: View { @State private var shouldAnimate = false var body: some View { HStack { Circle() .fill(Color.blue) .frame(width: 20, height: 20) .scaleEffect(shouldAnimate ? 1.0 : 0.5) .animation(Animation.easeInOut(duration: 0.5).repeatForever()) Circle() .fill(Color.blue) .frame(width: 20, height: 20) .scaleEffect(shouldAnimate ? 1.0 : 0.5) .animation(Animation.easeInOut(duration: 0.5).repeatForever().delay(0.3)) Circle() .fill(Color.blue) .frame(width: 20, height: 20) .scaleEffect(shouldAnimate ? 1.0 : 0.5) .animation(Animation.easeInOut(duration: 0.5).repeatForever().delay(0.6)) } .onAppear { self.shouldAnimate = true } } }
- Cree tres círculos usando la forma Circle en SwiftUI con un ancho y alto de
20x20
. - Aquí estamos animando la propiedad de escala del círculo usando el modificador
.scaleEffect ()
basado en la variable de estadoshouldAnimate
. - El retraso en el segundo y tercer círculo evita que todos los círculos aumenten y disminuyan al mismo tiempo.
- Utilice la animación
easyInOut
conrepeatForever
(autoreverses: true
) para obtener una bonita animación inversa con una duración de0,5 segundos
.
struct ContentView: View { @State private var shouldAnimate = false var body: some View { Circle() .fill(Color.blue) .frame(width: 30, height: 30) .overlay( ZStack { Circle() .stroke(Color.blue, lineWidth: 100) .scaleEffect(shouldAnimate ? 1 : 0) Circle() .stroke(Color.blue, lineWidth: 100) .scaleEffect(shouldAnimate ? 1.5 : 0) Circle() .stroke(Color.blue, lineWidth: 100) .scaleEffect(shouldAnimate ? 2 : 0) } .opacity(shouldAnimate ? 0.0 : 0.2) .animation(Animation.easeInOut(duration: 1).repeatForever(autoreverses: false)) ) .onAppear { self.shouldAnimate = true } } }
- Cree un círculo base usando la forma Circle en
SwiftUI
con un ancho y alto de30x30
. - Aquí estamos animando la propiedad de escala de los círculos superpuestos usando el modificador
.scaleEffect ()
basado en la variable de estadoshouldAnimate
. - Hemos agregado diferentes valores de escala para círculos superpuestos para obtener un efecto de onda.
Stroke ()
es como un borde, que se recomienda para formasstroke ()
aplica la mitad del borde dentro y la mitad fuera de la forma.- Utilice la animación
easyInOut
conrepeatForever
(autoreverses: false
) para obtener una animación unidireccional con una duración de1 segundo
.
Juega con la animación predeterminada proporcionada por SwiftUI para crear tu animación usando el modificador .animation ()
según lo necesites.
Gracias por leer este artículo.
Añadir comentario