【SwiftUI】visionOS風の立体的なアイコンをiOSで表示する方法

はじめに

WWDC2023でvisionOSが発表され、立体的なアプリアイコンが話題になりました。
この記事では、iOSでvisionOSのアプリアイコン再現に挑戦します！

作るもの

デバイスを傾けると、アイコンが立体的に動くアプリを作ります。
背景は、visionOSのように現実世界を映します。

デモ

準備

Swift Package Managerで、「ParallaxSwiftUI」と「Camera-SwiftUI」をインストールします。

カメラを作る

まず、背景に現実世界を映すためにカメラを用意します。
Camera-SwiftUIを使うと、簡単にカメラを作れます。

import SwiftUI
import Combine
import Camera_SwiftUI
import AVFoundation

struct CameraView: View {
    private let service = CameraService()
    
    var session: AVCaptureSession
    
    init() {
        self.session = service.session
    }
    
    var body: some View {
        CameraPreview(session: session)
            .onAppear {
                configure()
            }
    }
    
    func configure() {
        service.checkForPermissions()
        service.configure()
    }
}

立体的なアイコンを作る

次に、立体的なアイコンを作ります。

struct ContentView: View {
    var body: some View {
        ZStack {
            // カメラを画面いっぱいに表示する
            let width = UIScreen.main.bounds.size.width
            let height = UIScreen.main.bounds.size.height
            CameraView()
                .frame(width: width * (height / (width * 3 / 4)))
                .ignoresSafeArea()
            
            LinearGradient(
                colors: [
                    Color(red: 0.07, green: 0.72, blue: 0.98),
                    Color(red: 0.1, green: 0.48, blue: 0.96),
                ],
                startPoint: .top,
                endPoint: .bottom
            )
            .clipShape(Circle())
            .frame(width: 200, height: 200)
            .parallax(amount: 100)
            
            Image("お好きな画像")
                .resizable()
                .scaledToFit()
                .frame(width: 200, height: 200)
                .shadow(color: .black.opacity(0.2), radius: 10)
                .parallax(amount: 20)
        }
    }
}

Viewにparallaxと追加すると、デバイスを傾けたときにアイコンが動きます。引数のamountを変更すると、動く量を調整できます。

また、

.parallax(minHorizontal: -20, maxHorizontal: 20, minVertical: -5, maxVertical: 5)

と書くと、横方向に-20〜20、縦方向に-5〜5動きます。

.parallax(direction: .vertical)

のように書いて、動きの方向を指定することもできます。

おわりに

これで、visionOS風のアイコンを作ることができました！
visionOSはUIが洗練されていて、本当にかっこいいですよね。早く実物を試したいです。