はじめに
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:を利用する方法を紹介しました。
ShinobiTweener
特徴
UIViewやCALayerを実際にアニメーションさせる部分はライブラリに含んでおらず、
このためUIKitにもQuartzCoreにも依存しておらず独立性は高いのですが、
使い方
ソースコードを以下のURLよりダウンロード
ShinobiTweenerフォルダごとプロジェクトに追加
ShinobiTweener.
h をインポート - #import "ShinobiTweener.
h"
- #import "ShinobiTweener.
終了フラグと、
トゥイーンさせる値を入れるためのメンバ変数を定義 @interface ViewController () { BOOL isShinobiTweenFinished; CGFloat shinobiValue; } @endアニメーション開始処理を実装
// 終了フラグを初期化 isShinobiTweenFinished = NO; // ループ開始 [self tweenLoop]; // トゥイーン処理開始 [[ShinobiTweener sharedTweener] addTweenToFloat:&shinobiValue finish:kToCenterPos.x timeDuration:1. 0 transition:TWEENER_ TRANSITION_ BOUNCE_ EASE_ OUT onComplete:@selector(tweenFinish) forObject:self]; 毎フレーム実行する処理を実装
- (void)tweenUpdate { if(!isShinobiTweenFinished) { [[ShinobiTweener sharedTweener] update]; [self.animateView setCenter:CGPointMake(shinobiValue, kToCenterPos. y)]; [self tweenLoop]; } } - (void)tweenLoop { [NSTimer scheduledTimerWithTimeInterval:(1. 0f / 30. 0f) target:self selector:@selector(tweenUpdate) userInfo:nil repeats:NO]; } アニメーション終了処理を実装
終了フラグにYESをセットします。
- (void)tweenFinish { isShinobiTweenFinished = YES; }
TweenC
特徴
メソッド1つでアニメーションを実行でき、
ただ、
また静的アナライザを走らせるとメモリリークの警告がたくさん出るとか、
ただあえてここで紹介したいと思った理由は、
この方法は、
具体的には、
-(void)calculatePositionForObject:(NSObject *)tweenObject start:(double)startPos change:(double)changePos duration:(double)duration;
-(void)calculateDegreesForObject:(NSObject *)tweenObject start:(double)startPos change:(double)changePos duration:(double)duration;
-(void)calculateScaleForObject:(NSObject *)tweenObject start:(double)startPos change:(double)changePos duration:(double)duration;
-(void)calculateOpacityForObject:(NSObject *)tweenObject start:(double)startPos change:(double)changePos duration:(double)duration; これらの中で、
- ※ ライセンスはApache License 2.
0です。
使い方
ソースコードを以下のURLよりダウンロード
下記の6つのファイルをプロジェクトに追加
- TweenC.
h, TweenC. m, TweenConstants. h, TweenConstants. m, TweenerAnimation. h, TweenerAnimation. m
- TweenC.
TweenC.
h をインポート - #import "TweenC.
h"
- #import "TweenC.
アニメーション開始処理を実装
[TweenC animateView:self.animateView withAnimation:kTweenEaseOutBounce andDuration:1. 0 toPoint:kToOriginPos delegate:self];
まとめ
さまざまなタイプのイージングカーブでのアニメーションを実現する、