はじめに
カードをめくるアニメーションを作成してみました。
1. フォルダー構成
フォルダー構成は以下のようになります
.
├── card_turning.html
├── cardTurning.js
├── clover11.js
└── backcard.png
2. 実装
コードは以下のようになります。
card_turning.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カードを捲るアニメーションプログラム</title>
</head>
<body>
</div>
<div>
<img id='img' src='./backcard.png'/>
</div>
<div>
<button id="button">めくる</button>
</div>
<div>
<script src='./script.js'></script>
</body>
</html>
以下はJavaScriptのコードになります。
cardTurning.js
const buttonElem = document.getElementById('button');
let isBack = true;
if(buttonElem !== null){
buttonElem.addEventListener('click', () => {
const element = document.getElementById('img');
if(element !== null){
let imagePath = isBack ? './clover11.png' : './backcard.png';
rotationAnimationLoop(element, imagePath, 0);
isBack = !isBack;
}
});
}
/* カードを捲る処理を指定された角度になるまでループさせる関数
* @param {Object} element imgタグのElement Object
* @param {String} imagePath 画像のパス
* @return {Number} deg カードの回転角度
*/
const rotationAnimationLoop = (element, imagePath, deg) =>{
if( deg <= 180 ){
rotationAnimation(element, imagePath, deg);
setTimeout(
() => {
rotationAnimationLoop(element, imagePath, deg+= 5 )
},
1 );
}
}
/* カードを捲る処理
* @param {Object} element imgタグのElement Object
* @param {String} imagePath 画像のパス
* @return {Number} deg カードの回転角度
*/
const rotationAnimation = (element, imagePath, deg) =>{
if ( 90 === deg ){
element.src = imagePath;
}else {
element.style.webkitTransform = 'rotateY(' + deg + 'deg)';
}
}
3. 結果
結果は、こんな感じになります。
