Hello Animation!
Hello Animation!をローカライズしたものです。原文とは異なる表現を使ったりしています。
この記事のライセンスはCreative Commons 表示-非営利-継承 2.5 一般です。原著作者はOpera Softwareです。
なお、ウィジェットに関する説明は「Opera ウィジェット」を、その他のウィジェット関連の文書について知りたい方はCategory:ウィジェットを、それぞれご覧ください。
目次 |
[編集] はじめに
前回のチュートリアルでは、最小限のHello World!ウィジェットを完成させました。ウィジェットはそのまま動きますが、ウィジェットは反転させる以外の反応がなく、ユーザーには少しつまらなく見えるかもしれません。
今回は、Opera Animation Libraryを使ってウィジェットに簡単なアニメーションをつけてみましょう。今回はライブラリの簡潔な紹介に過ぎません。より高度な機能の解説はこちらをご覧ください。
このチュートリアルでは、あなたが既にHello World!チュートリアルを完成させたものと考えます。もしあなたがその手間を省略したいなら、元のウィジェットをダウンロードして展開してください。
[編集] ライブラリを使う
あなたのウィジェットに素敵なアニメーションをつける際に最初にすることは、animation.jsファイルを追加することです。このライブラリはこちらをクリックしてダウンロードできます。
まず、animation.jsファイルをあなたのウィジェットのルートフォルダにコピーしてください。次に、あなたのHello World!ウィジェットのindex.htmlファイルに適当なスクリプトを追加して、このファイルをあなたのプロジェクトに追加しなければなりません。
Hello World!チュートリアルで作ったウィジェットのヘッダーセクションはこのようになっていました。
<head> <title>Hello World!</title> <link rel="stylesheet" type="text/css" href="helloworld.css"> <script type="text/javascript" src="helloworld.js"></script> </head>
これを、Opera Animation Libraryを含むように書き換えましょう。
<head> <title>Hello World!</title> <link rel="stylesheet" type="text/css" href="helloworld.css"> <script type="text/javascript" src="animation.js"></script> <script type="text/javascript" src="helloworld.js"></script> </head>
これらのスクリプトを書く順番は重要ですので覚えておいてください。これは、これから前回作ったhelloworld.jsスクリプトにアニメーションを追加しする変更をしていくので、それらの機能が既に使えるようになっていなければいけないためです。
[編集] 反転ボタン
このチュートリアルでは反転ボタンを扱います。前回、反転ボタンはウィジェット上にマウスを乗せると現れ、マウスを外すと消えましたが、これからそれを徐々にやる（fade）効果をつけましょう。
- まず、ウィジェットにマウスを乗せたときに反転ボタンを徐々に現れるようにします。
- 次に、ボタンにマウスと乗せたときに反転ボタンを徐々に強い色になるようにします。
[編集] スタイルを変える
Hello World!チュートリアルで作ったhelloworld.cssを開きましょう。いくつかのスタイルシートの項目は、これからつける素敵なJavaScriptアニメーションには不必要になってしまいます（または衝突してしまいます）。以下のようになっているスタイル項目を削除しましょう。
body:hover.flipbutton {
opacity: 0.3;
}
body .flipbutton:hover{
opacity: 1.0;
}
削除したら、保存してファイルを閉じ、helloworld.jsを代わりに開きましょう。これから挙動をつけていきます。
[編集] ウィジェットをアニメーション用に準備する
オブジェクト（マークアップ要素）にアニメーションを付けていく前に、要素それ自体にアニメーションを付けなくてはいけません。これは、createAnimation()メソッドを呼び出すことですることができます。このウィジェットでは、反転ボタンがこれにあたります。これを追加するには、ウィジェットのロード（load）イベントの始めに以下を追加しましょう。
window.addEventListener('load',function(ev){
// 他のコード
// 前面と後面の反転ボタンにアニメーションをつける
var frontFlipAnimation = document.getElementById('flipfront').createAnimation();
var backFlipAnimation = document.getElementById('flipback').createAnimation();
// アニメーションの速さを指定
frontFlipAnimation.speed=10;
backFlipAnimation.speed=10;
アニメーションを追加する他に、.speedプロパティを指定してアニメーションの速さを調節したので、少し速くなりました。
[編集] ウィジェットにマウスを乗せる
ウィジェットのスタイルガイドによると、反転ボタンはマウスがウィジェット上にないときは非表示で、ウィジェット上にあるときは不透明度（opacity）が0.3でないといけません。これからそのアニメーションを追加しましょう。
オンロードイベントのハンドラーの中に以下のコードを付け加えましょう。
// マウスがウィジェット上にきたとき反転ボタンを徐々に表示するハンドラー
document.body.addEventListener('mouseover',function(){
clearTimeout(buttonTimeout);
if (parseFloat(frontFlipAnimation.style.opacity) == 0){
// アニメーションを作成し、不透明度を指定し、実行する
frontFlipAnimation.addAnimation('opacity',0,0.3).run();
// 後面も同様に
backFlipAnimation.addAnimation('opacity',0,0.3).run();
}
},false);
// ウィジェットからマウスを外したときのアニメーションを作る
document.body.addEventListener('mouseout',function(){
// アニメーションを作成し、不透明度を指定し、実行するcreate the animation, and add an opacity fade and run it
buttonTimeout = setTimeout(fadeOut,50);
},false);
この例は少し複雑かもしれませんが、落ち着きましょう。本当はけっこう簡単なのです。
最初に、ドキュメントにイベントハンドラーというものを付け、マウスをウィジェットに乗せたり外したりするとボタンが徐々に現れたり消えたりするようにしました。イベントハンドラーの中ではアニメーションのコードを書いています。mouseoverハンドラーの中の次の一行を見てみましょう。
frontFlipAnimation.addAnimation('opacity',0,0.3).run();
これは、次の2つのことをしています。
- CSSプロパティの
opacityを追加し、その値を0.0（完全に透明）から0.3（ほどほどに透明）までアニメーションで変える。 - そして、
run()を呼び出して単にそのアニメーションを実行する。
[編集] 時間を置いて実行する
この例では、次の行によってアニメーションを50msだけ遅らせました。
buttonTimeout = setTimeout(fadeOut,50);
これから、このbuttonTimeoutをもっとグローバルな部分で宣言しなければいけません。スクリプトの最初の行に、次の行を加えましょう。
var buttonTimeout;
次に、アニメーションを行うときに呼び出しているfadeOut関数を宣言しなければいけません。ロードイベントハンドラーのどこかにそれを付け足しましょう。この関数はウィジェットからマウスを外したときに呼び出されます。
function fadeOut(){
frontFlipAnimation.addAnimation('opacity',0.3,0).run();
backFlipAnimation.addAnimation('opacity',0.3,0).run();
}
これで、次にウィジェットを起動したときには、ウィジェットにマウスを乗せと反転ボタンが徐々に現れ、マウスを外したときには徐々に消えます。
[編集] マウスを反転ボタンに乗せたとき
次に修正することは、反転ボタンにマウスを乗せたときに透明度を完全になくすことです。これは、ボタンそれ自体にイベントハンドラーを付けることによって出来ます。ロードイベントハンドラーの中に以下を追加しましょう。
frontFlipAnimation.element.addEventListener('mouseover',function(){
if (parseFloat(frontFlipAnimation.style.opacity) != 1){
frontFlipAnimation.addAnimation('opacity',0.3,1.0).run();
}
},false);
frontFlipAnimation.element.addEventListener('mouseout',function(){
frontFlipAnimation.addAnimation('opacity',1.0,0.3).run();
},false);
backFlipAnimation.element.addEventListener('mouseover',function(){
if (parseFloat(backFlipAnimation.style.opacity) != 1){
backFlipAnimation.addAnimation('opacity',0.3,1.0).run();
}
},false);
backFlipAnimation.element.addEventListener('mouseout',function(){
backFlipAnimation.addAnimation('opacity',1.0,0.3).run();
},false);
ここでは4つのイベントハンドラーを追加しています。一つはメイン画面の反転ボタンに、一つは設定画面の反転ボタンにマウスを乗せたとき、それから同様に、それらからマウスを外したときのアニメーションです。
もう一つ重要なことは、不透明度が既に1のとき（完全に不透明のとき）はアニメーションが起こらないようにしていることです。これは、ウィジェットをクリックした際に余計な効果が起こらないようにするためです。これは次の条件節によって行われています。
if (parseFloat(backFlipAnimation.style.opacity) != 1)
[編集] 反転を加える
最後にすることはボタンをクリックしたときにボタンの画像を変えることです。これは元のチュートリアルで既にやりましたが、そこへ小さな変更を加えます。最初のコードには以下のような部分がありました。
document.getElementById('flipback').addEventListener('click',function(ev){
flipWidget("front");
}, false);
document.getElementById('frontlabel').addEventListener('change',function(ev){
document.getElementById('hellotext').textContent = this.value;
},false);
これを以下のように変えましょう。
document.getElementById('flipfront').addEventListener('click',function(ev){
backFlipAnimation.style.opacity = 1;
flipWidget("back");
}, false);
document.getElementById('flipback').addEventListener('click',function(ev){
frontFlipAnimation.style.opacity = 1;
flipWidget("front");
}, false);
ここでしていることは、反転した際に裏面にある反転ボタンの不透明度を1にすることで、あたかも反転する前と同じボタンであるかのように見せています。つまり、メイン画面で反転ボタンをクリックすると、backFlipAnimation.style.opacity = 1;によって設定画面の反転ボタンの不透明度を変え、反対に設定画面で反転ボタンをクリックすると、frontFlipAnimation.style.opacity = 1;によってメイン画面の反転ボタンの不透明度を変えます。
このアニメーションであなたのHello Animation!ウィジェットは完成したはずです。あなたは自分でもっと素敵なアニメーションを付けることもできます。もしちゃんとしたコードを参考にしたいなら、完成したウィジェットをダウンロードすることもできます。
