原生JS幀動畫

時間 2019-12-12

原文原文鏈接

最近嘗試了一下用JS實現動畫效果，原理是經過改變元素background-position屬性進而實現圖片的動畫效果
圖片素材：
html

代碼以下：瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #rabbit{
            width: 102px;
            height: 80px;
            /*background: url(rabbit.png) no-repeat 0px -480px;*/
        }
    </style>
    <script>
        window.onload = function(){

            /** rabbit動畫**/
            var imgUrl = 'rabbit.png';
            var positions = ["0 -480", "-174 -480", "-349 -480", "-524 -480", "-698 -480", "-873 -480"];

            var ele = document.getElementById('rabbit');

            // console.log(positions[0]);
            // console.log(typeof(positions[0]));
            // console.log(positions[0].split(' '));

            animation(ele,positions,imgUrl);
            function animation(ele,positions,imgUrl){

                ele.style.backgroundImage = 'url('+imgUrl+')';
                ele.style.backgroundRepeat = 'no-repeat';

                var index = 0;

                function run(){

                    var position = positions[index].split(' ');
                    ele.style.backgroundPosition = position[0]+'px '+position[1]+'px';
                    index++;
                    if (index >= positions.length) {
                        index = 0;
                    }
                    //console.log(position[0]+'px '+position[1]+'px');
                    setTimeout(run,80);

                }
                run();
            }
        }
    </script>
</head>
<body>
    <div id="rabbit"></div>
</body>
</html>

好像不能上傳gif圖片，仍是本身到瀏覽器中查看吧....動畫

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。