Transformaciones y efectos 3D
Aplique transformaciones afines y 3D.
Transformaciones y efectos 3D es una lección gratuita de Swift Academy en CoddyKit. Esta es la lección 3 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.
Las transformaciones mueven y deforman
Una transformación cambia la forma de una capa, ya sea trasladándola, escalándola, girándola o sesgándola, sin modificar sus límites. Core Animation admite transformaciones 2D (CGAffineTransform) y 3D (CATransform3D).
Transformaciones afines 2D
CGAffineTransform gestiona transformaciones planas. Combínelas mediante concatenación; el orden es importante.
import UIKit
var t = CGAffineTransform.identity
t = t.scaledBy(x: 1.5, y: 1.5)
t = t.rotated(by: .pi / 6)
layer.setAffineTransform(t)CATransform3D
CATransform3D es una matriz 4x4 que permite trabajar en 3D real. Comience con CATransform3DIdentity y aplique traslación, escala y rotación en el espacio.
var t = CATransform3DIdentity
t = CATransform3DScale(t, 1.2, 1.2, 1)
layer.transform = tRotación 3D
Gire alrededor de cualquier eje con CATransform3DRotate(t, angle, x, y, z). Girar alrededor del eje y voltea una tarjeta; alrededor del eje x la inclina hacia delante.
let angle = CGFloat.pi / 4
layer.transform = CATransform3DRotate(
CATransform3DIdentity, angle, 0, 1, 0) // around yPerspectiva
Una rotación 3D sencilla se ve plana sin perspectiva. Establezca el elemento m34 de la matriz identidad en un valor negativo pequeño, aproximadamente -1/500, para añadir profundidad.
var perspective = CATransform3DIdentity
perspective.m34 = -1.0 / 500.0
layer.transform = CATransform3DRotate(perspective, .pi / 4, 0, 1, 0)Por qué m34 crea profundidad
El término m34 divide x e y por la profundidad, por lo que los puntos más lejanos se reducen. Las magnitudes menores, con un denominador mayor, producen una perspectiva sutil; las mayores la exageran.
// -1/2000 = subtle, -1/200 = dramatic
perspective.m34 = -1.0 / 1000.0Punto de anclaje y transformaciones
Las transformaciones pivotan alrededor de anchorPoint. Para girar una tarjeta alrededor de su borde izquierdo, establezca primero anchorPoint en (0, 0.5).
layer.anchorPoint = CGPoint(x: 0, y: 0.5)
layer.transform = CATransform3DRotate(
CATransform3DIdentity, .pi / 3, 0, 1, 0)Animar transformaciones
La transformación completa es animable. Anime la ruta de clave transform o subclaves como transform.rotation.y para un solo eje.
let spin = CABasicAnimation(keyPath: "transform.rotation.y")
spin.fromValue = 0
spin.toValue = CGFloat.pi * 2
spin.duration = 1.5
layer.add(spin, forKey: "spin")Transformaciones de subcapas
Establezca sublayerTransform en un elemento principal para aplicar perspectiva a todos sus elementos secundarios a la vez, algo útil para contenedores 3D y carruseles.
var t = CATransform3DIdentity
t.m34 = -1.0 / 500.0
parentLayer.sublayerTransform = tzPosition y ordenación por profundidad
zPosition controla el orden de dibujo en el espacio 3D. Los valores más altos se renderizan delante. Combínelo con la rotación para crear escenas 3D superpuestas y estratificadas.
frontCard.zPosition = 10
backCard.zPosition = 0Combinación de transformaciones
Concatene transformaciones para componer efectos. Recuerde que la multiplicación de matrices no es conmutativa: rotar y después escalar produce un resultado distinto que escalar y después rotar.
var t = CATransform3DIdentity
t = CATransform3DRotate(t, .pi / 6, 0, 0, 1)
t = CATransform3DScale(t, 2, 2, 1)Comprobación rápida: transformaciones
Compruebe su comprensión de las transformaciones 3D.
Resumen: transformaciones y efectos 3D
Las transformaciones modifican la forma de las capas sin alterar sus límites: CGAffineTransform para 2D y CATransform3D para 3D real. Añada profundidad estableciendo m34 (aproximadamente -1/500), defina el punto de pivote mediante anchorPoint y aplique perspectiva al contenedor con sublayerTransform.
Anime las transformaciones completas o por eje, ordene la profundidad con zPosition y recuerde que el orden en que se componen las transformaciones es importante.
Preguntas frecuentes
¿La lección «Transformaciones y efectos 3D» es gratis?
Sí — el texto completo de «Transformaciones y efectos 3D» 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 «Transformaciones y efectos 3D»?
Aplique transformaciones afines y 3D. 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 3 de 4.
¿Cuánto tiempo toma la lección «Transformaciones y efectos 3D»?
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
- Fundamentos de CALayer
- Animaciones implícitas y explícitas
- Transformaciones y efectos 3D
- Dibujo personalizado con Core Graphics