かなりの遅まきながら、「脱線(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件のコメント
[…] A nice write-up on animation in Cocoa. Or if you can read Japanese (unlike me), then head here. […]