画像を描く
次は、画像を描いてみる。表示する画像として、デスクトップピクチャを利用する。
Mac OS Xではデスクトップピクチャは/Library/Desktop Picturesの下にあるが、ここにある画像は非常にサイズが大きい。これらをこのまま使うと、ファイルの読み込みだけで相当な時間がかかってしまう。そこで、あらかじめ小さいサイズにリサイズしたものを使うことにする。滑らかなアニメーションを実現するには、こういった準備が重要だ。
レイヤーのコンテンツとして画像を指定することで、画像を表示させることができる。画像表示のためのレイヤーを作成して、ウォールレイヤーの一番下に配置しよう。アルバムタワーの第一歩だ。
画像レイヤーを配置した
アニメーションを行う
画像の表示はできたが、ただそのまま表示させたのでは面白くない。登場するところから、アニメーションさせてみよう。
そのためには、どのようなアニメーションにするか細かく定義する。このとき大事なのは、「始まり」の値と「終わり」値をはっきりさせることだ。アニメーションとは何かということを平たく言えば、ある値を始まりから終わりまで変化させることに他ならないからだ。
まず表示する時は、回転しながら登場するようにしよう。そこで、画像レイヤーの始まりの位置として、縦軸を中心に90度回転させておくものとする。終わりの位置は、回転を元に戻した、正面を向いた位置だ。
透明度も変化するようにしよう。始まりでは完全な透明にして、終わりでは透明度を0にする。フェードインしながら登場するようになるわけだ。
Core Animationでこれらのアニメーションを行う場合は、アニメーションを表すCAAnimationというクラスを使う。CAAnimationを、レイヤーの座標変換と、透明度に対して適用してやるのだ。これで、次のようなアニメーションを行ってみた。
