UIView のアニメーション方法と、座標値の所得

あむちょです。

アプリを作る時によく使うので忘れないようにメモ。

PR アプリ作ってます

アプリを作る上で必須のアニメーション。

Androidでよくやる方法は、SurfaceViewを使って、フレーム毎に座標値を変化さして動かしてます。

iPhoneでも同じようにできるけど、元々便利なアニメーション機能があるのでそちを使います。

今回使うのはUIViewによるアニメーション

基本的な使い方は、beginAnimationsとcommitAnimationsでアニメーション後の座標値をはさむ。

&lt;br /&gt;<br />
[UIView beginAnimations:nil context:NULL];<br />
[UIView setAnimationDuration:1.0/*アニメーションにかける時間*/];<br />
[UIView setAnimationDelay:0.0/*アニメーション開始までの時間*/];    //アニメーション後の座標値など<br />
[UIView commitAnimations];<br />

例えば、ImageViewを、右に50ポイント移動しようと思ったら。

<br />
[UIView beginAnimations:nil context:NULL];<br />
[UIView setAnimationDuration:1.0/*アニメーションにかける時間*/];<br />
[UIView setAnimationDelay:0.0/*アニメーション開始までの時間*/];<br />
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];     //加速度<br />
[UIView setAnimationRepeatCount:1];  //回数<br />
//アニメーション後の座標値など<br />
ImageView.center = CGPointMake(50+ImageView.frame.orizin.x+ImageView.frame.size.width/2   ,ImageView.frame.orizin.y+ImageView.frame.size.height/2);<br />
[UIView commitAnimations];<br />

これで1秒かけて右に50ポイント、加速しながら移動し減速してとまります。

加減速はsetAnimationCurveで設定でき、引数は

UIViewAnimationCurveLinear         :等速
UIViewAnimationCurveEaseOut      :減速
UIViewAnimationCurveEaseIn         :加速
UIViewAnimationCurveEaseInOut  :加速して減速

また、アニメーション完了を知りたい時は、以下を追加。

<br />
[UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];<br />

これで以下のメソッドが呼ばれます。

<br />
&#8211; (void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {}

もしアニメーションをキャンセルしたい時は、

<br />
[ImageView.layer removeAllAnimations];<br />

でアニメーションは終了しますが、座標値などはアニメーション完了後の位置になります。またアニメーション完了コールバックも呼ばれます。

なので、アニメーション中の座標にとどめたい時は、キャンセル前に座標値を所得する必要があります。

<br />
CALayer *mLayer = [ImageView.layer presentationLayer];<br />
//アニメーションキャンセル<br />
[ImageView.layer removeAllAnimations];<br />
//座標値を更新<br />
ImageView.center = CGPoint(mLayer.position.x+ImageView.frame.size.width/2   ,mLayer.position.y+ImageView.frame.size.height/2);<br />

となります。

今回、ImageViewを例にあげたけど、UIViewを継承しているViewなら同じ方法でできます。座標値の他にも.alpha, .transformなどが変化させれます。

慣れれば、簡単にアニメーションさせれるので、ぜひともマスターしておきたいところです。

おすすめの書籍です。
[amazonjs asin=”4883379000″ locale=”JP” title=”iPhone/iPad/iPod touchプログラミングバ―iOS7/Xcode5対応 (smart phone programming bible)”]
[ad] [ad]

コメント