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でアニメーションをコントロールします。