主要内容
动画场景
我们已经知道了如何制作多个简单场景——但我们的场景是”静态的“——它们不是动画, 也没有跟用户有交互。之后我们会发现,处理更精彩的场景需要更多的技巧。来吧,做点酷炫的事情!
首先是动画。如果我们想展示小文在当摇滚明星时,努力敲鼓的样子,该怎么做呢?我们通常会定义
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 中听到节拍!