質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Objective-C

Objective-Cはオブジェクト指向型のプログラミング言語のひとつです。C言語をベースにSmalltalkが取り入れられています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

Q&A

解決済

1回答

3072閲覧

ベジェ曲線で作られた軌跡上をUIImageViewが移動

taratail

総合スコア76

Objective-C

Objective-Cはオブジェクト指向型のプログラミング言語のひとつです。C言語をベースにSmalltalkが取り入れられています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

0グッド

1クリップ

投稿2015/06/01 10:06

編集2015/06/03 08:02

ベジェ曲線状をUIImageViewが移動するプログラムを書きたいです。

例えば以下のサイトで、UIBezierPathで作られた放物線一つのパスをanimation.duration = 1.0の時間で移動します。
http://qiita.com/shu223/items/c15547667f8318d4acfe

このような一つのパス上を指定した時間で動ききるものでなく、途中まで動いて適当な位置で静止、再度動く、静止、という風にしてUIImageViewを動かせないかと考えています。

以下はPlague.incというゲームのプレイ動画ですが、この動画の船の動きを実現したいです。止まったり早く動いたりします。
https://www.youtube.com/watch?v=7Z9Myjx6xZg
このような処理をSpriteKitなどのフレームワークを使わずに実現したいです。ご教示いただけませんでしょうか。

追記: 06/03
上のQiitaのリンクを参考に、手探りで書いております。以下のコードでタイマーによって1秒ごとにCAAnimationの動作・停止を繰り返す処理を書いてみました。一応、動作・停止は再現出来たものの、速度を変更しようにもlayer.speedを0.0または1.0以外の値にすると、手前のシミュレータで思うような動作をしません。引き続きより良い解決策をお教え願いたいです。

lang

1import UIKit 2import QuartzCore 3 4class ViewController: UIViewController { 5 6 var imageView: UIImageView! 7 8 override func viewDidLoad() { 9 super.viewDidLoad() 10 11 var animation = CAKeyframeAnimation(keyPath: "position") 12 animation.fillMode = kCAFillModeForwards 13 animation.removedOnCompletion = false 14 animation.speed = 0.05 15 16 var jumpHeight = CGFloat(80.0) 17 var curvedPath = CGPathCreateMutable() 18 19 let kStartPos = CGPoint(x: view.bounds.width/3, y: view.bounds.height/2) 20 let kEndPos = CGPoint(x: view.bounds.width*5/6, y: view.bounds.height*2/3) 21 22 CGPathMoveToPoint(curvedPath, nil, kStartPos.x, kStartPos.y) 23 CGPathAddCurveToPoint(curvedPath, nil, kStartPos.x + jumpHeight/2, kStartPos.y - jumpHeight, 24 kEndPos.x - jumpHeight/2, kStartPos.y - jumpHeight, 25 kEndPos.x, kEndPos.y); 26 27 animation.path = curvedPath 28 animation.removedOnCompletion = false 29 animation.fillMode = kCAFillModeForwards 30 31 imageView = UIImageView(frame: CGRectMake(kStartPos.x-25, kStartPos.y-40, 50, 80)) 32 imageView.image = UIImage(named: "a") 33 view.addSubview(imageView) 34 imageView.layer.addAnimation(animation, forKey: nil) 35 36 NSTimer.scheduledTimerWithTimeInterval(1.0, target: self, selector: "onUpdate:", userInfo: nil, repeats: true) 37 38 // アニメーション中の presentationLayer().position を layer.position として更新するためのタイマー 39 // これは無くても動きます。 40 NSTimer.scheduledTimerWithTimeInterval(1.0/30.0, target: self, selector: "onPositionUpdate:", userInfo: nil, repeats: true) 41 } 42 43 var flag = false // 1秒ごとに動作・停止を切り替えるためのフラグ 44 45 func onUpdate(timer : NSTimer) { 46 47 if !flag { 48 let pausedTime: CFTimeInterval = imageView.layer.convertTime(CACurrentMediaTime(), fromLayer: nil) 49 imageView.layer.speed = 0.0 50 imageView.layer.beginTime = 0.0 51 imageView.layer.timeOffset = pausedTime 52 } 53 else { 54 let pausedTime: CFTimeInterval = imageView.layer.timeOffset 55 imageView.layer.speed = 1.0 56 imageView.layer.timeOffset = 0.0 57 imageView.layer.beginTime = 0.0 58 let timeSincePause: CFTimeInterval = imageView.layer.convertTime(CACurrentMediaTime(), fromLayer: nil) - pausedTime 59 imageView.layer.beginTime = timeSincePause 60 } 61 flag = !flag 62 } 63 64 func onPositionUpdate(timer : NSTimer) { 65 if !flag { 66 imageView.layer.position = imageView.layer.presentationLayer().position 67 } 68 } 69}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

手動でベジェ曲線を計算してください。計算式はググレば出てきます。
または、オフスクリーンに実際にベジェ曲線を描画し、その画像を解析してください。

CAAnimationに設定されるベジェ曲線は、あくまでアニメーション・カーブのためのもので時間軸に沿って値が変化します。なので、二次元平面上に曲線を描くような用途では使えません。

投稿2015/06/12 16:45

Stripe

総合スコア2183

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

taratail

2015/06/13 10:38

ご回答有難うございます。コードに書かれていませんが、SVGに描かれたベジェ曲線をPocketSVG等でUIBezierPathに変換させています。速度変更をしたいような場合は、新しく別に曲線を描いておくか、プログラム実行中に計算するしかないということですね。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問