Используем SpriteKit для создания анимации в Swift
[От редакции: после публикации статьи оказалось, что в ней есть заимствования из статьи «Using SpriteKit to create animations in Swift». Благодарим Dim Walker за внимательность]
Сейчас я работаю в GameDev-компании, которая использует игровой движок SpriteKit в разработке своих проектов. В этой статье я хочу продемонстрировать, как даже в UIkit-проектах можно легко применить его для быстрого создания анимаций.
SpriteKit — это нативный игровой движок от Apple, представленный впервые в iOS 7 и Mac OS 10.9. Обычно он используется для создания 2D-игр. Но это не мешает ему быть хорошим инструментом при создании анимаций, 2D-текстур и не только. Например, на WWDC 2017 Apple раскрыла, что задействовала SpriteKit в UI для Memory Debugger в Xcode.
Использование анимации в приложениях дает возможность сделать их более привлекательными для пользователей и эстетически изящными. Это способствует лучшему пониманию функциональности.
Ведь хорошую эффективность в работе можно получить только от эстетически приятной картинки, для создания которой потребуется много экспериментировать с настройками и интеграцией, чтобы добиться идеального результата. Вот почему, создавая анимацию, важно использовать специальные инструменты, позволяющие легко выполнять изменения в настройках параметров. Давайте убедимся самостоятельно, насколько эффективно применение SpriteKit в различных видах анимации.
SpriteKit очень удобен для создания несложных анимационных сцен, таких как полноэкранная анимация загрузки, иллюстрация в Onboarding- и Tutorial-экранах или в других элементах пользовательского интерфейса. Для наглядности попробуем создать анимацию загрузки, в которой будут использоваться 4 emoji: Tangerine, Lemon, Peach, Mango.
Настройка сцены
Все содержимое в SpriteKit-сцене представлено объектом SKScene. Затем ее наполнение определяется с помощью так называемых нод (node), позволяющих создавать иерархию наподобие применяемой в UIViews или CALayers. Сцена является root-нодой в иерархии.
Для наполнения сцены используются определенные сабклассы SKNode:
- SKSpriteNode подойдет для создания контента на базе спрайтов;
- SKLabelNode — для работы с текстовым контентом;
- SKLightNode — для управления светом на сцене;
- SKEmitterNode — для создания эффекта частиц, то есть дыма, огня, искр и других;
- SKShapeNode — для создания простых графических элементов из математических точек, линий и кривых;
- SKReferenceNode, SKAudioNode, SKCameraNode, SKVideoNode... Полный список можно посмотреть в документации.
Дополнительно будут использоваться различные SKAction для подключения действий к нодам в виде перемещения, изменения размеров или вращения.
Благодаря этим приемам мы сможем оживить нашу картинку и привести ее элементы в движение.
Итак, приступим!
Попробуем начать с создания SKScene в качестве базовой основы для будущей анимации. Для этого придадим элементу форму квадрата белого цвета, исходя из размера контроллера:
func makeScene() -> SKScene {
let minimumDimension = min(view.frame.width, view.frame.height)
let size = CGSize(width: minimumDimension, height: minimumDimension)
let scene = SKScene(size: size)
scene.backgroundColor = .white
return scene
}
Мы презентуем SKScene через SKView (который является сабклассом от UIView), добавив определенные манипуляции по изменению размера и центрированию. Теперь можно сделать present сцены:
import UIKit
import SpriteKit
final class ViewController: UIViewController {
private let animationView = SKView()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(animationView)
let scene = makeScene()
animationView.frame.size = scene.size
animationView.presentScene(scene)
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
animationView.center.x = view.bounds.midX
animationView.center.y = view.bounds.midY
}
}
Добавление нод
Имея сцену для рендеринга, можно начать добавлять контент.
Так как в текущем примере будут использоваться самые простые emoji-смайлики в качестве текстур, удобнее всего будет применить SKLabelNode (аналог UILabel в UIkit).
Итак, приступим к созданию extension для SKLabelNode, позволяющего рендерить emoji:
extension SKLabelNode {
func renderEmoji(_ emoji: Character) {
fontSize = 50
text = String(emoji)
verticalAlignmentMode = .center
horizontalAlignmentMode = .center
}
}
Далее, напишем еще один из методов, чтобы добавить все смайлики на сцену.
func addEmoji(to scene: SKScene) {
let allEmoji: [Character] = ["
Похожие статьи:
Кіпрська Weplay Media Holding Limited — власниця торгової марки Parimatch — подала до суду на президента Володимира Зеленського з вимогою скасувати...
Представляємо третю статтю літнього циклу про зарплати українських ІТ-спеціалістів. Раніше ми публікували дані, які стосуються...
Итак, мы переехали из одной самой большой страны Европы в другую: если учитывать Гренландию, то № 1 по территории — это Дания,...
В опросе приняло участие 3982 человека. Исходные данные для анализа есть на GitHub. Мы же ищем аналитика для проведения этого...