If you're seeing this message, it means we're having trouble loading external resources on our website.

如果你被网页过滤器挡住,请确保域名*.kastatic.org*.kasandbox.org 没有被阻止.

主要内容

动画场景

我们已经知道了如何制作多个简单场景——但我们的场景是”静态的“——它们不是动画, 也没有跟用户有交互。之后我们会发现,处理更精彩的场景需要更多的技巧。来吧,做点酷炫的事情!
首先是动画。如果我们想展示小文在当摇滚明星时,努力敲鼓的样子,该怎么做呢?我们通常会定义draw 函数,在其中写入让图形在每一帧稍微移动位置的代码。下面是一个示例,其中击鼓手的位置基于 millis() 值,即当前的毫秒数:
如果我们要将其作为场景4加入到之前的例子中,那么我们把代码放进 drawScene4() 函数中,并修改 mouseClicked
var drawScene4 = function() {
    currentScene = 4;
    background(194, 255, 222);

    var x = cos(millis()*1); 
    var y = cos(millis()+98);

    ...
 };

 mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene4();
    } else if (currentScene === 4) {
        drawScene1();
    }
};
示例如下——试着点击几次:
注意到了吗?我们只成功了一部分。我们可以看到小文和他的鼓,但鼓锤并没有动。很悲惨,时间停止的话可没办法做音乐。也许你已经发现了这个问题:我们没在 draw() 内调用绘制鼓锤的程序,所以绘制部分只运行了一次——而不是重复运行——只在第一次运行的时候绘制了鼓锤。也许你也已经猜到了解决方案:定义一个draw() 函数,并在合适的时候调用 drawScene4()
draw = function() {
    if (currentScene === 4) {
        drawScene4();
    }
};
我们仔细想想:每当我们在代码中定义一个 draw() 函数,它就会被反复调用(默认为 60 FPS),而当它被调用,并且当前场景值为4,它就会调用函数来绘制场景4。如果当前场景值为其他值,它就不会绘制任何东西——它会保留屏幕上已经存在的东西。我们仍然需要在 mouseClicked 中进行场景绘制,它负责场景之间的切换。
也许你会想:为什么不用 draw() 来绘制 每一个 场景呢?当然可以,这意味着如果你在其他场景中添加动画,动画会马上动起来。但如果你没有在其他场景中添加动画,这意味着你正在 毫无理由的 反复绘制这些场景。从性能的角度看这并不好,我们应该尽可能的避免电脑做不必要的工作。这将使我们的程序更快,用户更满意。
好吧,现在我们已经讨论过这一切了,下面就是我们可点击的、带动画的故事书。你几乎可以从场景 4 中听到节拍!

想加入讨论吗?

尚无帖子。
你会英语吗?单击此处查看更多可汗学院英文版的讨论.