HTML5 Webストレージでデータを保存 その3（クエスト進行CSS3アニメーション）
2013.02.08
この記事は最終更新日から1年以上が経過しています。
前回の
HTML5 Webストレージでデータを保存 その２（なんちゃってソーシャルゲーム作成）
続きになります。
今回は、画面仕様である「 背景が変化する。（進んでいる感のアニメ）」の作成を行いたいと思います。
CSS3を使うことによって色々な表現ができるようになりました。
そのなかでも多彩な表現が可能となるkeyframe アニメーションを使ってクエスト進行の作成を行いたいと思います。
keyframe アニメーション
.elm { -webkit-animation: 'anime' 1s ease-in 1; }
@-webkit-keyframes 'anime' {
0% { opacity:0; }
100% { opacity:1; }
}
このようにアニメを行いたい対象の要素に対して-webkit-animationの指定を行い、
@-webkit-keyframes ‘任意の名前’で行うアニメーションの指定をすることによって
様々なアニメーションを行うことができます。
上記の例では1秒間の間に透過度100%から0%に変化させるアニメーションの指定を行っております。
今回はクエスト進行なので、人気のソーシャルゲームにあやかることにして、
「ミリオンアーサー風」な感じで、歩いている感じのアニメーションを作成いたします。
拡散性ミリオンアーサー
販売元: SQUARE ENIX Co., Ltd.
© 2012 SQUARE ENIX CO., LTD. All Rights Reserved. Developed by Mighty Craft Co.
では、まず背景のズームを行います。
@-webkit-keyframes questMove {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(2);
opacity: 0;
}
}
-webkit-transformを使い、zoomさせ、opacityで透過させていきます。
さらに歩いている感じを出すために、positionで操作しましょう。 （transformで操作しても良いのですが、すでにscaleの設定しており細かい調整が必要となってき複雑化してしまうので別個に設定いたします。）
.questImg img {
position: absolute;
-webkit-animation: questMove 1s ease-in;
z-index: 1;
}
@-webkit-keyframes questMove {
0% {
-webkit-transform: scale(1);
top: -10px;
opacity: 1;
}
20% {
top: 10px;
}
40% {
top: -15px;
}
60% {
top: 15px;
}
80% {
top: -20px;
opacity: 0.1;
}
100% {
top: 0px;
-webkit-transform: scale(2);
opacity: 0;
}
}
positionの指定をすることによって、zoomしてくる画像がいろんな要素にかぶさってしまうため、h1、.statusView、.btnにz-index:10;を指定します。
また、.mainViewにはposition: relative;の指定を行い、基準点を作ります。
そんな感じで作ったのが以下のデモになります。
http://webcyou.com/demo/js/webstorage/index002.html
な、なんとなくそれっぽいですよね。。。
続いて、ボタンを押すとCSS3アニメーションが動くようにしましょう。
クエスト進行CSS3アニメーション
背景画像は「通常は固定」「ボタンを押すと動く」という流れを作ります。
先ほど作ったCSSも一部修正します。
CSS3
.questImg img {
position: absolute;
z-index: 1;
}
.questImg.move img { -webkit-animation: questMove 1s ease-in; }
このように、.questImgに.moveが付与されるとアニメーションが始まるように修正します。
それでは、ボタンが押されるとアニメーションが始まるように、JavaScriptで設定を行います。
JavaScript
function game(){
var btn = document.querySelector('.btn'),
questImg = document.querySelector('.questImg'),
img = questImg.querySelector('img');
img.addEventListener('webkitAnimationEnd', function(){
questImg.classList.remove('move');
}, false);
btn.addEventListener("click", function(){
questImg.classList.add('move');
}, false);
}
window.addEventListener("DOMContentLoaded", game, false);
とりあえず、必要最低限に記述してみました。
DOMContentLoadedでDOMが読み込み完了したら、game関数を実行させます。
querySelectorを使いbtn と p要素であるquestImgと背景画像であるimgを取得し、変数に格納。
（querySelectorに関してはこちらを参照に）
Javascript querySelector、querySelectorAll
imgに対してaddEventListener 、webkitAnimationEnd でimg（背景画像）のアニメーションが終了すると、親要素のpであるquestImgに付与されているclass”move”を削除するように記述しております。
（webkitAnimationEndに関してはこちらを参照に）
css3とjavascriptを利用する際に頻繁使用 webkitAnimationEndとwebkitTransitionEnd
また、btnに対してaddEventListener、clickでbtnがクリックされるとp要素であるquestImgにclass”move”を付与するように記述しております。
で、作成したデモは以下になります。
http://webcyou.com/demo/js/webstorage/index003.html
なんとなく雰囲気が出てきましたね！
では今回はここまで。
