Question

我想为未来的游戏制作动画的“原型”。但我完全是kineticJS中的菜鸟。

我有一个对象，我可以完成所有功能：

var app = {}

我有一个函数init来构建一个图层，一个舞台并声明我将使用requestAnimationFrame：

init: function(){

    layer = new Kinetic.Layer();

    DrawingTab = [];

    stage = new Kinetic.Stage({
        container: 'canvasDemo',
        width: 800,
        height: 600
    });

    window.requestAnimFrame = (function(){
        return  window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame   ||
        window.mozRequestAnimationFrame      ||
        function(callback){
            window.setTimeout(callback, 1000 / 60);
        };
    })();

}

其次，我有一个功能来构建我的作品：

createObject: function(){
    rect = new Kinetic.Rect({
        x: 50,
        y: 50,
        width: 150,
        height: 150,
        fill: 'black',
        name: 'batteur',
        id: 'batteur'
    });

    rect1 = new Kinetic.Rect({
        x: 300,
        y: 50,
        width: 150,
        height: 150,
        fill: 'black',
        name: 'batteur1',
        id: 'batteur1'
    });

    rect2 = new Kinetic.Rect({
        x: 550,
        y: 50,
        width: 150,
        height: 150,
        fill: 'black',
        name: 'batteur2',
        id: 'batteur2'
    });

    layer.add(rect);
    layer.add(rect1);
    layer.add(rect2);

    stage.add(layer);

    DrawingTab.push(rect,rect1,rect2,rect3,rect4,rect5);

}

这就是我所做的一切。然后，我想知道如何制作这样的动画：

每20个secondes，一个rect（随机选择）颜色变化，并且用户必须单击它。
用户有5秒钟点击它，如果他没有点击，则矩形会变为开始颜色。

我希望解释清楚，有些东西可以帮助我，因为我完全迷失了。

Answer 1

你应该对动画使用Kinetic.Animation，因为它可以优化重绘。 Here's an example

如果您的游戏使用精灵，您应该使用精灵形状。 Here's an example of that

Answer 2

我在这里再见了，但我希望我能够提供帮助。 KineticJS不需要requestAnimationFrame，因为它已经有了处理动画的东西。首先，我认为你应该看看this page

如果你想每20秒更换一次矩形颜色，你可以这样做：

var anim = new Kinetic.Animation(function(frame) {
                if(frame.time > 20000)
                {
                    frame.time = 0;
                    colors = ['red', 'blue', 'violet'];
                    ora = colors[Math.floor(Math.random()*3)];      
                    DrawingTab[Math.floor(Math.random*6)].setAttrs({fill: ora});
                }
            },layer);

然后，对于5秒的东西，我试着写一些东西

var currentRect = { value:0, hasClicked : true };
var anim2 = new Kinetic.Animation(function(frame) {
    if(frame.time > 20000)
    {
            frame.time = 0;
            colors = ['red', 'lightblue', 'violet'];
            ora = colors[Math.floor(Math.random()*3)];
            currentRect.hasClicked = false;
            currentRect.value=Math.floor(Math.random()*6);
            DrawingTab[currentRect.value].setAttrs({fill: ora});
    }
    if (!currentRect.hasClicked && frame.time>5000)
    {
        DrawingTab[currentRect.value].setAttrs({fill: 'black'});
        currentRect.hasClicked = true;
    }

    DrawingTab[currentRect.value].on('click',function(){ if (frame.time<=5000) currentRect.hasClicked = true;});
},layer);

    anim2.start();

我刚刚尝试了类似的东西，看起来它正在工作：）

P.S。抱歉我的英语，我只是一个可怜的意大利学生

p.p.s。我确信代码可以优化，但是现在我认为它可以正常

Answer 3

考虑到您想要的动画类型，您不需要requestAnimationFrame或Kinetic.Animation来处理此问题。如果您需要每帧更改动画状态，请仅使用动画。

请参见此工作DEMO。

使用setInterval和setTimeout应用程序变得更加高效。

我将颜色更改时间缩短为5秒，将点击时间缩短为2秒，以便快速显示功能。

以下是添加的代码：

// times (make changes according)
var timeToChange = 5000; // 5 seconds 
var timeToClick = 2000; // 2 seconds

// render all rects
layer.drawScene();

// add a logical rect for each rect in DrawingTab
var LogicalTab = [];
for (var i = 0; i < DrawingTab.length; ++i) {
    LogicalTab.push({
        isPressed: false,
        frame: 0
    });
}

// return a random integer between (min, max)
function random(min, max) {
    return Math.round(Math.random() * (max - min) + min);
};

// define colors
var colors = ["red", "green", "blue"];

// reset state of current rect
function reset(n) {
    var drect = DrawingTab[n];
    var lrect = LogicalTab[n];

    // check if current rect was clicked
    setTimeout(function () {
        if (!lrect.isPressed) {
            drect.setFill("black");

            // redraw scene
            layer.drawScene();
            lrect.frame = 0;
        }

        // turn off click event
        drect.off("click");
    }, timeToClick);
}

// start the animation
var start = setInterval(function () {
    // select a rect randomly
    var rand = random(0, 2);
    var drect = DrawingTab[rand];
    var lrect = LogicalTab[rand];

    // change color
    drect.setFill(colors[lrect.frame]);

    // redraw scene
    layer.drawScene();

    // flag that current rect is not clicked
    lrect.isPressed = false;

    // check for click events
    drect.on("click", function () {
        // flag that current rect is clicked
        lrect.isPressed = true;

        // hold current color
        lrect.frame++;
        lrect.frame = lrect.frame % colors.length;
    });

    // reset current rect (only if it is not clicked)
    reset(rand);

}, timeToChange);

Kinetic JS中的原型动画

3 个答案: