还记得守望先锋加入游戏的时候,出现的等待画面吗?今天我们用Processing来模拟一下!
先来看一下最后的效果:
分析
首先分析一下这个效果是由哪些元素构成。
1. 有一个基本图形,复制了好多分。
2. 每一个图形按照一种特定的运动规律在做动画。
3. 动画同时伴随着大小、透明度在变化。
OK!我们先来解决第一个问题。可以考虑在Processing中直接绘制出来,使用相应的绘画函数,或者直接定义point,让其连接生成polygon。或者可以直接采用导入素材的方法,使用loadImage()或loadShape()导入图像或图形。而多个图像或图形的复制,只不过是在draw()函数中多次调用相应的绘画模块而已。
对于第二个和第三个问题,就需要使用数学函数了。我们使用sin() 三角函数可以实现缓入缓出的效果。见sin()函数图:
不管是对于大小数值还是颜色数值、透明度数值都可以从0-PI这一范围值做映射至0-1范围。当然注意到每个单位动画频率都不一样而且有着先后顺序的,所以制作的时候应注意。
开始
首先设定好图片:
PImage img;
img = loadImage("sw.png");
之后,创建类,这里我们就定义为cube类:
该类拥有位置属性、透明度属性和一个动画值(便于控制动画)
class Cube {
int x;
int y;
float s;
int al;
Cube(int x_, int y_)
{
x = x_;
y = y_;
}
void draw(float i)
{
s = i*1.0;
al = (int)map(s, 0, 1, 0, 300);