JavaScriptでトランプをめくるアニメーションを作成してみた

7675 ワード
アニメーション トランプ JavaScript es6 JavaScript テキストリンク

はじめに

カードをめくるアニメーションを作成してみました。

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. 結果

結果は、こんな感じになります。