編集部からのお知らせ
「半導体動向」記事まとめ
「リスキリング」に関する記事まとめ

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

木下誠(HMDT)

2007-12-06 17:57

画像を描く

 次は、画像を描いてみる。表示する画像として、デスクトップピクチャを利用する。

 Mac OS Xではデスクトップピクチャは/Library/Desktop Picturesの下にあるが、ここにある画像は非常にサイズが大きい。これらをこのまま使うと、ファイルの読み込みだけで相当な時間がかかってしまう。そこで、あらかじめ小さいサイズにリサイズしたものを使うことにする。滑らかなアニメーションを実現するには、こういった準備が重要だ。

 レイヤーのコンテンツとして画像を指定することで、画像を表示させることができる。画像表示のためのレイヤーを作成して、ウォールレイヤーの一番下に配置しよう。アルバムタワーの第一歩だ。

画像レイヤーを配置した 画像レイヤーを配置した

アニメーションを行う

 画像の表示はできたが、ただそのまま表示させたのでは面白くない。登場するところから、アニメーションさせてみよう。

 そのためには、どのようなアニメーションにするか細かく定義する。このとき大事なのは、「始まり」の値と「終わり」値をはっきりさせることだ。アニメーションとは何かということを平たく言えば、ある値を始まりから終わりまで変化させることに他ならないからだ。

 まず表示する時は、回転しながら登場するようにしよう。そこで、画像レイヤーの始まりの位置として、縦軸を中心に90度回転させておくものとする。終わりの位置は、回転を元に戻した、正面を向いた位置だ。

 透明度も変化するようにしよう。始まりでは完全な透明にして、終わりでは透明度を0にする。フェードインしながら登場するようになるわけだ。

 Core Animationでこれらのアニメーションを行う場合は、アニメーションを表すCAAnimationというクラスを使う。CAAnimationを、レイヤーの座標変換と、透明度に対して適用してやるのだ。これで、次のようなアニメーションを行ってみた。

ZDNet Japan 記事を毎朝メールでまとめ読み(登録無料)

特集

CIO

モバイル

セキュリティ

スペシャル

ホワイトペーパー

新着

ランキング

  1. 開発

    なぜ、コンテナー技術を使うことで、ビジネスチャンスを逃さないアプリ開発が可能になるのか?

  2. セキュリティ

    2022年、セキュリティトレンドと最新テクノロジーについて、リーダーが知っておくべきこと

  3. ビジネスアプリケーション

    全国1,800人のアンケートから見えてきた、日本企業におけるデータ活用の現実と課題に迫る

  4. 運用管理

    データドリブン企業への変革を支える4要素と「AI・データ活用の民主化」に欠かせないテクノロジー

  5. 経営

    テレワーク化が浮き彫りにしたリソース管理の重要性、JALのPCセットアップを支えたソフトウエア

NEWSLETTERS

エンタープライズ・コンピューティングの最前線を配信

ZDNet Japanは、CIOとITマネージャーを対象に、ビジネス課題の解決とITを活用した新たな価値創造を支援します。
ITビジネス全般については、CNET Japanをご覧ください。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]