アニメーションからの寄り道。

「タップ」とか「ホバー」とか、触って動かすアニメーションが何故か思ったように言うことを聞いてくれない状態が続いておりますので、本日は気分転換に「タイマー」を動かしてみることにします。

タイマーというのは、その名の通り、プログラムの中で「正確なタイミングで動き続けるもの」で、そのタイミングで処理を動かすことで、「自動制御」を行うことができるようになる、実に便利な機能なのです。

ニャンコ先生「自動制御なんて、急に未来感が出てきたニャ」

そうなんです。

「タップしたら動く」というのも十分テンションが上がるものなのですが、「自動で動く」には敵いません。放っておいても動き続けてくれますので、画面を誰かに見せた時に「何かスゴイ感」を与えてくれる効果もピカイチです。

では、タイマーを実装していきましょう。

今回は一定時間ごとに三角形ビューにクルンと回ってもらいます。

まずは、今の「タイマーの値」を保有する変数を準備します。次に、三角形ビューの「.onAppear」メソッドの中に、「Timer」を入れ込みます。最後に、「Timer」クラスに含まれる「scheduledTimer」メソッドで、「withTimeInterval」なる「タイマーの間隔」を設定します。

準備はここまで。えいやっと。

後は、「タイマーが動いた時に呼び出される処理」を書く部分に、三角形ビューを回すアニメーションをコピペして、実行。

動きました!結構カンタン。

以前三角形ビューに「連番」を設定していましたので、それをタイマーの値に加えてみると……すべての三角形がバラバラのタイミングで動く「自動制御」っぽい動きになりました。なんだかオシャレな時計のよう。

画面がだいぶ華やかになりましたね。

でも……こうしてみると編集画面が味気なく感じてきました。ので、次は編集画面をもう少しオシャレにしてみましょう。


Apple Developer Documentation
Class > Timer
A timer that fires after a certain time interval has elapsed, sending a specified message to a target object.
外部リンクを開く
Type Method > scheduledTimer
Creates a timer and schedules it on the current run loop in the default mode.
外部リンクを開く