Leopard解体新書--第8回:Core Animationで1000 Songsに挑戦

木下誠(HMDT)
2007-12-06 17:57:01
  • このエントリーをはてなブックマークに追加

 前回に引き続き、Core Animationの話をしよう。

 Core Animationが始めて紹介されたのは、WWDC 2006のLeopardプレビューにおいてだ。そのときは、iPodのCMである「1000 Songs」をCore Animationで再現したデモを流し、開発者達に大きな興奮を巻き起こした。

1000 SongsのCM 1000 SongsのCM

 1000 Songsは、iTunesが持つアルバムのカバー画像を使って、アルバムタワーを作り上げていく映像だ。膨大な数の画像が、次々とアニメーションを繰り返していく。

 今回は、この1000 Songsデモの再現に挑戦してみよう。

レイヤーを用意する

 Core Animationでは、「レイヤー」と呼ばれる構造を基本として、アニメーションを行う。レイヤーは、セルアニメーションのレイヤーと似たようなものだと考えてほしい。複数のレイヤーを重ね合わせて、それらを別々に動かすことでアニメーションを実現するのだ。

 まず、背景となるレイヤーを用意しよう。Core Animationのレイヤーは、指定した色で塗りつぶすことができる。今回は、黒で塗りつぶしておこう。

 また、画像を表示する領域のレイヤーも、別途用意しておこう。今回の目的は、画像の「タワー」を作り上げることなので、このレイヤーをウォールレイヤーと呼ぶことにする。ウォールレイヤーは、分かりやすいように、グレーで塗りつぶしておく。

背景とウォールレイヤー 背景とウォールレイヤー
  • 新着記事
  • 特集
  • ブログ