imported>Fire at 13:21, 24 November 2022

2022-11-24T13:21:14Z

New page

起動時のスプラッシュ画面が欲しくて追加してみた。

下記、コードのBounceが、コードが複雑にならず簡単に使えそうなので流用させてもらった。

[https://github.com/chitomo12/SwiftUI-Text-Animation-Library SwiftUI Text Animation Library]

== 説明 ==
スプラッシュ画面で、アニメーションさせた後に、ホーム画面のViewを起動する。

;L.2
:[[SwiftUI/PropertyWrapper/@State|@State]]を使用し、アニメーションの終了判定のためのフラグを監視させる。

;L.4
:isLoading でアニメーション表示判定。

;L.5~8
:背景色を設定するため[[SwiftUI/Layout fundamentals/ZStack|ZStack]]で、背景をZ軸方向に重ね合わせ。背景は、[[SwiftUI/Drawing and graphics/Color|Color]] で色指定を行う。

;L.10~21
:[[SwiftUI/Layout fundamentals/VStack|VStack]]を使用し、ロゴの下にBounce View のアニメーションを配置。0.5秒ずつずらして、３つアニメーションを動かす。.padding使って上方向に30px余白追加。

;L.23~27
:もっとスマートな方法がある気がするが、アニメーションを指定秒表示させるため、View表示開始時に .onAppearで、非同期タスク起動させ指定秒遅らせて、その後isLoadingをtoggleさせることで、アニメーション表示を抜けるようにした。

;L.29~33
:アニメーション処理終了後にホーム画面を呼び出す。EnrionmentObjectでデータ共有するためにUserData()オブジェクトをを初期化して、EnvrironmentObjectでContentViewに渡す。

<syntaxhighlight lang="Swift" line>
struct Bounce: View {
@State private var isLoading = true
var body: some View {
if isLoading {
ZStack {
Color.white
.opacity(0.9)
.ignoresSafeArea()

VStack {
Image("LaunchScreen")
.resizable()
.aspectRatio(contentMode: .fit)
.padding()

BounceAnimationView(text: "仮想通貨", startTime: 0.0, color: Color.black)
BounceAnimationView(text: "貴金属", startTime: 0.5, color: Color.black)
.padding(.top, 30)
BounceAnimationView(text: "外貨資産", startTime: 1.0, color: Color.black)
.padding(.top, 30)
}
}
.onAppear {
DispatchQueue.main.asyncAfter(deadline: .now() + 2.2) {
isLoading = false
}
}

} else {
ContentView()
.environmentObject(UserData())

}
}
}
</syntaxhighlight>

[[Category:AssetCollector|Bounce]]

AC/Bounce - Revision history

imported>Fire at 13:21, 24 November 2022