Processing 状态量控制动画技巧

来源：互联网发布：英雄无敌5 mac 编辑：程序博客网时间：2024/05/16 10:42

Processing 状态量控制动画技巧

本章介绍Processing 状态量控制动画技巧。分三个小例子供大家参考。

一、状态量state控制圆缩放动画

使用if语句搭配state控制量可以控制动画，如下：

int ellipse_r = 100;//定义并初始化圆的大小（直径）int state = 0;      //定义状态量state，缺省值0；void setup(){  size(500, 500);}void draw(){  background(0);  if (state == 0)  {    ellipse_r ++;  }  if (state == 1)  {    ellipse_r --;  }  if (ellipse_r >= 250)  {    state = 1;  }  if (ellipse_r <= 50)  {    state = 0;  }  ellipse(width/2, height/2, ellipse_r, ellipse_r);}

如图所示：
这里写图片描述

二、状态量控制红绿灯

state状态量控制红绿灯，循环切换状态，如下：

int ellipse_r = 100;//定义并初始化圆的大小（直径）int state = 0;      //定义状态量state，缺省值0；boolean FLASH = false;//闪烁开关int timecount;      //计时器float oldtime;      //过去的时刻void setup(){  size(500, 500);  oldtime = millis();}void draw(){  UpdateState();  Display();}void UpdateState(){  if (millis() - oldtime >=1000)  {    timecount ++;    oldtime = millis();  }  println(timecount);  if (timecount <= 2)    state = 0;  else if (timecount > 2 && timecount <=5)    state = 1;  else if (timecount > 5 && timecount <=6)    state = 2;  else if (timecount > 6 && timecount <=8)    state = 3;  else if (timecount > 8)    timecount = 0;  if (state == 1)  {    if (second() %2 == 0)      FLASH = true;    else      FLASH = false;  }}void Display(){  background(0);  switch(state)  {  case 0:        //绿灯亮    noStroke();    fill(0, 250, 0);    ellipse(width/2-200, height/2, 100, 100);    break;  case 1:        //绿灯闪烁    noStroke();    fill(0, 250, 0);    if (FLASH)      ellipse(width/2-200, height/2, 100, 100);    break;  case 2:        //黄灯亮    noStroke();    fill(255, 210, 0);    ellipse(width/2, height/2, 100, 100);    break;  case 3:        //红灯亮    noStroke();    fill(250, 0, 0);    ellipse(width/2+200, height/2, 100, 100);    break;  }}

如图：
这里写图片描述

三、状态量控制矩阵

使用状态量控制LED灯阵；

ArrayList<LED> ledlist;      //定义动态列表（也可用普通列表）int ledwidth = 75;          boolean ispressed = false;void setup(){  size(500, 500);  ledlist = new ArrayList<LED>();  LED led1 = new LED(width/2-ledwidth-100, height/2-ledwidth-100, ledwidth);  LED led2 = new LED(width/2-ledwidth-100, height/2, ledwidth);  LED led3 = new LED(width/2-ledwidth-100, height/2+ledwidth+100, ledwidth);  LED led4 = new LED(width/2, height/2-ledwidth-100, ledwidth);  LED led5 = new LED(width/2, height/2, ledwidth);  LED led6 = new LED(width/2, height/2+ledwidth+100, ledwidth);  LED led7 = new LED(width/2+ledwidth+100, height/2-ledwidth-100, ledwidth);  LED led8 = new LED(width/2+ledwidth+100, height/2, ledwidth);  LED led9 = new LED(width/2+ledwidth+100, height/2+ledwidth+100, ledwidth);  ledlist.add(led1);  ledlist.add(led2);  ledlist.add(led3);  ledlist.add(led4);  ledlist.add(led5);  ledlist.add(led6);  ledlist.add(led7);  ledlist.add(led8);  ledlist.add(led9);}void draw(){  background(0);  for(int i=0;i < ledlist.size(); i++)        //遍历绘画函数  {    LED led = ledlist.get(i);    led.draw();  }}void mousePressed(){    for(int i=0;i < ledlist.size(); i++)  {    LED led = ledlist.get(i);    led.update();                              //当鼠标点击时更新状态  }}

LED类定义：

class LED {  int x;//X轴向位置  int y;//Y轴线位置  int state;//状态量  int k;//开关变量（参考本节第一个小例子）  int w;//大小  int degs;//角度  int c;//颜色（色相值）  LED(int x_, int y_, int w_) {    //构造函数初始化变量    x = x_;    y = y_;    w = w_;    c = (int)random(0,360);        //初始化随机赋颜色    state = 0;    k = 0;    degs = 0;  }  void update()                    //检测鼠标是否悬停在方框内  {    if (overRect(x-w/2, y-w/2, w, w))    {      state ++;                    //鼠标点击，三种状态循环切换      if (state >= 3)      {        state = 0;      }    }   }  void draw()  {    colorMode(HSB,360,100,100);    //使用HSB颜色模型    if (state == 0)                //第一种情况，呈现原有状态    {      pushMatrix();      translate(x, y);      rotate(radians(degs));      fill(c,100,100);      noStroke();      rectMode(CENTER);      rect(0, 0, w, w);      popMatrix();    } else if (state == 1)          //第二种情况，旋转方框    {      pushMatrix();      translate(x, y);      rotate(radians(++degs));      fill(c,100,100);      noStroke();      rectMode(CENTER);      rect(0, 0, w, w);      popMatrix();    } else if (state == 2)            //第三种情况，改变颜色    {      pushMatrix();      translate(x, y);      rotate(radians(degs));      if (k == 0)        c ++;      if (k == 1)        c --;      if (c <=0)      {        c = 0;        k = 0;      }      if (c >= 360)      {        c = 360;        k = 1;      }      fill(c,100,100);      noStroke();      rectMode(CENTER);      rect(0, 0, w, w);      popMatrix();    }  }  boolean overRect(int x, int y, int width, int height) {    if (mouseX >= x && mouseX <= x+width &&       mouseY >= y && mouseY <= y+height) {      return true;    } else {      return false;    }  }}

如图：

这里写图片描述

总结：    把更新数据和绘画渲染的工作分开来处理，在更新数据的模块里相应的设置state状态所控制的内容，然后在绘画渲染的模块里检索state的值，相应的更改绘画的模式或者属性。

1 0