2021年11月の記事一覧
SwiftUIでいこう！- スタンフォード大学Lecture 8: Animation Demonstration
カードを並べて2枚ずつ開けて行ってマッチすればカードを消していくという操作ができてきました。次にアニメーション をつけて見栄えを良くしていきます。
最終的にはカードの配置をする画面、カードを配るボタン、シャッフルボタン、リスタートのボタンを以下のように配置していきその内容を書いていきます。
gameBodyにはランダムに並んだカード。
deckBodyにはカードを配るように一枚が配置してあり
SwiftUIでいこう。 - モディファイア
画面に表示する部分で大きさ、動きなどカスタマイズする場合に使われるのがモディファイアです。例えばText()のモディファイアは以下のように"."をつけて書いたものとなります(これは文字を大きくします)。
.font(.largeTitle)
このモディファイアを組み合わせたり、さらにカスタマイズをする時に使うのが"ViewModifier"ということになります。作ってみましょう。
プロトコル
SwiftUIでいこう！- スタンフォード大学Lecture 7: ViewModifier Animation - 2
カードの中に一部欠けた円形をパスを使って書きました。次にカードの中に表示されている絵文字を動かします。アニメーション については以下詳しく解説されているサイトがあります。
この講義ではText()にmodifireをつけて動かします。
基本的な動きは回転です。これは
.rotationEffect(Angle.degrees(card.isMatched ? 360 : 0))
とすれ
SwiftUIでいこう！- スタンフォード大学Lecture 7: ViewModifier Animation - 1
Modifierとは、修飾するためのメソッドです。例えばText()のModifierをつけてみると、
Text(text) .font(.caption) .foregroundColor(.white) .padding(5) .background(.black)
.font(.caption)
SwiftUIでいこう！- スタンフォード大学Lecture 6: Shape
カードのデザインを変えていきます。まずどんなものにするかというと
絵文字のバックに欠けた円形を入れていきます。
簡単に円形をカードの中央に配置するにはカードの形などを決めている
struct CardView:View {} の中に
if card.isFaceUp{
省略
Circle().padding(5).opacity(0.5)
省略
}
追加してやればある程度の
Swiftでいこう！- ちょっとTips。 3 - @ViewBuilder
@ViewBuilderを調べてみます。まず公式ドキュメント。
詳しく説明されているサイトです。
SwiftUIのVStackとHStackはクロージャーの中にViewコンポーネントを宣言的に実装できる。独自のビューコンテナを作ることができます。
その仕組みのキーとなるのが@ViewBuilderということです。
イニシャライザで@ViewBuilderのキーワードを付けて宣言することで使
SwiftUIでいこう！- スタンフォード大学Lecture 6: Protocols Shapes
この講座ではまず、
AspectVGrid()
を使えるようにしていきます。最終的には以下となります。
struct ContentView: View { @ObservedObject var game:EmojiGame var body: some View { AspectVGrid(items:game.cards,aspectRatio:2/