【SwiftUI】TikTok風アニメーションの作り方

はじめに

SwiftUIでTikTok風のアニメーションを作る方法を紹介します。

デモ

コード全体

import SwiftUI

struct ContentView: View {
    // これがtrueのときにTikTok風のエフェクトをかける
    @State private var glitching = false
    
    // 0.1秒ごとにtrue/falseを切り替えるためのタイマー
    private let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()
    
    private let text = "TikTok"
    
    // テキストの位置をランダムにずらす範囲
    private let offsetRange = -8...8
    
    var body: some View {

        // ZStackで3つのテキストを重ねる
        ZStack {
            Text(text)
                .foregroundStyle(.pink)
                .offset(x: glitching ? CGFloat(Int.random(in: offsetRange)) : 0, y: glitching ? CGFloat(Int.random(in: offsetRange)) : 0)
            
            Text(text)
                .foregroundStyle(.cyan)
                .offset(x: glitching ? CGFloat(Int.random(in: offsetRange)) : 0, y: glitching ? CGFloat(Int.random(in: offsetRange)) : 0)
            
            Text(text)
        }
        .font(.system(size: 128).bold())
        .preferredColorScheme(.dark) // ダークモードにする
        .onReceive(timer) { _ in

            // 0.1秒ごとにtrue/falseを切り替える
            DispatchQueue.main.asyncAfter(deadline: .now() + Double.random(in: 0...0.1)) {
                self.glitching.toggle()
            }
        }
        .onDisappear {

            // 画面が消えたらタイマーをキャンセルする
            timer.upstream.connect().cancel()
        }
    }
}

ポイント

• 色の異なる3つのテキストを重ねる
• 0.1秒ごとにテキストの位置をランダムにずらす

おわりに

TikTok風アニメーションの作り方を紹介しました。ローディング画面などで使えそうですね。この記事が参考になったという方は、いいね❤️とフォローしていただけると嬉しいです☺️