![見出し画像](https://assets.st-note.com/production/uploads/images/55143774/rectangle_large_type_2_a1fdc1a673194e6d2147eb4cf459340b.png?width=1200)
SwiftUIでいこう! - アニメーション
画面中で動きのあるアニメーションを作ってみます。参考サイトです。
【初心者向けSwiftUI】アニメーションの基本を学ぶ!!この動画で基本は十分
参考サイトの動画では円の上を車が走るという設定でアニメーションを作ってあります。始点と終点を決めることが重要ということです。ざっくりとした構造ですが、
構造体を重ねて使える"ZStack"を使いCircle()を2つ作ります。その1つは道路に見立て、もう1つは道路の真ん中の線を表現します。まず、1つ目のCircle()ですが、円周を線として太さと色を決めます。
.stroke(style: StrokeStyle(lineWidth: 20))
次に全体の大きさを"frame"で指定します。ここで使っている変数"sw"ですが先に
var sw = UIScreen.main.bounds.width
と画面の大きさを取得しておいたものです。
.frame(width: sw*0.8, height: sw*0.8)
.foregroundColor(.gray)
そしていろをグレイとしています。
この上にさらにもう1つ円、Circle()を重ねていきます。
.stroke(style: StrokeStyle(lineWidth: 4,dash:[20,20]))
.frame(width: sw*0.8, height: sw*0.8)
.foregroundColor(.white)
1つ目との違いは"dash:[20,20]"と線の種類を点線にして道路の雰囲気を出しています。
この上の自動車を乗せてぐるぐる回るようにします。その画像の表示としては
Image("car")
として画像の名前"car"というファイルを表示するようにということです。事前にXcodeの"Assets.xcassets"に画像を入れておく必要があります。今回はcar.pngという画像を作ってこの指定フォルダにドラックして入れます。
画像の整形ですが
.resizable() ・・・・ リサイズすることができるようになる。
.frame(width: 30, height: 30) ・・・・大きさを指定
.offset(x:-sw*0.4,y:0) ・・・・表示場所
.rotationEffect(.degrees(drive ? 360:0)) ・・・・円周に適応
.animation(Animation.linear(duration: 4).repeatForever(autoreverses: false)) ・・・・アニメーションを等速でスピード"4"ずっと繰り返するが反転なし
.onAppear{
self.drive.toggle() ・・・画面に現れたら変数"drive"をfalseをtrueに反転}
という命令として動かします。
アニメーションとして大事なところは以下。
.animation(Animation.linear(duration: 4).repeatForever(autoreverses: false))
.onAppear{
self.drive.toggle() }
アニメーションの設定して真偽値を反転することでスタートさせます。
構造と円を描いて"car"が動く軌道を描くアニメーション設定のところを全体として記録しておきます。
ZStack{
Circle()
Circle()
Image("car")
.rotationEffect(.degrees(drive ? 360:0))
.animation(Animation.linear(duration: 4).repeatForever(autoreverses: false))
.onAppear{
self.drive.toggle()
}
}
画像Image()が描画されて
.onAppear{
self.drive.toggle()
が実行されることで変数driveがTrueとなりアニメーションがスタートします。TrueとFalseでアニメーションをコントロールします。