はじめに
iOS SDK登場から早4年近くが経ち,
本連載ではそんなオープンソースソフトウェアの中で,
トゥイーンライブラリを使用するメリット
UIViewのアニメーションで指定できるイージングの種類は,
- UIViewAnimationOptionCurveEaseInOut
- UIViewAnimationOptionCurveEaseIn
- UIViewAnimationOptionCurveEaseOut
- UIViewAnimationOptionCurveLinear
の4種類しかなく,
- 自分でそのイージングカーブの数式を定義し,
その数式に従ってアニメーションさせたい値を時間経過に応じて変化させる処理を書く - CAAnimationクラスのtimingFunctionプロパティにカスタムのベジェ曲線を指定する
- パラメータを変えたアニメーションを連続で実行して,
それっぽい動きに仕立てる
といった手段をとる必要があり,
トゥイーンライブラリはそういった処理をラップしてくれているもので,
今回はオープンソースのトゥイーンライブラリを3種紹介し,
なお,
サンプルプロジェクトを以下のURLよりダウンロードしていただけます。動作やコードの確認にご利用ください。
PRTween
特徴
UIView や CALayer のプロパティを変化させるアニメーションだけでなく,
また CGFloat 型の値の変化だけではなく,
- ※ なお,
ライセンスはBSDとなっています。
使い方
ソースコードを以下のURLよりダウンロード
libフォルダ
(4つのファイルが入っています) ごとプロジェクトに追加 PRTween.
h をインポート - #import "PRTween.
h"
- #import "PRTween.
アニメーション開始処理を実装
PRTweenPeriod インスタンスを生成します。
引数にはトゥイーンさせる値の最初の値,
最後の値, トゥイーンにかける時間を指定します。 PRTweenPeriod *period = [PRTweenPeriod periodWithStartValue:kFromCenterPos.
x endValue:kToCenterPos. x duration:1. 0]; PRTweenのaddTweenPeriod:target:selector:timingFunction: メソッドをコールします。
selector には毎フレーム実行する処理を実装したメソッドを指定し,
timingFunction に所望のイージングタイプを指定します。 self.
activeTweenOperation = [[PRTween sharedInstance] addTweenPeriod:period target:self selector:@selector(update:) timingFunction:&PRTweenTimingFunctionBounceOut]; 毎フレーム実行する処理を実装
period の tweenedValue プロパティには,
イージングタイプと経過時間に従って出力された値が入っています。下記サンプルでは, その値に従って animateView の中心点の x座標を変化させています。 - (void)update:(PRTweenPeriod*)period { [self.
animateView setCenter:CGPointMake(period. tweenedValue, kToCenterPos. y)]; }
補足
PRTweenには
+ (PRTweenOperation *)tween:(id)object property:(NSString*)property from:(CGFloat)from to:(CGFloat)to duration:(CGFloat)duration timingFunction:(PRTweenTimingFunction)timingFunction target:(NSObject*)target completeSelector:(SEL)selector;
+ (PRTweenOperation *)tween:(id)object property:(NSString*)property from:(CGFloat)from to:(CGFloat)to duration:(CGFloat)duration;
といった,
たとえば,
PRTweenTimingFunctionCADefault
PRTweenTimingFunctionCAEaseIn
PRTweenTimingFunctionCAEaseOut
PRTweenTimingFunctionCAEaseInOut
PRTweenTimingFunctionCALinear
PRTweenTimingFunctionUIViewEaseIn
PRTweenTimingFunctionUIViewEaseOut
PRTweenTimingFunctionUIViewEaseInOut
PRTweenTimingFunctionUIViewLinear
NULL
これら以外の値を指定した場合,
また,
というわけでやや手順は増えるものの応用のきくaddTweenPeriod:target:selector:timingFunction:を利用する方法を紹介しました。