描画とアニメーション

ビューと移行のアニメーション




訳注:以下、必要な場所においては Mac と iPhone 両方のセクションを提供しています。
Mac → セクション 2、iPhone → セクション 102 とします。







プレビュー その 1



    HikeView.swiftt


    1. import SwiftUI
    2. struct HikeView: View {
    3. var hike: Hike
    4. @State private var showDetail = false
    5. var body: some View {
    6. VStack {
    7. HStack {
    8. HikeGraph(data: hike, path: \.elevation)
    9. .frame(width: 50, height: 30)
    10. VStack(alignment: .leading) {
    11. Text(hike.name)
    12. .font(.headline)
    13. Text(hike.distanceText)
    14. }
    15. Spacer()
    16. Button(action: {
    17. self.showDetail.toggle()
    18. }) {
    19. Image(systemName: "chevron.right.circle")
    20. .imageScale(.large)
    21. .rotationEffect(.degrees(showDetail ? 90 : 0))
    22. .padding()
    23. .animation(.easeInOut)
    24. }
    25. }
    26. if showDetail {
    27. HikeDetail(hike: hike)
    28. }
    29. }
    30. }
    31. }



    上記のリストの 26 行目の後に以下のように書き足します。


        HikeView.swiftt


    1. .imageScale(.large)
    2. .rotationEffect(.degrees(showDetail ? 90 : 0))
    3. .scaleEffect(showDetail ? 1.5 : 1)
    4. .padding()
    5. .animation(.easeInOut)



        HikeView.swiftt


    1. .scaleEffect(showDetail ? 1.5 : 1)
    2. .padding()
    3. .animation(.spring())
    4. }
    5. }













        HikeView.swiftt


    1. .imageScale(.large)
    2. .rotationEffect(.degrees(showDetail ? 90 : 0))
    3. .animation(nil)
    4. .scaleEffect(showDetail ? 1.5 : 1)
    5. .padding()



        HikeView.swiftt


    1. .imageScale(.large)
    2. .rotationEffect(.degrees(showDetail ? 90 : 0))
    3. .scaleEffect(showDetail ? 1.5 : 1)
    4. .padding()
    5. }
    6. }



    セクション 1セクション 2セクション 3
    セクション 4セクション 5
    セクション 101セクション 102セクション 103
    セクション 104セクション 105






目次
Xcode の新機能

フレームワーク

  • SwiftUI

  • ビューの作成と結合

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5

    セクション 6


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    セクション 106

    ビルドリストとナビゲーション

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5

    セクション 6

    セクション 7

    セクション 8


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    セクション 106

    セクション 107

    セクション 108

    ユーザー入力の処理

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5

    セクション 6


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    セクション 106

    パスとシェイプの描画

    セクション 1

    セクション 2

    セクション 3

    セクション 4


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    ビューと移行のアニメーション

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    複雑なインターフェースの構成

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    UI コントロールを扱う

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    UIKit とのインターフェース

    セクション 1

    セクション 2

    セクション 3

    セクション 4


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    watchOS アプリの作成

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    macOS アプリの作成

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5

    セクション 6

    セクション 7


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    セクション 106

    セクション 107