h5画布动画_画布动画简介

h5画布动画

Animation in the <canvas> element is sufficiently different from traditional CSS, SVG and JavaScript animation that it deserves its own explanation:

<canvas>元素中的动画与传统的CSS ， SVG和JavaScript动画有足够的不同，值得对此进行解释：

一红砖 (One Red Brick)

In traditional HTML, a page is built up from tags and content, creating DOM elements and nodes. The most important aspect to understand about canvas is that, within the <canvas> itself, everything is abstract code: there are no elements to grasp on to and manipulate. This can be disconcerting for those with a background in pure HTML, CSS or SVG, but it’s also somewhat freeing: rather than building things up piece-by-piece, you have the ability to create and destroy at will in the <canvas> space.

在传统的HTML中 ，页面是由标签和内容组成的，并创建DOM元素和节点。 要了解画布，最重要的方面是，在<canvas>本身内， 所有内容都是抽象代码：没有要抓住和操纵的元素。 对于纯HTML，CSS或SVG背景的用户而言，这可能会令人感到不安，但它也有些解放：您可以在<canvas>空间中<canvas>创建和销毁文件，而不必一堆一堆地构建。

We do still have to make a <canvas> element, so let’s start with that:

我们仍然必须做<canvas>元素，所以让我们着手行动：

<canvas id="expanse" width="800" height="600"></canvas>

Adding some CSS:

添加一些CSS：

#expanse { 
    background: #000;
    width: 100%; height: auto;
}

And at the bottom of the page, a script:

在页面底部，有一个脚本：

var expanse = document.getElementById("expanse");
    var context = expanse.getContext("2d");
    context.fillStyle="red";
    context.fillRect(0, 0, 50, 50);

This combination places a red square in he top left corner of a responsive canvas. The problem now is to make it move across to the other side. As with almost all animation, it’s a matter of making small incremental visual changes. We could create a version of this by following the first fillRect with another, just moved 10 pixels to the right:

这种组合在响应式画布的左上角放置了一个红色方块。 现在的问题是使其移到另一侧。 与几乎所有动画一样，这是进行小的增量视觉更改的问题。 我们可以通过在第一个fillRect跟随另一个，仅向右移动10个像素，来创建此版本。

context.fillRect(0, 0, 50, 50);
    context.fillRect(10, 0, 50, 50);

fillRect takes the last fillStyle, so there’s no need to redefine the fill of the rectangle.

fillRect采用最后一个fillStyle ，因此无需重新定义矩形的填充。

This almost works, but you will see, the second rectangle builds on the first; what we need is to clear the previous drawing before adding a new one:

这几乎可行，但是您会看到，第二个矩形建立在第一个矩形的基础上； 我们需要在添加新图纸之前清除上一张图纸：

context.fillRect(0, 0, 50, 50);
    context.clearRect(0, 0, expanse.width, expanse.height);
    context.fillRect(10, 0, 50, 50);

This works, but too well. I’ve previously described the Canvas API as “the world’s fastest Etch-A-Sketch”, and that’s what we see here: the clearRect wipes the expanse of the canvas too quickly to see the first red square. Therefore, we don’t see any animation.

这工作，但太清楚。 之前我曾将Canvas API描述为“世界上最快的蚀刻” ，这就是我们在这里看到的： clearRect擦拭了画布的广阔区域，以至于看不到第一个红色方块。 因此，我们看不到任何动画。

动画砖 (Animating the Brick)

To animate the rectangle, we need to do three things:

要为矩形设置动画，我们需要做三件事：

1. Clear the canvas
   清除画布

2. Draw the rectangle in an incremented new position

   在增加的新位置绘制矩形

3. Loop back to (1) quick enough to fool the human eye into seeing animation (not too fast, but not after too long a delay).
   循环回到(1)足够快的速度，以使人眼看不见动画(不是太快，但不要过长的延迟)。

To accomplish this, we’ll create five new variables and a function:

为此，我们将创建五个新变量和一个函数 ：

var rectWidth = 50,
rectHeight = 50,
posX = 0,
posy = 0,
xInc = 2;

function drawRect() {
    context.clearRect(0, 0, expanse.width, expanse.height);
    context.fillRect(posX += xInc, 0, rectWidth, rectHeight);
}

We’ve made the “brick” dimension dynamic by casting both dimensions as variables; the rectangle’s position on the x and y of the canvas is also dynamic. Each time the function is called, it increments the horizontal position of the rectangle by the amount specified by xInc.

我们通过将两个维度都转换为变量来使“实体”维度动态化。 矩形在画布的x和y上的位置也是动态的。 每次调用该函数时，都会将矩形的水平位置增加xInc指定的xInc 。

To update the position of the brick, we need to call the drawRect() function at regular intervals. We’ll do that using requestAnimationFrame to gain the most efficient performance. We’ll use it once outside the function to initiate the first movement, and again inside the function to do so repeatedly:

要更新积木的位置，我们需要定期调用drawRect()函数。 我们将使用requestAnimationFrame来获得最有效的性能。 我们将在函数外部一次使用它来启动第一个动作，然后在函数内部再次使用它来重复一次：

function drawRect() {
        context.clearRect(0, 0, expanse.width, expanse.height);
        posX += xInc;
        context.fillRect(posX, 0, rectWidth, rectHeight);
        window.requestAnimationFrame(drawRect);
}
window.requestAnimationFrame(drawRect);

If you try this code, you’ll see that the red square goes completely off the edge of the canvas. That’s very inefficient, as the function will continue to move the brick long after it has disappeared from the canvas area. To avoid this, we’ll make the movement conditional on the fact that the right side of the rectangle (i.e. the position of the rectangle + its width) is still visible on the canvas:

如果您尝试使用此代码，则会看到红色方块完全脱离了画布的边缘。 这是非常低效的，因为该功能将在砖块从画布区域消失后继续移动砖块。 为了避免这种情况，我们将以矩形的右侧(即矩形的位置及其宽度)在画布上仍然可见的事实为条件来进行移动：

function drawRect() {
        context.clearRect(0, 0, expanse.width, expanse.height);
        posX += xInc;
        context.fillRect(posX, 0, rectWidth, rectHeight);
        if ((posX + rectWidth) < expanse.width) {
            window.requestAnimationFrame(drawRect);
        }
}

In the example at the top of this article (and the associated CodePen) the function is initiated with a `<button>` element, rather than running automatically.

在本文顶部的示例(以及相关的CodePen )中，该函数是通过一个<button>元素启动的 ，而不是自动运行的。

加快和减慢动画 (Speeding Up & Slowing Down The Animation)

HTML5 canvas is a fairly low-level API: unlike CSS, there’s no immediate control over timing or easing, which is one of the primary reasons that many developers move to using Greensock and similar libraries. requestAnimationFrame takes care of the smoothness of the animation (it automatically updates at 60 FPS, so long as that’s achievable), meaning that we can speed up or slow down the animation by changing the value of xInc:

HTML5 canvas是一个相当低级的API：与CSS不同，它无法立即控制时间或缓动时间 ，这是许多开发人员转而使用Greensock和类似库的主要原因之一。 requestAnimationFrame负责动画的平滑度 (只要可以实现，动画就会以60 FPS自动更新)，这意味着我们可以通过更改xInc的值来加快或减慢动画的xInc ：

xInc = 1;

A lower value will slow down the animation (each loop in the function will move the rectangle less), while increasing the value will speed up the animation. Alternatively, rather than using precise pixel values, we could make xInc relative to the width of the canvas element:

较小的值将减慢动画的速度 (该函数中的每个循环将使矩形移动较少 )，而增大该值将加快动画的速度 。 另外，我们可以使xInc相对于canvas元素的宽度而不是使用精确的像素值：

xInc = expanse.width/100;

Obviously, there’s much more that can be done with canvas animation, but this introduces the very basics; there will be much more to come.

显然，画布动画可以做很多事情，但这引入了非常基本的知识。 将会有更多的未来。

翻译自: https://thenewcode.com/354/Introduction-to-Canvas-Animation

h5画布动画