Swift Academy · Lección

Animaciones implícitas y explícitas

Anime propiedades de capas con CABasicAnimation.

Animaciones implícitas y explícitas es una lección gratuita de Swift Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Swift Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Swift Academy incluye 4 lecciones en total.

Dos formas de animar capas

Core Animation ofrece animaciones implícitas, que se producen automáticamente al cambiar una propiedad, y animaciones explícitas, en las que usted crea un objeto de animación.

Conocer ambas formas y cómo interactúan es fundamental para lograr un movimiento fluido.

Animaciones implícitas

Cambiar una propiedad animable de una capa independiente activa una animación implícita con una curva predeterminada de 0,25 s; no se necesita ningún objeto de animación.

let layer = CALayer()
// Later, this animates automatically:
layer.opacity = 0.0

Propiedades animables

Muchas propiedades de las capas son animables: opacity, position, bounds, backgroundColor, transform, cornerRadius, entre otras.

layer.cornerRadius = 20 // animates implicitly
layer.backgroundColor = UIColor.systemGreen.cgColor

Acciones y el mecanismo de acciones

Las animaciones implícitas se controlan mediante acciones. Cuando cambia una propiedad, la capa busca una CAAction que ejecutar. Puede personalizar o desactivar estas acciones.

Las capas asociadas a vistas desactivan las animaciones implícitas

Las capas asociadas a un UIView tienen desactivadas las animaciones implícitas. Puede animarlas mediante UIView.animate o usar animaciones explícitas.

UIView.animate(withDuration: 0.3) {
    view.alpha = 0
}

CABasicAnimation

CABasicAnimation anima una propiedad entre un fromValue y un toValue. Añádala a la capa usando una ruta de clave que coincida con la propiedad.

let anim = CABasicAnimation(keyPath: "opacity")
anim.fromValue = 1.0
anim.toValue = 0.0
anim.duration = 0.5
layer.add(anim, forKey: "fade")

Presentación frente a modelo

Una animación explícita cambia únicamente los valores de presentación, es decir, los que se muestran en pantalla; el valor del modelo de la capa vuelve a su estado anterior cuando termina la animación.

Para conservar el cambio, establezca también el valor del modelo.

layer.opacity = 0.0 // set model value so it persists
layer.add(anim, forKey: "fade")

Animaciones con fotogramas clave

CAKeyframeAnimation anima varios values a lo largo de keyTimes o siguiendo un path; es ideal para rebotes o movimientos a lo largo de curvas.

let move = CAKeyframeAnimation(keyPath: "position")
move.values = [
    NSValue(cgPoint: CGPoint(x: 0, y: 0)),
    NSValue(cgPoint: CGPoint(x: 100, y: 0)),
    NSValue(cgPoint: CGPoint(x: 100, y: 100))
]
move.duration = 1.0
layer.add(move, forKey: "path")

Funciones de temporización

Controle la aceleración mediante timingFunction: ease-in, ease-out, lineal o una curva de Bezier cúbica personalizada.

anim.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)

Agrupación y transacciones

Envuelva varios cambios en una CATransaction para compartir duración y temporización, o para desactivar por completo las animaciones implícitas.

CATransaction.begin()
CATransaction.setDisableActions(true)
layer.position = CGPoint(x: 200, y: 200)
CATransaction.commit()

Delegados de animación y finalización

Establezca CATransaction.setCompletionBlock o un delegado de animación para ejecutar código cuando termine el movimiento, por ejemplo, para limpiar recursos, encadenar animaciones o actualizar el estado.

CATransaction.begin()
CATransaction.setCompletionBlock { print("done") }
layer.add(anim, forKey: "fade")
CATransaction.commit()

Comprobación rápida: animaciones

Compruebe su comprensión de las animaciones implícitas y explícitas.

Resumen: animaciones implícitas y explícitas

Las capas independientes se animan implícitamente mediante acciones al cambiar propiedades animables; las capas asociadas a vistas desactivan este comportamiento y usan UIView.animate. Las animaciones explícitas CABasicAnimation y CAKeyframeAnimation animan el valor de presentación, por lo que debe actualizar el valor del modelo para conservar los resultados.

Ajuste el movimiento con funciones de temporización, agrupe cambios en CATransaction y use bloques de finalización para las tareas posteriores.

Preguntas frecuentes

¿La lección «Animaciones implícitas y explícitas» es gratis?

Sí — el texto completo de «Animaciones implícitas y explícitas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Swift Academy, actualiza a CoddyKit PRO. El curso de Swift Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Animaciones implícitas y explícitas»?

Anime propiedades de capas con CABasicAnimation. Practicas Swift Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Swift Academy?

No se requiere experiencia previa. Swift Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Animaciones implícitas y explícitas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Swift Academy?

Sí. Cada lección de Swift Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Swift Academy