はじめに

iOS SDK登場から早4年近くが経ち，使い回しの効くUIコンポーネントや，煩雑な手順を楽にするスクリプト，自作するには難易度の高い技術をライブラリ化したものなどなど，今では多くの便利なオープンソースソフトウェアが公開されています。

本連載ではそんなオープンソースソフトウェアの中で，有用かつあまり日本語での情報が少ないものを中心にご紹介していく予定です。具体的な使用方法や，ソースの内容にも踏み込んで解説していきますので，ぜひ皆様の日々の開発にお役に立ていただければ幸いです。

トゥイーンライブラリを使用するメリット

UIViewのアニメーションで指定できるイージングの種類は，

• UIViewAnimationOptionCurveEaseInOut
• UIViewAnimationOptionCurveEaseIn
• UIViewAnimationOptionCurveEaseOut
• UIViewAnimationOptionCurveLinear

の4種類しかなく，「⁠ちょっときつめのイージングをかけたい」といったことを実現しようとすると，

• 自分でそのイージングカーブの数式を定義し，その数式に従ってアニメーションさせたい値を時間経過に応じて変化させる処理を書く
• CAAnimationクラスのtimingFunctionプロパティにカスタムのベジェ曲線を指定する
• パラメータを変えたアニメーションを連続で実行して，それっぽい動きに仕立てる

といった手段をとる必要があり，一気に敷居が高くなってしまいます。

トゥイーンライブラリはそういった処理をラップしてくれているもので，使用することでさまざまなイージングカーブでのアニメーションを簡単に実現できるようになります。

今回はオープンソースのトゥイーンライブラリを3種紹介し，それぞれの使い方と，内部でどのような処理が行われているか，長所・短所について述べてみたいと思います。

なお，いずれのライブラリも“⁠Robert Penner’s Easing Equations⁠”に基づいており，"easeOutBounce"や"easeOutElastic"といった，ActionScriptのTweenerなどのトゥイーンライブラリでおなじみのイージングタイプの指定が可能となっています。

サンプルプロジェクトを以下のURLよりダウンロードしていただけます。動作やコードの確認にご利用ください。

• https://github.com/shu223/TweenDemo

PRTween

特徴

UIView や CALayer のプロパティを変化させるアニメーションだけでなく，数式に従って時間経過に応じて変化させた値を出力することもできるので，UIView や CALayer の標準アニメーション機能では指定できないプロパティをアニメーションさせたりといった応用も可能となります。

また CGFloat 型の値の変化だけではなく，CGPoint や CGRect 型にも対応していたり，終了時の処理を Blocks で記述できたりと，今回紹介する中では最も完成度が高いと思われます。

※ なお，ライセンスはBSDとなっています。

使い方

1. ソースコードを以下のURLよりダウンロード

   • https://github.com/dominikhofmann/PRTween

2. libフォルダ（4つのファイルが入っています）ごとプロジェクトに追加

3. PRTween.h をインポート

   • #import "PRTween.h"

4. アニメーション開始処理を実装

   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];
   

5. 毎フレーム実行する処理を実装

   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;

といった，UIViewやCALayerを引数に指定してアニメーションさせるメソッドもあり，前述した addTweenPeriod:target:selector:timingFunction: を使用する方法よりこっちの方が一見シンプルで使いやすいように思うのですが，実はあまり使い勝手がよくありません。

たとえば，引数のtimingFunctionに

PRTweenTimingFunctionCADefault
PRTweenTimingFunctionCAEaseIn
PRTweenTimingFunctionCAEaseOut
PRTweenTimingFunctionCAEaseInOut
PRTweenTimingFunctionCALinear
PRTweenTimingFunctionUIViewEaseIn
PRTweenTimingFunctionUIViewEaseOut
PRTweenTimingFunctionUIViewEaseInOut
PRTweenTimingFunctionUIViewLinear
NULL

これら以外の値を指定した場合，内部で処理がスキップされ，アニメーションが開始されません。つまり，冒頭でトゥイーンライブラリを利用するメリットとして挙げた「UIViewやCALayerで用意されていないカスタムイージングカーブを利用できる」といったメリットが享受できない，ということになります。

また，詳述はしませんが，property引数の指定にもクセがあったりします。

というわけでやや手順は増えるものの応用のきくaddTweenPeriod:target:selector:timingFunction:を利用する方法を紹介しました。