Используем 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] = ["
Похожие статьи:
Ранее в этом году представители Samsung официально заявляли о планах по созданию сгибаемого смартфона. При этом предполагалось, что модель...
Антимонопольний комітет України вдруге відхилив заявку оператора «Київстар» на купівлю сервісу бронювання ліків Tabletki.ua.
Про...
Компания LG Electronics открыла предзаказ на новый смартфон Nexus 5X в России по цене 34 990 рублей. Модель работает на новейшей...
До вашої уваги дайджест навчальних програм для тих, хто починає свою кар’єру в ІТ. У цьому номері зібрані...
.jpg&w=160&h=120&zc=1)