id:maiyama4 さんの SwiftUI の Text がなぜか省略されてしまう問題とそのレイアウトプロセスのデバッグ - maiyama4's blog で紹介されている Thinking in SwiftUI を読み終えたので、今まで使ってこなかったAPIを使ってSwiftUI View素振りをする。
前回
開発環境
> xcodebuild -version Xcode 16.1 Build version 16B40
題材
以下の中央の表示要素。
動画より、文字ごとに .bottom から拡大・縮小アニメーションをしているようだ。背景のオレンジグラデーションは部分的な角丸＋内側の白枠線があって、少し手強そう。
作ったもの
スクリーンショット
動画
コード
初めて使ったAPI
animation(_:value:)- https://developer.apple.com/documentation/swiftui/view/animation(_:value:)
- 指定したvalueが変更された時にかけるアニメーションの指定
blendMode(_:)- https://developer.apple.com/documentation/swiftui/view/blendmode(_:)
- ひし形を背景のオレンジグラデーションに馴染ませる用途
今まではアニメーションは withAnimation(::)) でしか適用したことが無かった。blendModeはこのブログでは初めて使った。透明度を下げて使わないと馴染まないのがやや罠。それはそうだが。
文字周りのアニメーションはもう少しシュッと書けそう。
部分的な角丸は clipshape(_:style:) で実装できるが、同じ形の白枠線をoverlayさせるのが難しいと感じたのでShapeを書いた。
