【Processing-日常3】等待动画1

还记得守望先锋加入游戏的时候，出现的等待画面吗？今天我们用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);