Apple Vision Pro (visionOS) でTimelineViewを使ってアニメーション  | 技術ブログ | 株式会社OnePlanet 読み込まれました

Apple Vision Pro (visionOS) でTimelineViewを使ってアニメーション

はじめに

TimelineViewを使ったアニメーションについて説明します。

Apple Vision Pro について

Apple Vision Pro について、以下の記事にまとめてます。


Volumeシーンのプロジェクトを作成

Initial SceneがVolumeのvisionOSプロジェクトを作成します。

モデルの準備

USDZのモデルを用意します。(以下のモデルでなくてもUSDZファイルであれば問題ありません。)

https://sketchfab.com/3d-models/the-buddha-statue-in-a-mountain-53d144d6c081439f9aa5dc1b753ce1ce

https://sketchfab.com/3d-models/buddha-5efc02b2247a467cb582e352505d4644

https://sketchfab.com/3d-models/buddha-preaching-478175eaaebf413ebf9631783d229b8b

ContentView.swift

import SwiftUI
import RealityKit

struct ContentView: View {

    @State var buddhaObjects = [
        BuddhaObject(name: "Buddha_Preaching", degrees:25, axis:.x),
        BuddhaObject(name: "The_Buddha_statue_in_a_mountain", degrees:150 ,axis:.y),
        BuddhaObject(name: "Buddha", degrees:300, axis:.z)
    ]
    
    var body: some View {
        TimelineView(.animation) {context in
            HStack {
                ForEach(buddhaObjects, id: \.self) { object in
                    Model3D(named: object.name) { phase in
                        switch phase {
                        case .empty:
                            ProgressView()
                        case let .failure(error):
                            Text(error.localizedDescription)
                        case let .success(model):
                            model
                                .resizable()
                                .scaledToFit()
                        @unknown default:
                            Text("unknown")
                        }
                    }.rotation3DEffect(
                        Rotation3D(
                            angle: Angle2D(degrees: object.degrees * context.date.timeIntervalSinceReferenceDate),
                            axis: object.axis
                        )
                    )
               }
            }
        }
    }
}

struct BuddhaObject: Equatable, Hashable {
    var name: String
    var degrees: Double
    var axis: RotationAxis3D
}

ContentView.swiftのみ修正します。USDZのファイル名、回転軸、回転スピードの情報を持つBunddhaObjectの構造体を用意。BunddhaObjectの配列を作成し、ForEachでBunddhaObjectの配列分、HStack配下にModel3Dを生成。Model3Dにrotation3DEffectとRotation3Dを回転制御を組み込みます。回転のスピードをTimelineViewのcontextとBunddhaObjectのdegressから求めて、回転軸はBunddhaObjectのaxisの情報を設定しています。

実行

Model3Dが生成され、回転のアニメーションが実行されます。

XR エンジニア

徳山 禎男

SIerとして金融や飲料系など様々な大規模プロジェクトに参画後、2020年にOnePlanetに入社。ARグラスを中心とした最先端のAR技術のR&Dや、法人顧客への技術提供を担当。過去にMagic Leap 公式アンバサダーを歴任。

View More

お問い合わせ・ご相談

ARでやってみたいことやお困りごとなど
お気軽にお問い合わせください。

お問い合わせ