Question

新手HTML5开发者，

我正在网上挖掘使用几个jpg文件创建一个动画图像，我应该在我的网站的某个文件夹中。我们的想法是在用户点击按钮时创建一个从页面一侧到另一侧的兔子动画。

所以，到目前为止，我发现的是可以转换图像的库，并允许我移动它们，但我真正需要的是让图像发生变化，而-let＆amp; s说我有一个div兔子的图像被放置 - 兔子正在移动。

IMGS / 兔image1.jpg 兔image2.jpg 兔image3.jpg 兔image4.jpg 兔image5.jpg 兔image6.jpg

一旦我开始从页面的一个点移动到另一个点，我希望这些图像循环直到到达结束位置，给人一种奔跑兔子的感觉。

有什么建议吗？提前谢谢。

Answer 1

动画图像非常简单。您需要做的就是提供图像及其顺序（数组）还有某种计时器

function Animation(images, timePerImage) {
    this.images = images;                     // array of rabbit images
    this.currentTime = 0;                     // timer
    this.currentImage = 0;                    // current rabbit image
    this.imageCount = images.length;          // amount of images
    this.timePerImage = timePerImage || 100;  // displaytime per image
};

Animation.prototype.constructor = Animation;

// ticker, every frame we add the elapsed time to the current time
// if the current time is bigger than the time per image, then we pick the next index
Animation.prototype.tick = function(elapsed) {
    this.currentTime += elapsed;
    if(this.currentTime >= this.timePerImage) {
        this.currentImage++;
        if(this.currentImage >= this.imageCount) {
            this.currentImage = 0;
        }
        this.currentTime = 0;
    }
};

// gets the image on the current image index
Animation.prototype.getImage = function() {
    return this.images[this.currentImage];
};

// load tha rabbit images
var rabbits = [];
for(var i = 0; i < 6; i++) {
    rabbits[i] = new Image();
    rabbits[i].src = "imgs/rabbit-image" + (i+1) + ".jpg";
    // if you are not using canvas, then you could just do:
    // rabbits[i] = "imgs/rabbit-image" + (i+1) + ".jpg";
}

// create the animation
var rabbit = new Animation(rabbits);

// loop
var time = Date.now();
function loop() {
    requestAnimationFrame(loop);
    var elapsed = Date.now() - time;
    time += elapsed;

    // clear your canvas
    // move the rabbit position

    rabbit.tick(elapsed); // call this if the rabbit is still moving
    var image = rabbit.getImage(); // get the current image
    // now draw the image to the rabbit position
}

旁注：画布渲染有几个框架。你可能想看一下pixi.js，它们已经为你处理了动画之类的事情。

如果您不使用画布，那么您可以使用一组字符串而不是使用兔子图像数组。

HTML5创建动画2D图像

1 个答案: