ごあいさつ
NewsPicks iOSエンジニアはぐっです！
この記事は NewsPicks Advent Calendar 2024 の23日目の記事です。
はじめに
みなさま、覚えていますか。
あの日晴れてなかったらきっと出会えていなかった、なんてことない日常から作られたあの・・・
猫の手をぉぉぉぉぉぉおおおおお!!!!!!!
そう、トマトマトですね。
https://qiita.com/haguhoms/items/6b005f692fa21d9e4f2a
この猫の手めっちゃかわいくて、作りながらめっちゃテンション上がっていたのを昨日のように覚えています。
これ、さすがに愛着わきすぎて、そのままスマホゲームとして成り立たせて、アプリ公開までいっちゃうんじゃね？
なんなら広告とか入れて、収益化まで目指すんじゃね？
そんで売れに売れて、トマトマトを作った人から怒られたりとかもするんじゃね？(ここまでは思ってない)
そしてはや1年ですか、相変わらずのぐうたらぶりを発揮して、コードは1年前のままでした。
アドベントカレンダーという絶好の機会に、このアプリをさらに進めよう、そんなモチベーションから始まった今回の記事です。
今年やりたかったこと
ゲーム画面は、まぁ調整は全然必要やけどおおまかにはできている。
となると最低限必要なのは、
- 起動画面
- プレイヤー数選択画面
- 結果画面
まぁこの辺だろうと。
で、結果画面なんて、つまりトマトマトのゲームルールを落とし込む、地味っちゃあ地味な作業で。
それは僕じゃなくても書くだろう。
なら何をするべきか、すぐに決まりました。
ってことで選ばれたのは
起動画面
でした。
成果物
しのごの言うてんと、はよ見せんかい！！！
リスナーからお叱りを受けたので、早速成果物から見ていきます。
今回も、いらすとやからの画像と、SwiftUIのView要素だけで作る、シンプルな構成になっています。
トマトとトマトが出会って、ぶつかって、トマトマトになった瞬間、世界が広がって、ゲームが始まるというストーリーです。
これから始まるゲームの世界に引き込むための、人とゲームの最初の出会いの場なので、世界観の一歩目を作れるよう構想しました。
実装
フェーズごとに登場人物がいるので、それぞれで実装を見ていくのですが、前提として、すべてのアニメーションの作り方は同じです。
- 経過秒数
- アニメーション時間
- イージング
- 初期値と終端値
この辺りの要素を組み合わせてそれぞれのアニメーションが成り立っていて、実装方法で新しいことが何個も出てくるわけではないのでアニメーション実装なんとなく怖いみたいな人も把握しやすい記事になっていると思います。
フェーズはそれぞれ
- トマトとトマトが出会って、ぶつかって、トマトマトになる
- 世界が広がる
- ゲームが始まる
こんな感じでざっくり分けますか。
では、まずは共通部分から
共通部分
アニメーションさせるために必要なものをまず準備します。
(トマトマト自体がSwiftUI+TCA(The Composable Architecture)で作られているので、StartReducerもあるのですが、内容空っぽなので割愛します)
※前提、ダークモード対応とかもなく、iPadの横向きだけ考えて作っています。
StartView.swift
import SwiftUI
import ComposableArchitecture
@ViewAction(for: StartReducer.self)
struct StartView: View {
@State private var startTime: CFTimeInterval = .zero
@State private var progress: CFTimeInterval = .zero
@State private var task: Task<Void, Never>?
// アニメーション時間
struct AnimateDuration {
// 各要素のアニメーション時間
}
// アニメーションタイミング
struct AnimateTiming {
// 各要素のアニメーションタイミング
}
// 各定義値
struct Const {
static let screenWidth: CGFloat = UIScreen.main.bounds.width
static let screenHeight: CGFloat = UIScreen.main.bounds.height
static let tomatoColor: Color = .init(red: 0.74, green: 0.18, blue: 0.14)
static let tomatoSize: CGFloat = 64
}
let store: StoreOf<StartReducer>
init(store: StoreOf<StartReducer>) {
self.store = store
}
var body: some View {
ZStack {
// View要素が入っていく
}
.onAppear { start() }
}
}
extension StartView {
private func start() {
task?.cancel()
task = Task {
reset()
for await event in await CADisplayLink.events() {
progress = event.timestamp - startTime
}
}
}
private func reset() {
startTime = CACurrentMediaTime()
// また最初から開始したいとかなる場合はここで各要素を初期値にする
}
}
CADisplayLinkとCustomEasingに関しては、前の記事でも話しているので畳んでおきます。
CADisplayLinkの詳細
CADisplayLink+.swift
import UIKit
@MainActor
extension CADisplayLink {
static func events() -> AsyncStream<CADisplayLink> {
AsyncStream { continuation in
let displayLink = DisplayLink { displayLink in
continuation.yield(displayLink)
}
continuation.onTermination = { _ in
Task { await displayLink.stop() }
}
}
}
}
private extension CADisplayLink {
@MainActor
private class DisplayLink: NSObject {
private var displayLink: CADisplayLink!
private let handler: (CADisplayLink) -> Void
init(mode: RunLoop.Mode = .default, handler: @escaping (CADisplayLink) -> Void) {
self.handler = handler
super.init()
displayLink = CADisplayLink(target: self, selector: #selector(handle(displayLink:)))
displayLink.add(to: .main, forMode: mode)
}
func stop() {
displayLink.invalidate()
}
@objc func handle(displayLink: CADisplayLink) {
handler(displayLink)
}
}
}
CustomEasingの詳細
CustomEasing.swift
import CoreGraphics
import SwiftUI
enum CustomEasing {
enum easeIn {
case sine
case quad
case cubic
case quart
case quint
case expo
case circ
case back
func timingCurve(duration: CGFloat = 0.2) -> Animation {
switch self {
case .sine: return .timingCurve(0.12, 0, 0.39, 0, duration: duration)
case .quad: return .timingCurve(0.11, 0, 0.5, 0, duration: duration)
case .cubic: return .timingCurve(0.32, 0, 0.67, 0, duration: duration)
case .quart: return .timingCurve(0.5, 0, 0.75, 0, duration: duration)
case .quint: return .timingCurve(0.64, 0, 0.78, 0, duration: duration)
case .expo: return .timingCurve(0.7, 0, 0.84, 0, duration: duration)
case .circ: return .timingCurve(0.55, 0, 1, 0.45, duration: duration)
case .back: return .timingCurve(0.36, 0, 0.66, -0.56, duration: duration)
}
}
func progress(elapsed: CGFloat) -> CGFloat {
switch self {
case .sine:
return 1 - cos((elapsed * .pi) / 2)
case .quad:
return elapsed * elapsed
case .cubic:
return elapsed * elapsed * elapsed
case .quart:
return elapsed * elapsed * elapsed * elapsed
case .quint:
return elapsed * elapsed * elapsed * elapsed * elapsed
case .expo:
return elapsed == 0 ? 0 : pow(2, 10 * elapsed - 10)
case .circ:
return 1 - sqrt(1 - pow(elapsed, 2))
case .back:
let c1 = 1.70158
let c3 = c1 + 1
return c3 * elapsed * elapsed * elapsed - c1 * elapsed * elapsed
}
}
}
enum easeOut {
case sine
case quad
case cubic
case quart
case quint
case expo
case circ
case back
func timingCurve(duration: CGFloat) -> Animation {
switch self {
case .sine: return .timingCurve(0.61, 1, 0.88, 1, duration: duration)
case .quad: return .timingCurve(0.5, 1, 0.89, 1, duration: duration)
case .cubic: return .timingCurve(0.33, 1, 0.68, 1, duration: duration)
case .quart: return .timingCurve(0.25, 1, 0.5, 1, duration: duration)
case .quint: return .timingCurve(0.22, 1, 0.36, 1, duration: duration)
case .expo: return .timingCurve(0.16, 1, 0.3, 1, duration: duration)
case .circ: return .timingCurve(0, 0.55, 0.45, 1, duration: duration)
case .back: return .timingCurve(0.34, 1.56, 0.64, 1, duration: duration)
}
}
func progress(elapsed: CGFloat) -> CGFloat {
switch self {
case .sine:
return sin((elapsed * .pi) / 2)
case .quad:
return 1 - (1 - elapsed) * (1 - elapsed)
case .cubic:
return 1 - pow(1 - elapsed, 3)
case .quart:
return 1 - pow(1 - elapsed, 4)
case .quint:
return 1 - pow(1 - elapsed, 5)
case .expo:
return elapsed == 1 ? 1 : 1 - pow(2, -10 * elapsed)
case .circ:
return sqrt(1 - pow(elapsed - 1, 2))
case .back:
let c1 = 1.70158
let c3 = c1 + 1
return 1 + c3 * pow(elapsed - 1, 3) + c1 * pow(elapsed - 1, 2)
}
}
}
enum easeInOut {
case sine
case quad
case cubic
case quart
case quint
case expo
case circ
case back
func timingCurve(duration: CGFloat) -> Animation {
switch self {
case .sine: return .timingCurve(0.37, 0, 0.63, 1, duration: duration)
case .quad: return .timingCurve(0.45, 0, 0.55, 1, duration: duration)
case .cubic: return .timingCurve(0.65, 0, 0.35, 1, duration: duration)
case .quart: return .timingCurve(0.76, 0, 0.24, 1, duration: duration)
case .quint: return .timingCurve(0.83, 0, 0.17, 1, duration: duration)
case .expo: return .timingCurve(0.87, 0, 0.13, 1, duration: duration)
case .circ: return .timingCurve(0.85, 0, 0.15, 1, duration: duration)
case .back: return .timingCurve(0.68, -0.6, 0.32, 1.6, duration: duration)
}
}
func progress(elapsed: CGFloat) -> CGFloat {
switch self {
case .sine:
return -(cos(.pi * elapsed) - 1) / 2
case .quad:
return elapsed < 0.5 ? 2 * elapsed * elapsed : 1 - pow(-2 * elapsed + 2, 2) / 2
case .cubic:
return elapsed < 0.5 ? 4 * elapsed * elapsed * elapsed : 1 - pow(-2 * elapsed + 2, 3) / 2
case .quart:
return elapsed < 0.5 ? 8 * elapsed * elapsed * elapsed * elapsed : 1 - pow(-2 * elapsed + 2, 4) / 2
case .quint:
return elapsed < 0.5 ? 16 * elapsed * elapsed * elapsed * elapsed * elapsed : 1 - pow(-2 * elapsed + 2, 5) / 2
case .expo:
return elapsed == 0
? 0
: elapsed == 1
? 1
: elapsed < 0.5 ? pow(2, 20 * elapsed - 10) / 2
: (2 - pow(2, -20 * elapsed + 10)) / 2
case .circ:
return elapsed < 0.5
? (1 - sqrt(1 - pow(2 * elapsed, 2))) / 2
: (sqrt(1 - pow(-2 * elapsed + 2, 2)) + 1) / 2
case .back:
let c1 = 1.70158
let c2 = c1 * 1.525
return elapsed < 0.5
? (pow(2 * elapsed, 2) * ((c2 + 1) * 2 * elapsed - c2)) / 2
: (pow(2 * elapsed - 2, 2) * ((c2 + 1) * (elapsed * 2 - 2) + c2) + 2) / 2
}
}
}
}
あとは今回実装したアニメーションの基本構成を。
以下のコードが構成で、大きくは
- before animation
- animation
- after animation
の3部構成になります。
if progress < AnimateTiming.xx {
// before animation
factor = 0
} else if progress <= AnimateTiming.xx + AnimateDuration.xx {
// animation
let elapsed: CGFloat = {
let elapsed = (progress - AnimateTiming.xx) / AnimateDuration.xx
return .minimum(elapsed, 1)
}()
factor = CustomEasing.easeOut.circ.progress(elapsed: elapsed)
} else {
// after animation
factor = 1
}
before animation
- 対象のアニメーションが始まるタイミングまで
- 対象の値を初期値に
animation
- 対象のアニメーションが始まるタイミングから、対象のアニメーションのアニメーション時間が経過するまで
- 対象の値は、指定イージング関数上の経過時間時の値に(上で畳んだCustomEasingでは経過時間を渡すと0-1で値が返ってくるようにしているので、初期値と終端値を組み合わせるとそのタイミングであるべき値が算出される)
after animation
- 対象のアニメーション時間が経過後
- 対象の値は終端値
これが、今回のアニメーションの基本構成で、全部こういう構成になっていると思って見るとなるほどなるほどって読み進められると思います。
トマトとトマトが出会って、ぶつかって、トマトマトになる
左トマト右トマトが出現し、衝突する。
アニメーション前は、初期位置は画面外、透明度は0にしておいて、位置と透明度を変えていく感じ。
StartView.swift
struct StartView {
// 左トマト
@State private var leftTomatoHorizontalTranslation: CGFloat = .zero
@State private var leftTomatoOpacity: CGFloat = .zero
// 右トマト
@State private var rightTomatoHorizontalTranslation: CGFloat = .zero
@State private var rightTomatoOpacity: CGFloat = .zero
struct AnimateDuration {
// トマト出現
static let tomatoAppear = 1.0
// トマト衝突
static let tomatoClash = 1.5
}
struct AnimateTiming {
// 左トマト出現
static let leftTomatoAppear = 0.0
// 右トマト出現
static let rightTomatoAppear = 1.0
// トマト衝突
static let tomatoClash = 2.5
}
struct Const {
// トマト出現
static let tomatoAppearXOffset: CGFloat = Const.screenWidth / 4
// トマト衝突
static let tomatoClashXOffset: CGFloat = Const.screenWidth / 2 - Const.tomatoSize / 2
}
var body: some View {
ZStack {
HStack(spacing: 0) {
tomatoImage
.offset(x: leftTomatoHorizontalTranslation)
.opacity(leftTomatoOpacity)
Spacer()
}
HStack(spacing: 0) {
Spacer()
tomatoImage
.offset(x: rightTomatoHorizontalTranslation)
.opacity(rightTomatoOpacity)
}
}
}
var tomatoImage: some View {
Image("tomato")
.resizable()
.frame(width: Const.tomatoSize, height: Const.tomatoSize)
}
}
extension StartView {
private func start() {
task?.cancel()
task = Task {
reset()
for await event in await CADisplayLink.events() {
progress = event.timestamp - startTime
// 左トマト
animateLeftTomato()
// 右トマト
animateRightTomato()
}
}
}
// 左トマト
private func animateLeftTomato() {
if progress < AnimateTiming.leftTomatoAppear {
// before animation
leftTomatoHorizontalTranslation = -Const.tomatoSize
leftTomatoOpacity = 0
} else if progress <= AnimateTiming.leftTomatoAppear + AnimateDuration.tomatoAppear {
// appear animation
let elapsed: CGFloat = {
let elapsed = (progress - AnimateTiming.leftTomatoAppear) / AnimateDuration.tomatoAppear
return .minimum(elapsed, 1)
}()
leftTomatoHorizontalTranslation = -Const.tomatoSize + CustomEasing.easeInOut.circ.progress(elapsed: elapsed) * (Const.tomatoSize + Const.tomatoAppearXOffset)
leftTomatoOpacity = CustomEasing.easeInOut.circ.progress(elapsed: elapsed)
} else if progress <= AnimateTiming.tomatoClash {
// before clash animation
leftTomatoHorizontalTranslation = Const.tomatoAppearXOffset
leftTomatoOpacity = 1
} else if progress <= AnimateTiming.tomatoClash + AnimateDuration.tomatoClash {
// clash animation
let elapsed: CGFloat = {
let elapsed = (progress - AnimateTiming.tomatoClash) / AnimateDuration.tomatoClash
return .minimum(elapsed, 1)
}()
leftTomatoHorizontalTranslation = Const.tomatoAppearXOffset + CustomEasing.easeInOut.circ.progress(elapsed: elapsed) * (Const.tomatoClashXOffset - Const.tomatoAppearXOffset)
leftTomatoOpacity = 1
} else {
// after animation
leftTomatoHorizontalTranslation = Const.tomatoClashXOffset
leftTomatoOpacity = 1
}
}
// 右トマト
private func animateRightTomato() {
if progress < AnimateTiming.rightTomatoAppear {
// before animation
rightTomatoHorizontalTranslation = Const.tomatoSize
rightTomatoOpacity = 0
} else if progress <= AnimateTiming.rightTomatoAppear + AnimateDuration.tomatoAppear {
// appear animation
let elapsed: CGFloat = {
let elapsed = (progress - AnimateTiming.rightTomatoAppear) / AnimateDuration.tomatoAppear
return .minimum(elapsed, 1)
}()
rightTomatoHorizontalTranslation = Const.tomatoSize - CustomEasing.easeInOut.circ.progress(elapsed: elapsed) * (Const.tomatoSize + Const.tomatoAppearXOffset)
rightTomatoOpacity = CustomEasing.easeInOut.circ.progress(elapsed: elapsed)
} else if progress <= AnimateTiming.tomatoClash {
// before clash animation
rightTomatoHorizontalTranslation = -Const.tomatoAppearXOffset
rightTomatoOpacity = 1
} else if progress <= AnimateTiming.tomatoClash + AnimateDuration.tomatoClash {
// clash animation
let elapsed: CGFloat = {
let elapsed = (progress - AnimateTiming.tomatoClash) / AnimateDuration.tomatoClash
return .minimum(elapsed, 1)
}()
rightTomatoHorizontalTranslation = -Const.tomatoAppearXOffset - CustomEasing.easeInOut.circ.progress(elapsed: elapsed) * (Const.tomatoClashXOffset - Const.tomatoAppearXOffset)
rightTomatoOpacity = 1
} else {
// after animation
rightTomatoHorizontalTranslation = -Const.tomatoClashXOffset
rightTomatoOpacity = 1
}
}
private func reset() {
startTime = CACurrentMediaTime()
// また最初から開始したいとかなる場合はここで各要素を初期値にする
}
}
世界が広がる
トマトがぶつかったところから3つの円が広がって、最終状態の長方形枠を表示させる。
3つの円は、アニメーション時間は一緒にしてイージングを変えることで、同じ動きをしないけど良い感じのリズムで動いてくれるようにしました。
最初の円は、トマトとトマトがぶつかったことによる衝撃から発生した感じにさせたいので、そういうときはeaseOutにして序盤の変化量大きく。
真ん中はeaseInOutにしてほどよくリズムをつけてくれる感じにして。
最後の円は、次の長方形表示への勢いをつけたいので、終盤の変化量が大きいeaseInで。
で、最後に長方形を表示して、起動画面の最後の形を作る。
StartView.swift
struct StartView: View {
// circle
@State private var firstCircleSize: CGFloat = .zero
@State private var secondCircleSize: CGFloat = .zero
@State private var thirdCircleSize: CGFloat = .zero
// rectangle
@State private var rectangleWidth: CGFloat = .zero
@State private var rectangleHeight: CGFloat = .zero
struct AnimateDuration {
// 円広がる
static let circleExpand = 1.0
// 長方形広がる
static let rectangleExpand = 1.0
}
struct AnimateTiming {
// 円広がる
static let firstCircleExpand = 3.6
static let secondCircleExpand = 3.6
static let thirdCircleExpand = 3.8
// 長方形広がる
static let rectangleExpand = 4.5
}
struct Const {
// 円最大値
// 円で画面全体を覆うようにhypotで算出
static let circleMaxSize: CGFloat = hypot(Const.screenWidth, screenHeight)
}
var body: some View {
ZStack {
// 左トマト
// 右トマト
Circle()
.fill(Const.tomatoColor)
.frame(width: firstCircleSize, height: firstCircleSize)
Circle()
.fill(Color.white)
.frame(width: secondCircleSize, height: secondCircleSize)
Circle()
.fill(Const.tomatoColor)
.frame(width: thirdCircleSize, height: thirdCircleSize)
Const.tomatoColor
.frame(width: rectangleWidth, height: rectangleHeight)
.overlay {
Color.white
.frame(width: rectangleWidth > 80 ? rectangleWidth - 80 : 0, height: rectangleHeight > 80 ? rectangleHeight - 80 : 0)
}
}
}
}
extension StartView {
private func start() {
task?.cancel()
task = Task {
reset()
for await event in await CADisplayLink.events() {
progress = event.timestamp - startTime
// 左トマト
// 右トマト
// 円
animateFirstCircle()
animateSecondCircle()
animateThirdCircle()
// 長方形
animateRectangle()
}
}
}
// 1つ目の円
private func animateFirstCircle() {
if progress < AnimateTiming.firstCircleExpand {
// before animation
firstCircleSize = 0
} else if progress <= AnimateTiming.firstCircleExpand + AnimateDuration.circleExpand {
// animation
let elapsed: CGFloat = {
let elapsed = (progress - AnimateTiming.firstCircleExpand) / AnimateDuration.circleExpand
return .minimum(elapsed, 1)
}()
firstCircleSize = CustomEasing.easeOut.circ.progress(elapsed: elapsed) * Const.circleMaxSize
} else {
// after animation
firstCircleSize = Const.circleMaxSize
}
}
// 2つ目の円
private func animateSecondCircle() {
if progress < AnimateTiming.secondCircleExpand {
// before animation
secondCircleSize = 0
} else if progress <= AnimateTiming.secondCircleExpand + AnimateDuration.circleExpand {
// animation
let elapsed: CGFloat = {
let elapsed = (progress - AnimateTiming.secondCircleExpand) / AnimateDuration.circleExpand
return .minimum(elapsed, 1)
}()
secondCircleSize = CustomEasing.easeInOut.circ.progress(elapsed: elapsed) * Const.circleMaxSize
} else {
// after animation
secondCircleSize = Const.circleMaxSize
}
}
// 3つ目の円
private func animateThirdCircle() {
if progress < AnimateTiming.thirdCircleExpand {
// before animation
thirdCircleSize = 0
} else if progress <= AnimateTiming.thirdCircleExpand + AnimateDuration.circleExpand {
// animation
let elapsed: CGFloat = {
let elapsed = (progress - AnimateTiming.thirdCircleExpand) / AnimateDuration.circleExpand
return .minimum(elapsed, 1)
}()
thirdCircleSize = CustomEasing.easeInOut.circ.progress(elapsed: elapsed) * Const.circleMaxSize
} else {
// after animation
thirdCircleSize = Const.circleMaxSize
}
}
// 長方形
private func animateRectangle() {
if progress < AnimateTiming.rectangleExpand {
// before animation
rectangleWidth = 0
rectangleHeight = 0
} else if progress <= AnimateTiming.rectangleExpand + AnimateDuration.rectangleExpand {
// animation
let elapsed: CGFloat = {
let elapsed = (progress - AnimateTiming.rectangleExpand) / AnimateDuration.rectangleExpand
return .minimum(elapsed, 1)
}()
rectangleWidth = CustomEasing.easeOut.circ.progress(elapsed: elapsed) * Const.screenWidth
rectangleHeight = CustomEasing.easeOut.circ.progress(elapsed: elapsed) * Const.screenHeight
} else {
// after animation
rectangleWidth = Const.screenWidth
rectangleHeight = Const.screenHeight
}
}
private func reset() {
startTime = CACurrentMediaTime()
// また最初から開始したいとかなる場合はここで各要素を初期値にする
}
}
ゲームが始まる
最後は起動画面の締めということで、スタートボタン含め終着状態になると。
文字は一文字ずつほよほよ出す感じにして、柔らかく出す感じにしました。
で、このゲームの中心であるトマトを出現させて印象づかせて、スタートボタンを表示する。
最後は比較的落ち着いた感じに仕上げて、見る疲れが出ないようにを意識。
StartView
struct StartView: View {
// title character
@State private var firstCharacterYOffset: CGFloat = -100
@State private var secondCharacterYOffset: CGFloat = -100
@State private var thirdCharacterYOffset: CGFloat = -100
@State private var fourthCharacterYOffset: CGFloat = -100
@State private var fifthCharacterYOffset: CGFloat = -100
// title tomato
@State private var titleTomatoScale: CGFloat = .zero
@State private var titleTomatoOpacity: CGFloat = .zero
// title tomato flash
@State private var titleTomatoFlashHeight: CGFloat = .zero
@State private var titleTomatoFlashOffset: CGFloat = .zero
// title start button
@State private var titleStartButtonScale: CGFloat = 3
@State private var titleStartButtonOpacity: CGFloat = .zero
struct AnimateDuration {
// タイトル文字出現
static let characterAppear = 1.0
// タイトルトマト出現
static let titleTomatoAppear = 0.3
// タイトルトマト閃光出現
static let titleTomatoFlashAppear = 0.4
// タイトルトマト閃光消失
static let titleTomatoFlashDisappear = 0.4
// タイトルボタン出現
static let titleStartButtonAppear = 0.4
}
struct AnimateTiming {
// タイトル文字出現
static let firstCharacterAppear = 5.4
static let secondCharacterAppear = 5.6
static let thirdCharacterAppear = 5.8
static let fourthCharacterAppear = 6.0
static let fifthCharacterAppear = 6.2
// タイトルトマト出現
static let titleTomatoAppear = 7.2
// タイトルトマト閃光出現
static let titleTomatoFlashAppear = 7.1
// タイトルトマト閃光消失
static let titleTomatoFlashDisappear = 7.4
// タイトルボタン出現
static let titleStartButtonAppear = 7.4
}
struct Const {
// タイトル文字位置
static let firstCharacterYOffset: CGFloat = screenHeight / 3 - 30
static let secondCharacterYOffset: CGFloat = screenHeight / 3 - 5
static let thirdCharacterYOffset: CGFloat = screenHeight / 3 - 15
static let fourthCharacterYOffset: CGFloat = screenHeight / 3 - 20
static let fifthCharacterYOffset: CGFloat = screenHeight / 3
// タイトルトマト閃光高さ
static let titleTomatoFlashMaxHeight: CGFloat = 40
// タイトルトマト閃光位置
static let titleTomatoFlashOffset: CGFloat = 60
}
var body: some View {
ZStack {
// 左トマト
// 右トマト
// 円
// 長方形
// タイトル文字
Color.clear
.frame(width: Const.screenWidth, height: Const.screenHeight)
.overlay(alignment: .top) {
HStack(spacing: 40) {
Text("ト")
.font(.system(size: 40, weight: .semibold))
.foregroundStyle(Const.titleColor)
.offset(y: firstCharacterYOffset)
Text("マ")
.font(.system(size: 40, weight: .semibold))
.foregroundStyle(Const.titleColor)
.offset(y: secondCharacterYOffset)
Text("ト")
.font(.system(size: 40, weight: .semibold))
.foregroundStyle(Const.titleColor)
.offset(y: thirdCharacterYOffset)
Text("マ")
.font(.system(size: 40, weight: .semibold))
.foregroundStyle(Const.titleColor)
.offset(y: fourthCharacterYOffset)
Text("ト")
.font(.system(size: 40, weight: .semibold))
.foregroundStyle(Const.titleColor)
.offset(y: fifthCharacterYOffset)
}
}
// タイトルトマト
tomatoImage
.scaleEffect(x: titleTomatoScale, y: titleTomatoScale)
.opacity(titleTomatoOpacity)
// タイトルトマト閃光
ZStack {
Const.tomatoColor
.frame(width: 4, height: titleTomatoFlashHeight)
.clipShape(RoundedRectangle(cornerRadius: 4))
.rotationEffect(.degrees(60))
.offset(x: titleTomatoFlashOffset, y: -titleTomatoFlashOffset / 2)
Const.tomatoColor
.frame(width: 4, height: titleTomatoFlashHeight)
.clipShape(RoundedRectangle(cornerRadius: 4))
.rotationEffect(.degrees(120))
.offset(x: titleTomatoFlashOffset, y: titleTomatoFlashOffset / 2)
Const.tomatoColor
.frame(width: 4, height: titleTomatoFlashHeight)
.clipShape(RoundedRectangle(cornerRadius: 4))
.rotationEffect(.degrees(-60))
.offset(x: -titleTomatoFlashOffset, y: -titleTomatoFlashOffset / 2)
Const.tomatoColor
.frame(width: 4, height: titleTomatoFlashHeight)
.clipShape(RoundedRectangle(cornerRadius: 4))
.rotationEffect(.degrees(-120))
.offset(x: -titleTomatoFlashOffset, y: titleTomatoFlashOffset / 2)
}
// タイトルボタン
Color.clear
.frame(width: Const.screenWidth, height: Const.screenHeight)
.overlay(alignment: .top) {
Button("Start") {
send(.startButtonTapped)
}
.buttonStyle(StartButtonStyle())
.offset(y: Const.screenHeight * 2 / 3)
.scaleEffect(x: titleStartButtonScale)
}
.opacity(titleStartButtonOpacity)
}
}
}
private struct StartButtonStyle: ButtonStyle {
let tomatoColor: Color = .init(red: 0.74, green: 0.18, blue: 0.14)
func makeBody(configuration: Configuration) -> some View {
configuration.label
.foregroundStyle(Color.white)
.font(.system(size: 32, weight: .semibold))
.padding(.horizontal, 56)
.padding(.vertical, 8)
.overlay(
RoundedRectangle(cornerRadius: 4)
.stroke(tomatoColor, lineWidth: 1)
)
.background(tomatoColor)
.clipShape(RoundedRectangle(cornerRadius: 4))
.contentShape(Rectangle())
.opacity(configuration.isPressed ? 0.75 : 1)
}
}
private extension View {
func startButtonStyle() -> some View {
buttonStyle(StartButtonStyle())
}
}
extension StartView {
private func start() {
task?.cancel()
task = Task {
reset()
for await event in await CADisplayLink.events() {
progress = event.timestamp - startTime
// 左トマト
// 右トマト
// 円
// 長方形
// タイトル
animateFirstCharacter()
animateSecondCharacter()
animateThirdCharacter()
animateFourthCharacter()
animateFifthCharacter()
animateTitleTomato()
animateTitleTomatoFlash()
animateTitleStartButton()
}
}
}
// 1文字目
private func animateFirstCharacter() {
if progress < AnimateTiming.firstCharacterAppear {
// before animation
firstCharacterYOffset = -100
} else if progress <= AnimateTiming.firstCharacterAppear + AnimateDuration.characterAppear {
// animation
let elapsed: CGFloat = {
let elapsed = (progress - AnimateTiming.firstCharacterAppear) / AnimateDuration.characterAppear
return .minimum(elapsed, 1)
}()
firstCharacterYOffset = -100 + CustomEasing.easeOut.back.progress(elapsed: elapsed) * (Const.firstCharacterYOffset + 100)
} else {
// after animation
firstCharacterYOffset = Const.firstCharacterYOffset
}
}
// 2文字目
private func animateSecondCharacter() {
if progress < AnimateTiming.secondCharacterAppear {
// before animation
secondCharacterYOffset = -100
} else if progress <= AnimateTiming.secondCharacterAppear + AnimateDuration.characterAppear {
// animation
let elapsed: CGFloat = {
let elapsed = (progress - AnimateTiming.secondCharacterAppear) / AnimateDuration.characterAppear
return .minimum(elapsed, 1)
}()
secondCharacterYOffset = -100 + CustomEasing.easeOut.back.progress(elapsed: elapsed) * (Const.secondCharacterYOffset + 100)
} else {
// after animation
secondCharacterYOffset = Const.secondCharacterYOffset
}
}
// 3文字目
private func animateThirdCharacter() {
if progress < AnimateTiming.thirdCharacterAppear {
// before animation
thirdCharacterYOffset = -100
} else if progress <= AnimateTiming.thirdCharacterAppear + AnimateDuration.characterAppear {
// animation
let elapsed: CGFloat = {
let elapsed = (progress - AnimateTiming.thirdCharacterAppear) / AnimateDuration.characterAppear
return .minimum(elapsed, 1)
}()
thirdCharacterYOffset = -100 + CustomEasing.easeOut.back.progress(elapsed: elapsed) * (Const.thirdCharacterYOffset + 100)
} else {
// after animation
thirdCharacterYOffset = Const.thirdCharacterYOffset
}
}
// 4文字目
private func animateFourthCharacter() {
if progress < AnimateTiming.fourthCharacterAppear {
// before animation
fourthCharacterYOffset = -100
} else if progress <= AnimateTiming.fourthCharacterAppear + AnimateDuration.characterAppear {
// animation
let elapsed: CGFloat = {
let elapsed = (progress - AnimateTiming.fourthCharacterAppear) / AnimateDuration.characterAppear
return .minimum(elapsed, 1)
}()
fourthCharacterYOffset = -100 + CustomEasing.easeOut.back.progress(elapsed: elapsed) * (Const.fourthCharacterYOffset + 100)
} else {
// after animation
fourthCharacterYOffset = Const.fourthCharacterYOffset
}
}
// 5文字目
private func animateFifthCharacter() {
if progress < AnimateTiming.fifthCharacterAppear {
// before animation
fifthCharacterYOffset = -100
} else if progress <= AnimateTiming.fifthCharacterAppear + AnimateDuration.characterAppear {
// animation
let elapsed: CGFloat = {
let elapsed = (progress - AnimateTiming.fifthCharacterAppear) / AnimateDuration.characterAppear
return .minimum(elapsed, 1)
}()
fifthCharacterYOffset = -100 + CustomEasing.easeOut.back.progress(elapsed: elapsed) * (Const.fifthCharacterYOffset + 100)
} else {
// after animation
fifthCharacterYOffset = Const.fifthCharacterYOffset
}
}
// タイトルトマト
private func animateTitleTomato() {
if progress < AnimateTiming.titleTomatoAppear {
// before animation
titleTomatoScale = 0
titleTomatoOpacity = 0
} else if progress <= AnimateTiming.titleTomatoAppear + AnimateDuration.titleTomatoAppear {
// animation
let elapsed: CGFloat = {
let elapsed = (progress - AnimateTiming.titleTomatoAppear) / AnimateDuration.titleTomatoAppear
return .minimum(elapsed, 1)
}()
titleTomatoScale = CustomEasing.easeOut.back.progress(elapsed: elapsed)
titleTomatoOpacity = CustomEasing.easeInOut.circ.progress(elapsed: elapsed)
} else {
// after animation
titleTomatoScale = 1
titleTomatoOpacity = 1
}
}
// タイトルトマト閃光
private func animateTitleTomatoFlash() {
if progress < AnimateTiming.titleTomatoFlashAppear {
// before animation
titleTomatoFlashHeight = 0
titleTomatoFlashOffset = 0
} else if progress <= AnimateTiming.titleTomatoFlashAppear + AnimateDuration.titleTomatoFlashAppear {
// appear animation
let elapsed: CGFloat = {
let elapsed = (progress - AnimateTiming.titleTomatoFlashAppear) / AnimateDuration.titleTomatoFlashAppear
return .minimum(elapsed, 1)
}()
titleTomatoFlashHeight = CustomEasing.easeInOut.circ.progress(elapsed: elapsed) * Const.titleTomatoFlashMaxHeight
titleTomatoFlashOffset = CustomEasing.easeInOut.circ.progress(elapsed: elapsed) * Const.titleTomatoFlashOffset
} else if progress <= AnimateTiming.titleTomatoFlashDisappear + AnimateDuration.titleTomatoFlashDisappear {
// disappear animation
let elapsed: CGFloat = {
let elapsed = (progress - AnimateTiming.titleTomatoFlashDisappear) / AnimateDuration.titleTomatoFlashDisappear
return .minimum(elapsed, 1)
}()
titleTomatoFlashHeight = Const.titleTomatoFlashMaxHeight - CustomEasing.easeInOut.circ.progress(elapsed: elapsed) * Const.titleTomatoFlashMaxHeight
titleTomatoFlashOffset = Const.titleTomatoFlashOffset
} else {
// after animation
titleTomatoFlashHeight = 0
titleTomatoFlashOffset = Const.titleTomatoFlashOffset
}
}
// タイトルボタン
private func animateTitleStartButton() {
if progress < AnimateTiming.titleStartButtonAppear {
// before animation
titleStartButtonScale = 3
titleStartButtonOpacity = 0
} else if progress <= AnimateTiming.titleStartButtonAppear + AnimateDuration.titleStartButtonAppear {
// animation
let elapsed: CGFloat = {
let elapsed = (progress - AnimateTiming.titleStartButtonAppear) / AnimateDuration.titleStartButtonAppear
return .minimum(elapsed, 1)
}()
titleStartButtonScale = 3 - CustomEasing.easeOut.back.progress(elapsed: elapsed) * 2
titleStartButtonOpacity = CustomEasing.easeInOut.circ.progress(elapsed: elapsed)
} else {
// after animation
titleStartButtonScale = 1
titleStartButtonOpacity = 1
}
}
private func reset() {
startTime = CACurrentMediaTime()
// 各値を初期値にする(割愛)
}
}
さいごに
っていうのを踏まえて、もう一回成果物を見ておきましょう。
こういう動きをしている要素たちが組み合わさってこういうアニメーションが仕上がるんだ、と、紐解いていってもらえれば嬉しいなと思います。
と、結局まだまだアプリとしては出来上がっていない状態ですが、肝となる部分を作って、個人的には出来上がったぐらいの気持ちありますね。
そして、画像とSwiftUIのView要素だけで作って、デザインの力ってやっぱすごいなって思いました(できあがりがちゃっちい)
逆に、デザインがなくてもこの辺までならできるってところが、新たにアプリを作ろうとしている人へ勇気を与えたりすると嬉しいな〜〜〜
今回の起動画面を作るにあたって、どういうものを作るかというところを1から考えるわけですが、どういう感じにしようかなーと想像しては形にして調整して、違うな〜と思って崩してまた考え直して、みたいなことを繰り返しているこの工程がなんとも職人感あって、こういう機会がアドベントカレンダーによってできるのは良いなあと改めて思いました。