2015年8月1日土曜日

swift MapView PolyLine上を移動するアニメーション

MapViewに描画したPolyLine上を移動するアニメーションを作りたくて試行錯誤。
アニメーションを使うというより、座標がわかっているので、ピンを座標に沿って移動していけば良いという事に辿り着く。
ずっとアニメーションで検索してたから結論になかなか辿り着けなかった。。。

stackoverflowにヒントありました。
Animate a visual element along an arc in MapKit

山手線の駅の緯度経度を使用してピンを一周させてみましょう。
山手線って意外と縦長。。。

import UIKit
import MapKit
class ViewController: UIViewController, MKMapViewDelegate {
var latitudeArray: [CLLocationDegrees] = [35.681382,35.675069,35.665498,35.655646,35.645736,35.630152,35.6197,35.626446,35.633998,35.64669,35.658517,35.670168,35.683061,35.690921,35.701306,35.712285,35.721204,35.728926,35.731401,35.733492,35.736489,35.738062,35.732135,35.727772,35.720495,35.713768,35.707438,35.698683,35.69169,35.681382]
var longitudeArray: [CLLocationDegrees] = [139.766084,139.763328,139.75964,139.756749,139.747575,139.74044,139.728553,139.723444,139.715828,139.710106,139.701334,139.702687,139.702042,139.700258,139.700044,139.703782,139.706587,139.71038,139.728662,139.739345,139.746875,139.76086,139.766787,139.770987,139.778837,139.777254,139.774632,139.774219,139.770883,139.766084]
var myMapView: MKMapView = MKMapView()
var timer = NSTimer()
var count = 0
override func viewDidLoad() {
super.viewDidLoad()
// 経度緯度を設定.
let myLan: CLLocationDegrees = 35.680129
let myLon: CLLocationDegrees = 139.738734
// 地図の中心の座標.
var center: CLLocationCoordinate2D = CLLocationCoordinate2DMake(myLan, myLon)
// mapViewを生成.
myMapView.frame = self.view.frame
myMapView.center = self.view.center
myMapView.centerCoordinate = center
myMapView.delegate = self
// 縮尺を指定.
let mySpan: MKCoordinateSpan = MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1)
let myRegion: MKCoordinateRegion = MKCoordinateRegion(center: center, span: mySpan)
// regionをmapViewに追加.
myMapView.region = myRegion
// viewにmapViewを追加.
self.view.addSubview(myMapView)
CLLocationArray()
timer = NSTimer.scheduledTimerWithTimeInterval(1, target: self, selector: Selector("addTrain"), userInfo: nil, repeats: true)
}
func CLLocationArray() {
var coordinatesYamanote:[CLLocationCoordinate2D] = []
for var index = 0; index < latitudeArray.count; ++index {
var coordinate = CLLocationCoordinate2D(latitude: latitudeArray[index], longitude: longitudeArray[index])
coordinatesYamanote.append(coordinate)
}
// polyline作成.
let YamanotePolyLine: MKPolyline = MKPolyline(coordinates: &coordinatesYamanote, count: coordinatesYamanote.count)
// mapViewに線を描画.
myMapView.addOverlay(YamanotePolyLine)
}
func mapView(mapView: MKMapView!, rendererForOverlay overlay: MKOverlay!) -> MKOverlayRenderer! {
// rendererを生成.
let myPolyLineRendere: MKPolylineRenderer = MKPolylineRenderer(overlay: overlay)
// 線の太さを指定.
myPolyLineRendere.lineWidth = 5
// 線の色を指定.
myPolyLineRendere.strokeColor = UIColor(red: (155/255.0), green: (203/255.0), blue: (64/255.0), alpha: 1.0)
return myPolyLineRendere
}
func addTrain() {
// ピンを生成.
var myPin: MKPointAnnotation = MKPointAnnotation()
myMapView.removeAnnotations(myMapView.annotations)
// 中心点.
let center: CLLocationCoordinate2D = CLLocationCoordinate2DMake(latitudeArray[count], longitudeArray[count])
// 座標を設定.
myPin.coordinate = center
// MapViewにピンを追加.
myMapView.addAnnotation(myPin)
count++
if count == latitudeArray.count {
timer.invalidate()
}
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
view raw gistfile1.swift hosted with ❤ by GitHub


GitHubにソースあります。

緯度経度のポイントを増やし、NSTimerのタイミングを変更してあげれば、アニメーションしているように見えてきます。

Related Posts:

  • 【ECCUBE】バナーやプラグインのクリック数を調べるバナーを貼ったけど、どれ位クリックされてるの?? 新着商品やニュース、最近売れた商品やランキング等、販促系プラグインを色々入れてみたけど、どのプラグインが効果あるの?? アナリティクスで解析しても、どのキーワードで検索されたか、どこから来たか、どの商品が人気かはわかるけど、自分たちの作ったバナーや… Read More
  • ECCUBE メンバーによって管理画面のアクセスを制限する。EC-CUBE 2.12にてログインするメンバーによって管理画面のアクセスを制限したいという事になった。 例)Aさんに商品管理だけアクセス出来るようにしたい。 早速ググってみると、システム設定>マスターデータ管理>mtb_authorityでメンバーを追加し、admin_contents.cssに… Read More
  • swift iPhone画面上に映っている地図の距離をメートルで取得する。iPhoneで地図を使ったアプリを開発する際、画面上にうつってる範囲の距離を取得したい時があります。 画面上で見えてる範囲だけ距離を取得しAPIに投げたい。のが動機です。 まずはiPhone上に地図を表示しなくては始まりませんね。 xcodeで新規プロジェクト、シングルページで新規アプリを作ります… Read More
  • 【EC-CUBE】最近購入された商品ブロック追加プラグインを高速化EC-CUBEのDBログファイルを見てみる。 ん、遅い。何かが遅い。 このSQLが遅い。 SQL: SELECT dtb_order_detail.product_id, dtb_order_detail.product_name, dtb_order.create_date, dtb_order.… Read More
  • EC CUBE3のインストール(β版)β版のECCUBE3を macのローカル環境(MAMP Mysql)へインストールしてみます。 コマンドラインを立ち上げ 下記コマンドを打ち込んでgithubからeccbe3をクローンする。 今回はローカルで動かすので、MAMPのhtdocsフォルダにダウンロード。 git clone http:/… Read More

0 コメント:

コメントを投稿