JavaScript 帧动画

来源：互联网发布：自己开淘宝店赚钱吗编辑：程序博客网时间：2024/05/16 18:53

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

0 0