【Swift】Map Kit Viewの使い方。ピンの移動をアニメーションさせてリアル感を出す。(Swift 2.1、XCode 7.2)

2020年6月16日

ピンのアニメーション

アニメーションを設定せずに地図にピンを刺したり、ソースコードからピンの座標を変えると指定した座標にいきなり現れる。もう少しピンにリアル感を出したいと思うことがある。そこで本記事ではピンの移動にアニメーションを使う方法を説明する。

以降の手順は「Map Kit Viewの使い方」の続きから行うので、実装を試してみる人は先に読んでおくことをお勧めする。

 

ピンを刺すときのアニメーション

デバイス画面にLong Press Gesture Recognizerを配置する(下図赤矢印)。紫枠のアシスタントエディタボタンを押してViewController.swiftを開く。Ctrlキーを押しながら黄緑枠のジェスチャーリコグナイザーをドラッグ&ドロップでソースコードまで運んで吹き出しの設定画面を表示させる。

Connectionに「Action」、Nameに「pressMap」、Typeに「UILongPressGestureRecognizer」を設定しConnectボタンを押す。これで地図を長押ししたときのイベントをソースコードで受けれるようになった。

Long Press Gesture Recognizerをデバイス画面に配置する

 

ViewController.swiftを以下のコードに変更する。animatesDropプロパティをtrueにすることでピンを刺すときにピンが上から降ってくるようになる。その他の作りは今までと同じ。

 

以下は実際のプレイ動画

 

ちなみに、上記のコードに以下のコードを追加すると、ピンを刺すのに失敗したようなアニメーションになる。

 

以下は実際のプレイ動画

ピンを移動するときのアニメーション

刺したピンをドラッグ&ドロップで別の場所に移動するときは、以下の動画のようにピンを抜いて刺しなおすようなアニメーションになる。これは標準の仕様。

 

一方、ソースコードでピンを移動するにはcoordinateプロパティの値を変更すればいいが、そのまま座標を変更すると移動先の座標に瞬間移動する。

以下のソースコードのようにアニメーションを利用すれば、移動する雰囲気を演出できる。

 

以下は実際のプレイ動画

 

測地線に沿ってピンを動かす

測地線とは、2地点の最短距離を表す線のことをいう。飛行機を使って地球を移動するときは、測地線に従って移動すると最短時間で目的地に到着できるというイメージだ。

例えば、下図のような緯線と経線が垂直に交わる世界地図で、日本とロンドンの最短距離を表す線はどのようになるか。見た目で考えると日本からロンドンに向かって引いた黄色い直線が最短距離になるように感じるが、実際は紫線のような曲線になる。

なぜなら、地球は球体であり、下図は球体を引き延ばして表現された地図のためである。テレビや映画でたまに見る世界地図の上をジャンボジェットの模型が曲線上に移動しているのは、飛行機が地球の上空を飛んでいる雰囲気を演出しているのではなく、測地線に沿って移動させた結果、そのように見えているのだ。

mapview_animation_geoline_exam

 

MKGeodesicPolyline(以下、GEOライン)を使うと、2地点の座標だけで測地線を地図上に描くことができる。では、日本の羽田空港とロンドンのヒースロー空港との間に測地線を引き、測地線の上をピンが移動するアニメーションを作ってみよう。

2点間の直線上を移動させる場合は始点と終点さえ把握できればいいが、曲線上を移動させる場合は曲線に沿って座標がどのように変化するかを知る必要がある。

Geoラインは始点から終点までの座標を順番に保存した凄い要素数の配列を持っているので、その配列の順番にピンの座標を更新していくことでピンを曲線に沿って移動させる。

MKGeodesicPolylineの曲線の座標

 

具体的には、ViewController.swfitを以下のコードに変更する。「ピンを移動するメソッド」を定周期で呼び出し、座標の配列を順番に取り出してピンの座標に設定している。

for文でループさせるとメインスレッドの処理を離さずにマップが固まってしまうので、performSelectorメソッドを用いてメインスレッドの処理を逐次手放しながら定周期でメソッドを呼び出すようにしている。

 

以下は実際のプレイ動画