SwiftUI 入門やるよ!チュートリアルしてみる!v5 アニメーション、ビューと遷移

SwiftUI
SwiftUI 入門やるよ!チュートリアルしてみる!v4 線と図形 描画
線と図形描画 - Drawing paths and shapessection 1 バッヂビューで描画データ生成 Create drawing data for a badge viewFile > N...

viewのアニメーションと遷移

Animating views and transitions
https://developer.apple.com/tutorials/swiftui/animating-views-and-transitions

section 1 散歩データの追加 Add hiking data to the app

hikeData.jsonをResourcesフォルダーに追加
Copy items if needed でコピーする

Model以下に Hike.swift を追加

ModelDataからHIkeを読み込む

@Observable
class ModelData {
    var landmarks: [Landmark] = load("landmarkData.json")
    var hikes:[Hike] = load("hikeData.json")
}

ダウンロードしたResources の HikesフォルダごとLandmarksに追加

Hikesフォルダーを Create groups , Copy items if needed でコピー

Hike View を見ると出来ていると。。。そのままこぴーしただけですが^^;

Section 2 viewにアニメーション追加

Add animations to individual views

HikeViewに詳細へ遷移するときのアニメーションを追加

..rotationEffect(.degrees(showDetail ? 90 : 0))
                        .scaleEffect(showDetail ? 1.5: 1)
                        .padding()
                        .animation(.easeInOut, value: showDetail)
animation(.spring(), value: showDetail)

easeInOutをsprint()に変更すると?

rotationEffectの下に .animation(nil, value:showDetail) を入れるとrotationはアニメーションにならない

次のセクションの前に、animationを削除

Section 3 状態変化に合わせたアニメ

Animate the effects of state changes

HikeViewにshowDetailを切り替えるボタンを追加

お気軽にコメントください!

スパム対応のためコメント認証に数日かかることがありますが、お気軽にコメントいただけると嬉しいです^^

コメント

タイトルとURLをコピーしました