0

我想为未来的游戏制作动画“原型”。但我完全是 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 秒，一个矩形（随机选择）改变颜色，用户必须点击它。
  • 用户有 5 秒的时间点击它，如果他没有点击，矩形会变成开始的颜色。

我希望解释清楚，并且可以帮助我，因为我完全迷路了。

4

3 回答 3

1

您应该将 Kinetic.Animation 用于动画，因为它优化了重绘。 这是一个例子

如果您的游戏使用精灵，您应该使用精灵形状。这是一个例子

于 2013-06-16T16:09:48.673 回答
0

我是这里的新手，但我希望我能提供帮助。KineticJS 不需要 requestAnimationFrame，因为它已经有了处理动画的东西。所以首先我认为你应该看看这个页面

如果你想让矩形的颜色每 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);

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

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();

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

ps对不起我的英语，我只是一个可怜的意大利学生

pps 我确定代码可以优化，但现在我认为它可以没问题

于 2013-06-10T21:52:07.737 回答
0

考虑到你想要的动画类型，你不需要requestAnimationFrame或Kinetic.Animation处理这个。仅当您需要每帧更改动画状态时才使用动画。

请参阅此工作演示。

使用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);
于 2013-06-10T23:58:36.940 回答