提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JavaScript 帧动画

JavaScript动画
2023-09-11 14:22:55 时间

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>

这里写图片描述

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

相关文章