2023/9/29
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