Cocoa UI アニメーションの作成について(ちょっと)調べてみる


かなりの遅まきながら、「脱線(2)」のアウトプット記事、第2弾です。今回は、なんとか作ってみた PPMTabView というクラスの紹介と、それを作る過程で調べたことを書いていきたいと思います。

「UI アニメーション」と言っても、今回は、こういう「発煙」みたいなところまで(これはほんとにアニメですね)は行かず、アプリケーションウィンドウやその内容に変化があったとき、クロスフェードしたり、スライドしたりして、ユーザーによるアプリケーションの状態の把握をアシストする、といった範囲(…というか、単に UI のトランジションエフェクト について書きたかったのかも、書きながら思いました)のことを書こうと思います。

ところで、他にもいろいろ参考にさせていただいたサイトはあるのですが、この記事を書いていくうち、このテーマに関しては、ウェブサイト Vacuous Virtuoso を見てもらうのが間違いない、という結論に至りました。この記事も、このサイトの説明に終わってしまう予感がしています。

さらに、上のサイトを見つけるきっかけや、その他のことに関して参考にさせていただいたのが zumaya さんの ひ to り go と、特に 2月の アーカイブ です。

(長いので、目次を追加しました。)

Cocoa UI アニメーション作成の、2つのアプローチ

もちろん、頑張ればいろんなやりかたがありそうですが、先に述べたような、「UI を、ちょっとわかりやすくするためのアニメーション」を実現するのによく使われる方法としては、2種類 あるようです。

Core Graphics のプライベート関数を使う

アニメーションの対象
ウィンドウ
どんなことができるか
QuickSilver や MacOS X インストール後に表示されるアシスタントのような キューブアニメーション、Dashboard で使われているような フリップアニメーション などを実現できます。
どういうふうに作るのか

前準備はほんの少しややこしいですが、C言語(?)で書かれた関数に、アニメーションの設定と対象ウィンドウの ID の入った構造体を突っ込めば、勝手にアニメーションしてくれます。こちらが「どう描画させるか」などを考える必要はありません。

これに関しては、上述 Vacuous Virtuoso にて、「Xcode animations – Core Graphics」という非常に詳しいマニュアル本(サンプルコード付き)が、なんと 無償 で配布されています。

注意点
この方法の唯一の問題は、プライベート関数を使っている ために、今書いたコードが 将来にわたって使えるという保証がない、ということです。

Core Image と NSAnimation を使う

アニメーションの対象
ビュー(ウインドウも含む)
どんなことができるか
(たぶん)Dashboard でウィジェットが現れるときの 水紋エフェクトiGTD の環境設定パネルに見られるような クロスフェード表示
どういうふうに作るのか

Core Image といえば、何か「画像にエフェクトをかけるやつ」という印象がありますが、そうです。NSView には 自分の表示状態をビットマップイメージとして取り出すメソッド がありますので、そのイメージに Core Image を使ってエフェクトをかけてやろう、というのが、基本的な考え方です。

これをどうやってアニメーションさせるのかというと、Core Image では、「2つの画像にトランジションエフェクト(クロスフェードとか)をかけて、その途中経過の画像を、数値(エフェクトの進行度)で指定して取り出す」ということができます。また、NSAnimation からは、アニメーションを実行しているとき、アニメーションがどのくらい進行したか、という数値を取り出すことができます。

そこで、NSAnimation のインスタンスが返す数値に合わせて、エフェクトの途中経過の画像を次々取り出すことによって、アニメーションを実現することが出来るわけです。

…って、素人の大まかな説明で、かえって混乱させてしまいそうですね(汗) これに関しては、Apple の「Reducer」というサンプルコードが参考になります。

Vacuous Virtuoso の、ためになるコード

上記の、Core Graphics を使う方法、Core Image を使う方法、そのどちらを使う場合でも参考になるのが、Vacuous Virtuoso の最新記事で映像(上。僕の説明だけでは何の話をしているのか分からなかった方でも、これを見れば一発で分かるでしょう)が紹介されているサンプルコード、「Core Transitions Demo」です。

Vacuous Virtuoso の ダウンロードページ にはこのほかにも、(僕はまださわっていないので詳しいことは書けませんが、)これらのエフェクトをフレームワーク化したもの、ここでは触れないと言った、煙を出すフレームワーク(!)などが公開されています。興味のある方は、ぜひ見てみてください。

PPMTabView

ここで、僕の作った PPMTabView を紹介しておきます。これは、Apple のサンプルコード「Reducer」をベースに、派手な Core Image エフェクトを外した(デチューン)、タブを切り替えると、シンプルなスライドアニメーションをする NSTabView のサブクラス です。

なぜわざわざデチューンしたのかというと、僕がそもそもこのアニメーション絡みのことを調べたのが、RSS リーダー Xcast (開発は継続されていない)で使われているのと同じような UI アニメーションを実現したい、という理由があったということと、勝手に打ち立てている、UI アニメーションの派手さはアプリケーション全体のデザインのレベルを超えてはいけないの法則 にのっとり、比較的簡素なアプリケーションでも、やらしくなく使えるようにしたかったからです。

例によって、このコードの 効率性・正確性・安全性などは保証できません。配布・使用・改変などに関しては、僕と他の人に迷惑をかけない限り、なんでもご自由にどうぞ。

ダウンロード:PPMTabView.zip (33KB)

スマートフォルダ設定画面とかの「にょき」ってのびるやつ

さらにもうひとつ!(長えな)この記事を書こうとしたときにまた、少し興味深い記事がアップされていたので紹介しておきます。それは、便利ソフト Hezel の開発ブログの この記事 なのですが…

Mail.app のスマートフォルダ設定画面とかで条件を増やすと、ダイアログが「にょき」って伸びますよね。僕は、あれを作るのは結構難しいんじゃないか、と思っていたのですが、あれには、ふだん Interface Builder で設定する autoresizing mask (「バネ」の絵のやつですね)をうまく活用するのだそうです。

記事の「autoresizeing mask は、Interface Builder で設定したらあとは触れない、ってものじゃないんだよ」というところには、なるほど、と思いました。あの「にょき」は、autoresizeing mask をオン・ザ・フライで設定し直して、あとはただ単にダイアログのサイズを変更 すれば、実現できるのだそうです。(知っている人は知ってそうですが…)もし興味があれば、これも読んでみてください。


“Cocoa UI アニメーションの作成について(ちょっと)調べてみる” への1件のコメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です