HTML5 Audio ピアノ制作 : Step2 – アニメーションさせよう!
この Step は webkit つまり, Chrome と Safari 限定の Step です. 鍵盤を押すと凹んで色が変わるアニメーションを追加します.
SAMPLE
サンプルはこちらで見ることができます. 鍵盤をクリックすると凹んで色が変わります.
CODE
まず下記のコードを html 側の style タグの中に
@-webkit-keyframes play { 0% { background-color: #aaa; } 50% { -webkit-transform: rotateX(30deg) } 100% { background-color: #eee; } } @-webkit-keyframes play-black { 0% { background-color: #000; } 50% { -webkit-transform: rotateX(30deg) } 100% { background-color: #aaa; } }
を追加します.なんだか今までの style の指定とちょっと違うので戸惑うかもしれませんが, これでアニメーションの定義ができます.
次に キーボードに先ほど定義したアニメーションを割り当てます.
.white-key-set .keyboard { display:-moz-box; width:40px; height:200px; border:solid 1px black; background-color: #eee; -webkit-animation-name: play; -webkit-animation-duration: 0.25s; -webkit-animation-play-state: paused; -webkit-animation-delay: 0.1s; } .black-key-set .keyboard { display:-moz-box; width:30px; height:120px; border:solid 1px white; margin-right: 10px; background-color: #000; -webkit-animation-name: play-black; -webkit-animation-duration: 0.25s; -webkit-animation-play-state: paused; -webkit-animation-delay: 0.1s; }
-webkit というベンダープレフィックスが付いているのが今回追加したプロパティです. やっていることは アニメーション名の指定, 長さの指定, 初期時の状態の指定, 遅延時間の指定です.
これでアニメーションの設定は終わりです. ですがまだこれでは動きません. ちょっと面倒ですが, Script 側で押されたときにのみ, このアニメーションを流すようプログラムします.
play() 関数の最後に, 押されたエレメントのアニメーションの状態を有効にする処理を追加します.
// アニメーション element.style.webkitAnimationPlayState = "running";
これでもまだ正常に動きません. このままだと1度しかアニメーションしてくれません. そこでちょっとしたテクニック. あまり知られていませんが, アニメーション終了時イベントにアニメーション状態を “paused” にすることで再び再生することができます.
// アニメーション終了時イベントを登録 keyboards[i].addEventListener("webkitAnimationEnd", function(){ // アニメーションが終了したら ステートを "paused" にする. // こうすることで "running" にした際にまた再生できることを発見した. this.style.webkitAnimationPlayState = "paused"; }, false);
これで鍵盤を押すたび鍵盤がアニメーションするようになります. アニメーションが標準化されて他のブラウザでも動くようになればなぁ~
[…] Step2 – アニメーションさせよう! […]
[…] 以前 JavaScript でピアノを作ったときにざっくりまとめたので知りたい方はこちらへ. […]
"t.style.webkitAnimationPlayState = "running"" HTML5 Audio ピアノ制作 : Step2 – アニメーションさせよう! | TM Life http://t.co/CydNQcVg