職人が教える!iOSアプリ開発で使いこなしたいとっておきのOSS

第1回 様々なアニメーションを実現するiOSアプリ用トゥイーンライブラリ3種を比較!

この記事を読むのに必要な時間:およそ 4 分

はじめに

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

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

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

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

  • UIViewAnimationOptionCurveEaseInOut
  • UIViewAnimationOptionCurveEaseIn
  • UIViewAnimationOptionCurveEaseOut
  • UIViewAnimationOptionCurveLinear

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

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

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

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

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

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

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

PRTween

特徴

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

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

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

使い方

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

  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:を利用する方法を紹介しました。

著者プロフィール

堤修一(つつみしゅういち)

1978年生まれ。京都大学工学部を卒業後,同大学院修了。その後,NTTデータにて音声認識技術の研究開発,キヤノンにて画像処理機能の設計に携わる。

2010年より面白法人カヤックに入社。3年間ほぼiOSアプリ開発に専念し,フルスクラッチで開発しリリースしたアプリは30本以上。代表作は150万ユーザを突破した「バウンドモンスターズ」,AppStore Best of 2012を獲得した「タップ忍者」,カンヌ国際広告祭でブロンズを獲得した「Domino's App」など。

現在は,米国シリコンバレーのマウンテンビューにあるAppSocially社の一員として活躍中。

著書=『iOSアプリ開発 達人のレシピ100―開発現場で実証された実用コード集』

ブログ=Over&Outその後

Github=shu223

Twitter=shu223

コメント

コメントの記入