Трансформации и трёхмерные эффекты
Применяйте аффинные и трёхмерные трансформации.
«Трансформации и трёхмерные эффекты» — бесплатный урок Swift Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Swift Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Swift Academy содержит 4 уроков всего.
transform перемещает и искажает
transform изменяет форму слоя — перемещает, масштабирует, поворачивает и наклоняет его, не меняя его границы. Core Animation поддерживает как двумерные (CGAffineTransform), так и трёхмерные (CATransform3D) преобразования.
Двумерные аффинные преобразования
CGAffineTransform работает с плоскими преобразованиями. Объединяйте их конкатенацией; порядок имеет значение.
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 — это матрица 4×4, позволяющая выполнять настоящие трёхмерные преобразования. Начните с CATransform3DIdentity и применяйте перемещение, масштабирование и вращение в пространстве.
var t = CATransform3DIdentity
t = CATransform3DScale(t, 1.2, 1.2, 1)
layer.transform = tВращение в трёхмерном пространстве
Поворачивайте вокруг любой оси с помощью CATransform3DRotate(t, angle, x, y, z). Вращение вокруг оси y переворачивает карточку, а вокруг оси x наклоняет её вперёд.
let angle = CGFloat.pi / 4
layer.transform = CATransform3DRotate(
CATransform3DIdentity, angle, 0, 1, 0) // around yPerspective
Обычное трёхмерное вращение выглядит плоским без perspective. Задайте элементу матрицы m34 небольшое отрицательное значение, примерно -1/500, чтобы добавить глубину.
var perspective = CATransform3DIdentity
perspective.m34 = -1.0 / 500.0
layer.transform = CATransform3DRotate(perspective, .pi / 4, 0, 1, 0)Почему m34 создаёт глубину
Член m34 делит x и y на глубину, поэтому удалённые точки уменьшаются. Меньшие по модулю значения, то есть больший знаменатель, дают мягкую перспективу, а большие значения усиливают её.
// -1/2000 = subtle, -1/200 = dramatic
perspective.m34 = -1.0 / 1000.0Опорная точка и преобразования
Преобразования выполняются вокруг anchorPoint. Чтобы повернуть карточку вокруг её левого края, сначала задайте anchorPoint равным (0, 0.5).
layer.anchorPoint = CGPoint(x: 0, y: 0.5)
layer.transform = CATransform3DRotate(
CATransform3DIdentity, .pi / 3, 0, 1, 0)Анимация преобразований
Всё преобразование можно анимировать. Анимируйте путь ключа transform или его подчинённые ключи, например transform.rotation.y для одной оси.
let spin = CABasicAnimation(keyPath: "transform.rotation.y")
spin.fromValue = 0
spin.toValue = CGFloat.pi * 2
spin.duration = 1.5
layer.add(spin, forKey: "spin")Преобразования подслоёв
Задайте sublayerTransform для родительского слоя, чтобы сразу применить перспективу ко всем его дочерним слоям — это удобно для 3D-контейнеров и каруселей.
var t = CATransform3DIdentity
t.m34 = -1.0 / 500.0
parentLayer.sublayerTransform = tzPosition и сортировка по глубине
zPosition управляет порядком отрисовки в 3D-пространстве. При более высоких значениях объект отображается спереди. Сочетайте его с поворотом для создания многослойных перекрывающихся 3D-сцен.
frontCard.zPosition = 10
backCard.zPosition = 0Объединение преобразований
Объединяйте преобразования, чтобы комбинировать эффекты. Помните, что умножение матриц не является коммутативным: поворот с последующим масштабированием отличается от масштабирования с последующим поворотом.
var t = CATransform3DIdentity
t = CATransform3DRotate(t, .pi / 6, 0, 0, 1)
t = CATransform3DScale(t, 2, 2, 1)Быстрая проверка: преобразования
Проверьте, насколько хорошо Вы понимаете 3D-преобразования.
Итоги: преобразования и 3D-эффекты
Преобразования изменяют форму слоёв, не меняя их границы: CGAffineTransform используется для 2D, а CATransform3D — для настоящего 3D. Добавьте глубину, задав m34 (примерно -1/500), настройте точку вращения через anchorPoint, а перспективу контейнера примените с помощью sublayerTransform.
Анимируйте преобразования целиком или по отдельным осям, сортируйте объекты по глубине с помощью zPosition и помните, что порядок объединения преобразований имеет значение.
Изучай Swift с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 122
- Уроки
- 409
Часто задаваемые вопросы
Урок «Трансформации и трёхмерные эффекты» бесплатный?
Да — полный текст урока «Трансформации и трёхмерные эффекты» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Swift Academy, подпишись на CoddyKit PRO. Курс Swift Academy содержит 4 уроков всего.
Чему я научусь в уроке «Трансформации и трёхмерные эффекты»?
Применяйте аффинные и трёхмерные трансформации. Ты практикуешь Swift Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Swift Academy?
Предыдущий опыт не требуется. Swift Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Трансформации и трёхмерные эффекты»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Swift Academy?
Да. Каждый урок Swift Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основы CALayer
- Неявные и явные анимации
- Трансформации и трёхмерные эффекты
- Пользовательская отрисовка с Core Graphics