このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ第76回

iPhoneでも動くアニメが作れるSencha Animatorの使い方

2011年11月14日 11時00分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

シーンの追加

 続いて、タイトル文字のスケールと不透明度を変化させるアニメーションを作成します。今回のようにシンプルなアニメーションであれば前の続きでも作成できますが、ここではSencha Animatorのシーン機能を使います。シーン機能を使えばアニメーションをシーンごとに分けて作成できるので、長く複雑なアニメーションも気軽に作成できます。

 シーンを追加するには、Sencesメニューから「Add New」を選択するか、画面下部のScenes領域にある「+」ボタンをクリックします。

【図】fig21.png
新たなシーンを追加する

 新たなシーンが作成されました。背景はライブラリに登録しておきましたので、ライブラリパネルからステージにドラッグドロップします。

【図】fig22.psd
Libraryからグラデーション背景をステージにドラッグドロップする

 タイトル文字を入力します。先ほどと同様にテキストを入力してフォントやサイズを調整します。

【図】fig23.png
文字を入力しサイズとフォントを設定

 文字のスケールを設定します。文字のサイズはフォントサイズでも変更できますが、ここではCSS3のTransform機能を使って文字の表示倍率を変更します。

 プロパティパネルのTransformsをクリックすると、ScaleやRotateなどの変形に使用できるプロパティと値が表示されます。今回は、最初のScaleを400%に、最後のScaleを100%に設定し、文字を小さくするアニメーションにします。

【図】fig24.png
最初のスケールを400%に設定する
【図】fig25.png
最後のスケールを100%に設定する
【図】fig26.png
再生ヘッドを移動させて文字のスケールが変化することを確認する

 これでタイトル文字のアニメーションができました。

 次に、説明文の部分を作成します。Scenesメニューから「Add New」を選択してシーンを追加します。

【図】fig27.png
ソフトの詳細説明用のシーンを追加

 ここでも背景は同じグラデーション背景を使います。ライブラリパネルからドラッグ&ドロップして配置し、あらかじめ用意しておいた説明文を入力します。

【図】fig28.png
説明用の文字を配置しサイズや行間を調整

 説明文を下から上に移動させるようにアニメーションを設定します。

【図】fig29.png
下から上に移動するようにアニメーションを設定する

 設定したアニメーションを再生してみると、最初は高速に移動するのに最後は非常にゆっくりとした動きになっています。説明文なので一定速度で動いて欲しいところです。

 そこで、キーとキーの間の動きの種類を変更します。キーをクリックした状態で表示されるプロパティパネルの「General」→「Easing:」が動きの種類です。その右側にあるポップアップメニューから「Linear」を選択すると、一定速度で動くアニメーションになります。最後のキーも同様にクリックして「Linear」を選択します。

【図】fig31.png
最初と最後のキーをLinearに設定する

 再生して動きを確認してみると、今度は一定速度で文字が下から上に移動します。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く