Javascript 如何在Kinetic.js中利用画布图像制作动画？

我有下面的代码，应该是一个动画的三个帧，我怎样才能将它们转换为动能.js中的动画？它是一个妖术般的吃豆人，能张开和闭上嘴巴。 我有三个画布图像，作为三个框架，在Kinetic.js中是否有任何内置函数来实现这一点？或者我应该从头开始创建一个？在我制作了精灵之后，我怎样才能在不破坏动画的情况下做其他的动画，比如移动它，或者旋转它。吃豆人仍然应该张开和闭上它的嘴

        pacMan1 = new Kinetic.Shape({
            x: 15,
            y: 13,
            //fill: 'rgb(62, 53, 67)',
            // a Kinetic.Canvas renderer is passed into the drawFunc function
            drawFunc: function (canvas) {
                var context = canvas.getContext();
                // layer1/Compound Path
                context.save();
                context.beginPath();

                // layer1/Compound Path/Path
                context.moveTo(54.0, 12.8);
                context.lineTo(34.2, 1.4);
                context.bezierCurveTo(31.2, -0.3, 27.6, -0.3, 24.7, 1.4);
                context.lineTo(4.9, 12.8);
                context.bezierCurveTo(1.9, 14.5, 0.1, 17.7, 0.1, 21.0);
                context.lineTo(0.1, 43.9);
                context.bezierCurveTo(0.1, 47.3, 1.9, 50.5, 4.9, 52.1);
                context.lineTo(24.7, 63.6);
                context.bezierCurveTo(27.6, 65.3, 31.2, 65.3, 34.2, 63.6);
                context.lineTo(54.0, 52.1);
                context.bezierCurveTo(56.9, 50.5, 58.7, 47.3, 58.7, 43.9);
                context.lineTo(58.7, 21.0);
                context.bezierCurveTo(58.7, 17.7, 56.9, 14.5, 54.0, 12.8);
                context.closePath();

                // layer1/Compound Path/Path
                context.moveTo(32.3, 10.8);
                context.bezierCurveTo(30.7, 10.8, 29.5, 9.5, 29.5, 8.0);
                context.bezierCurveTo(29.5, 6.4, 30.7, 5.1, 32.3, 5.1);
                context.bezierCurveTo(33.9, 5.1, 35.1, 6.4, 35.1, 8.0);
                context.bezierCurveTo(35.1, 9.5, 33.9, 10.8, 32.3, 10.8);
                context.closePath();
                context.fillStyle = "rgb(62, 53, 67)";
                context.fill();
                context.lineWidth = 0.3;
                context.stroke();
                canvas.fillStroke(this);
                context.restore();
            }
        });
        pacMan2 = new Kinetic.Shape({
            x: 15,
            y: 13,
            //fill: 'rgb(62, 53, 67)',
            // a Kinetic.Canvas renderer is passed into the drawFunc function
            drawFunc: function (canvas) {
                var context = canvas.getContext();
                // layer1/Compound Path
                context.save();
                context.beginPath();

                // layer1/Compound Path/Path
                context.moveTo(29.1, 36.9);
                context.bezierCurveTo(27.6, 36.0, 26.7, 34.5, 26.7, 32.8);
                context.bezierCurveTo(26.7, 31.2, 27.6, 29.6, 29.1, 28.8);
                context.lineTo(55.2, 13.7);
                context.bezierCurveTo(54.8, 13.4, 54.4, 13.1, 54.0, 12.8);
                context.lineTo(34.2, 1.4);
                context.bezierCurveTo(31.2, -0.3, 27.6, -0.3, 24.7, 1.4);
                context.lineTo(4.9, 12.8);
                context.bezierCurveTo(1.9, 14.5, 0.1, 17.7, 0.1, 21.0);
                context.lineTo(0.1, 43.9);
                context.bezierCurveTo(0.1, 47.3, 1.9, 50.5, 4.9, 52.1);
                context.lineTo(24.7, 63.6);
                context.bezierCurveTo(27.6, 65.3, 31.2, 65.3, 34.2, 63.6);
                context.lineTo(54.0, 52.1);
                context.bezierCurveTo(54.2, 52.0, 54.5, 51.8, 54.7, 51.7);
                context.lineTo(29.1, 36.9);
                context.closePath();

                // layer1/Compound Path/Path
                context.moveTo(32.3, 5.1);
                context.bezierCurveTo(33.9, 5.1, 35.1, 6.4, 35.1, 8.0);
                context.bezierCurveTo(35.1, 9.5, 33.9, 10.8, 32.3, 10.8);
                context.bezierCurveTo(30.7, 10.8, 29.5, 9.5, 29.5, 8.0);
                context.bezierCurveTo(29.5, 6.4, 30.7, 5.1, 32.3, 5.1);
                context.closePath();
                context.fillStyle = "rgb(62, 53, 67)";
                context.fill();
                context.lineWidth = 0.3;
                context.stroke();
                canvas.fillStroke(this);
                context.restore();
            }
        });
        pacMan3 = new Kinetic.Shape({
            x: 15,
            y: 13,
            //fill: 'rgb(62, 53, 67)',
            // a Kinetic.Canvas renderer is passed into the drawFunc function
            drawFunc: function (canvas) {
                var context = canvas.getContext();
                    // layer1/Compound Path
                    context.save();
                    context.beginPath();

                    // layer1/Compound Path/Path
                    context.moveTo(32.0, 36.9);
                    context.bezierCurveTo(28.7, 36.0, 26.7, 34.5, 26.7, 32.8);
                    context.bezierCurveTo(26.7, 31.2, 28.7, 29.6, 32.0, 28.8);
                    context.lineTo(58.7, 22.0);
                    context.lineTo(58.7, 21.0);
                    context.bezierCurveTo(58.7, 17.7, 56.9, 14.5, 54.0, 12.8);
                    context.lineTo(34.2, 1.4);
                    context.bezierCurveTo(31.2, -0.3, 27.6, -0.3, 24.7, 1.4);
                    context.lineTo(4.9, 12.8);
                    context.bezierCurveTo(1.9, 14.5, 0.1, 17.7, 0.1, 21.0);
                    context.lineTo(0.1, 43.9);
                    context.bezierCurveTo(0.1, 47.3, 1.9, 50.5, 4.9, 52.1);
                    context.lineTo(24.7, 63.6);
                    context.bezierCurveTo(27.6, 65.3, 31.2, 65.3, 34.2, 63.6);
                    context.lineTo(54.0, 52.1);
                    context.bezierCurveTo(56.9, 50.5, 58.7, 47.3, 58.7, 43.9);
                    context.lineTo(58.7, 43.7);
                    context.lineTo(32.0, 36.9);
                    context.closePath();

                    // layer1/Compound Path/Path
                    context.moveTo(32.3, 5.1);
                    context.bezierCurveTo(33.9, 5.1, 35.1, 6.4, 35.1, 8.0);
                    context.bezierCurveTo(35.1, 9.5, 33.9, 10.8, 32.3, 10.8);
                    context.bezierCurveTo(30.7, 10.8, 29.5, 9.5, 29.5, 8.0);
                    context.bezierCurveTo(29.5, 6.4, 30.7, 5.1, 32.3, 5.1);
                    context.closePath();
                    context.fillStyle = "rgb(62, 53, 67)";
                    context.fill();
                    context.lineWidth = 0.3;
                    context.stroke();
                    canvas.fillStroke(this);
                    context.restore();
                }
        });

您可以使用带有switch语句的Kinetic.Animation来确定要显示的帧，如下所示：

    var group = new Kinetic.Group({
        x:10,
        y:10
    });

    group.add(pacMan1);
    group.add(pacMan2);
    group.add(pacMan3);
    layer.add(group);
    layer.draw();

    pacMan2.hide();
    pacMan3.hide();

    var frameCount = 0;
    var anim = new Kinetic.Animation(function (frame) {
        frameCount++;
        var mod = frameCount % 30;
        switch (mod) {
            case 0:
                pacMan1.show();
                pacMan2.hide();
                pacMan3.hide();
                break;
            case 10:
                pacMan1.hide();
                pacMan2.show();
                pacMan3.hide();
                break;
            case 20:
                pacMan1.hide();
                pacMan2.hide();
                pacMan3.show();
                break;
        }
        group.setX(group.getX()+1);
    }, layer);

    anim.start();

通过更改模公式和案例编号，可以加快帧的速度

//Faster
var mod = frameCount % 3;
switch (mod) {
    case 0:
        break;
    case 1:
        break;
    case 2:
        break;
}

//Slower
var mod = frameCount % 300;
switch (mod) {
    case 0:
        break;
    case 100:
        break;
    case 200:
        break;
}

如果你想让他移动得比改变x增加的间隔快：

//Move 5 pixels every frame.
group.setX(group.getX()+5);

这不是一个很好的答案，但这是一个开始

相反 我想用toImage方法把你的六边形变成图像，然后在一个动能精灵中使用它

和教程：

但是，我认为问题是你需要为精灵设置一个图像，比如：

理想情况下，出于您的目的，我认为使用Kinetic.Sprite是您需要的，因此如果您可以使用pac man形状设置基于Sprite的图像，那么您将可以使用Sprite完成大量工作。

您可以使用Kinetic.Animation和switch语句来确定要显示的帧，大概是这样的：

    var group = new Kinetic.Group({
        x:10,
        y:10
    });

    group.add(pacMan1);
    group.add(pacMan2);
    group.add(pacMan3);
    layer.add(group);
    layer.draw();

    pacMan2.hide();
    pacMan3.hide();

    var frameCount = 0;
    var anim = new Kinetic.Animation(function (frame) {
        frameCount++;
        var mod = frameCount % 30;
        switch (mod) {
            case 0:
                pacMan1.show();
                pacMan2.hide();
                pacMan3.hide();
                break;
            case 10:
                pacMan1.hide();
                pacMan2.show();
                pacMan3.hide();
                break;
            case 20:
                pacMan1.hide();
                pacMan2.hide();
                pacMan3.show();
                break;
        }
        group.setX(group.getX()+1);
    }, layer);

    anim.start();

通过更改模公式和案例编号，可以加快帧的速度

//Faster
var mod = frameCount % 3;
switch (mod) {
    case 0:
        break;
    case 1:
        break;
    case 2:
        break;
}

//Slower
var mod = frameCount % 300;
switch (mod) {
    case 0:
        break;
    case 100:
        break;
    case 200:
        break;
}

如果你想让他移动得比改变x增加的间隔快：

//Move 5 pixels every frame.
group.setX(group.getX()+5);

这不是一个很好的答案，但这是一个开始

相反 我想用toImage方法把你的六边形变成图像，然后在一个动能精灵中使用它

和教程：

但是，我认为问题是你需要为精灵设置一个图像，比如：

理想情况下，我认为使用Kinetic.Sprite是你想要的，因此如果你能用你的pac man形状设置基于Sprite的图像，那么你就可以用Sprite做很多事情。

以下是如何从“chomping hexes”创建Kinetic.Sprite动画

因为已经有了hex+mouth坐标，所以甚至不需要预先创建的精灵表

您可以使用html画布元素动态创建咀嚼精灵表

方法：

从一个临时html画布元素开始 在画布上画出你所有的咀嚼六角体 使用canvas.toDataURL将该画布转换为精灵表图像 通常使用该精灵表来运行Kinetic.Sprite动画 这是从html画布创建的动态创建的精灵表

下面的代码显示屏幕上的画布以便于演示，但您需要在屏幕外创建临时画布

下面是代码和小提琴：

下面是如何从你的“咀嚼六角体”创建一个动态的精灵动画

因为已经有了hex+mouth坐标，所以甚至不需要预先创建的精灵表

您可以使用html画布元素动态创建咀嚼精灵表

方法：

从一个临时html画布元素开始 在画布上画出你所有的咀嚼六角体 使用canvas.toDataURL将该画布转换为精灵表图像 通常使用该精灵表来运行Kinetic.Sprite动画 这是从html画布创建的动态创建的精灵表

下面的代码显示屏幕上的画布以便于演示，但您需要在屏幕外创建临时画布

下面是代码和小提琴：

---

如何启动动画？我使用pac.setAnimationchomp；在开始动画的代码末尾，但我得到TypeError:“undefined”不是计算“pac.setAnimation”@igaar的对象。您是否解决了未定义的错误？由于pac对象是在函数内部构建的，因此请确保在全局访问var pac的函数外部定义它；函数外部。如何启动动画？我使用pac.setAnimationchomp；在开始动画的代码末尾，但我得到TypeError:“undefined”不是计算“pac.setAnimation”@igaar的对象。您是否解决了未定义的错误？由于pac对象是在函数内部构建的，因此请确保在全局访问var pac的函数外部定义它；在功能之外。