JavaScript 帧动画

柔光的暖阳◎ 2022-07-12 12:21 253阅读 0赞

# JavaScript 实现帧动画的方式有三种 #

*  图片元素的 element.style.backgroundPosition = “x y”;
 *  父容器的 overflow:hidden; 和图片src元素的 element.style.transform = “translate(x, y)”;
 *  使用canvas动态绘制

# JavaScript 实现帧动画较CSS实现的优点 #

*  方便切割动画帧。由于每帧大小都是固定的，因此可以写成函数，而不用像CSS那样把每帧的位置都写一遍
 *  动画状态可控。可以在任意时刻暂停或者恢复动画，或者在动画完成时执行某些操作。

# 代码实战 #

<html>
    <head>
    <style> .imageStyle { width: 241px; height: 180px; border-radius: 20px; border: 1px solid black; box-shadow: 5px 5px 5px #888; margin: 5px; } .imageBg { background-image: url("frameAnim.png"); } #translateAnimDiv { overflow: hidden; display: inline-block; } </style>
    </head>
    <body>
    <img id="positionAnimImg" class="imageStyle imageBg">
    <div id="translateAnimDiv" class="imageStyle">
        <img id="translateAnimImg" src="frameAnim.png">
    </div>
    <canvas id="canvas" width="241px" height="180px" class="imageStyle">Your browser can not support canvas</canvas>
    <script> window.onload = function() { var positionAnimImg = document.getElementById("positionAnimImg"); var index = 0; setInterval(function() { positionAnimImg.style.backgroundPosition = -index*241 + "px 0"; index++; if(index >= 7) { index = 0; } }, 300); var translateAnimImg = document.getElementById("translateAnimImg"); var index = 0; setInterval(function() { translateAnimImg.style.transform = "translate(-" + index*14.3 + "%, 0)"; index++; if(index >= 7) { index = 0; } }, 300); var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var index = 0; setInterval(function() { ctx.drawImage(translateAnimImg, index*241, 0, 240, 180, 0, 0, 240, 180); index++; if(index >= 7) { index = 0; } }, 300); } </script>
    </body>
    </html>

![这里写图片描述][20170223140912238]

图片素材见鄙人上一篇博文《CSS3 帧动画》  
[http://blog.csdn.net/chy555chy/article/details/56489497][http_blog.csdn.net_chy555chy_article_details_56489497]

[20170223140912238]: /images/20220710/865d923456dc4231bb13d496d92b4dfe.png
[http_blog.csdn.net_chy555chy_article_details_56489497]: http://blog.csdn.net/chy555chy/article/details/56489497