老师，我再也不怕Processing动图啦 - 深度解析Processing图片序列帧动画

import gifAnimation.*;

PImage[] animation;
Gif loopingGif;
Gif nonLoopingGif;

boolean pause = false;

public void setup() {
  size(800, 300);
  frameRate(60);
  
  println("gifAnimation " + Gif.version());
  
  // 一个循环播放的gif动画
  loopingGif = new Gif(this, "demo.gif");
  loopingGif.loop();
  
  // 一个不循环播放的gif动画，只播放一次，通过ignoreRepeat控制
  nonLoopingGif = new Gif(this, "demo.gif");
  nonLoopingGif.play();
  nonLoopingGif.ignoreRepeat();
  
  // 获取到gif中的所有图片，保存到PImage[]数组中
  animation = Gif.getPImages(this, "demo.gif");
}

void draw() {
  background(255);
  
  // 绘制循环gif
  image(loopingGif, 10, height / 2 - loopingGif.height / 2);
  // 绘制不循环gif，mousePressed函数中点击鼠标可以再次播放一次
  image(nonLoopingGif, width/2 - nonLoopingGif.width/2, height / 2 - nonLoopingGif.height / 2);
  
  // 这个例子中使用鼠标的x位置来map映射到gif内部图片数组的播放进度
  int animationIndex = (int)(map(mouseX, 0, width, 0, animation.length - 1));
  float gifWidth = animation[0].width;
  float gifHeight = animation[0].height;
  image(animation[animationIndex], width - 10 - gifWidth, height / 2 - gifHeight / 2);
}

void mousePressed() {
  nonLoopingGif.play();
}

void keyPressed() {
  // 敲击空格键
  if (key == ' ') {
    // 如果动画已经暂停，则播放，否则暂停
    if (pause) {
      nonLoopingGif.play();
      loopingGif.play();
      pause = false;
    } 
    else {
      nonLoopingGif.pause();
      loopingGif.pause();
      pause = true;
    }
  }
}

gifAnimation 2.3
NoSuchMethodError: 'java.io.InputStream processing.core.PApplet.openStream(java.lang.String)'

Animation animation1, animation2;

float xpos;
float ypos;
float drag = 30.0;

void setup() {
  size(640, 360);
  background(255, 204, 0);
  frameRate(24);
  
  // PT_Shifty_0000 - PT_Shifty_0037，PT_Shifty_作为图片名前缀的图片序列帧一共38张图
  animation1 = new Animation("PT_Shifty_", 38);
  // PT_Teddy_0000 - PT_Teddy_0059，PT_Teddy_作为图片名前缀的图片序列帧一共60张图
  animation2 = new Animation("PT_Teddy_", 60);
  
  ypos = height * 0.25;
}

void draw() { 
  float dx = mouseX - xpos;
  xpos = xpos + dx/drag;

  // Display the sprite at the position xpos, ypos
  if (mousePressed) {
    background(153, 153, 0);
    animation1.display(xpos-animation1.getWidth()/2, ypos);
  } else {
    background(255, 204, 0);
    animation2.display(xpos-animation1.getWidth()/2, ypos);
  }
}

class Animation {
  PImage[] images;
  int imageCount;
  int frame;
  
  Animation(String imagePrefix, int count) {
    imageCount = count;
    images = new PImage[imageCount];

    // 根据图片数量，遍历加载图片，保存到PImage「」数组中
    for (int i = 0; i < imageCount; i++) {
      // Use nf() to number format 'i' into four digits
      String filename = imagePrefix + nf(i, 4) + ".gif";
      images[i] = loadImage(filename);
    }
  }

  // frame每帧加1，通过对 imageCount 取余来实现循环
  void display(float xpos, float ypos) {
    frame = (frame+1) % imageCount;
    image(images[frame], xpos, ypos);
  }
  
  int getWidth() {
    return images[0].width;
  }
}

class Animation {
  PImage[] images;
  int imageCount;
  int frame;
  float frameSum = 0;
  float speed = 0.6;
  
  Animation(String imagePrefix, int count) {
    imageCount = count;
    images = new PImage[imageCount];

    // 根据图片数量，遍历加载图片，保存到PImage「」数组中
    for (int i = 0; i < imageCount; i++) {
      // Use nf() to number format 'i' into four digits
      String filename = imagePrefix + nf(i, 4) + ".png";
      images[i] = loadImage(filename);
    }
  }

  // frame每帧加speed，通过对 imageCount 取余来实现循环
  void display(float xpos, float ypos) {
    frameSum += speed;
    frame = int((frameSum + speed) % imageCount);
    image(images[frame], xpos, ypos);
  }
  
  int getWidth() {
    return images[0].width;
  }
}

import java.util.*;

PImage spritesheet;
// JSONObject https://processing.org/reference/loadJSONObject_.html
JSONObject spritesheetConfig;

Sprite demoSprite;

float posX;

void setup() {
  size(400, 200);
  
  // 加载精灵图
  spritesheet = loadImage("spritesheet.png");
  // 加载精灵图配置文件，因为配置是json格式，通过 loadJSONObject 保存到 JSONObject 中
  spritesheetConfig = loadJSONObject("spritesheet.json");
  
  // 精灵图初始化，传入精灵图和配置以及播放速度
  demoSprite = new Sprite(spritesheet, spritesheetConfig, 0.2); 
}

void draw() {
  background(255);
  
  posX = (posX + 1) % width;
  // 精灵图在特定位置播放
  demoSprite.display(posX, 0);
}

class Sprite {
  PImage spritesheet;
  JSONObject config;
  ArrayList<PImage> imageArr;
  int frame;
  float frameTotal;
  float animationSpeed;

  Sprite(PImage spritesheet, JSONObject config, float animationSpeed) {
    this.spritesheet = spritesheet;
    this.config = config;
    this.animationSpeed = animationSpeed;
    this.imageArr = new ArrayList();

    // 根据json配置将精灵图的子图通过 get(x, y, width, height) 保存到图片数组中
    JSONObject frames = this.config.getJSONObject("frames");
    Set framesSet = frames.keys();
    ArrayList<String> imageNameArr = new ArrayList(framesSet);
    imageNameArr.sort(Comparator.naturalOrder());
    for (int i = 0; i < imageNameArr.size(); i++) {
      String imageName = imageNameArr.get(i);
      JSONObject frameInfo = frames.getJSONObject(imageName).getJSONObject("frame");
      int imageX = int(frameInfo.getFloat("x"));
      int imageY = int(frameInfo.getFloat("y"));
      int imageWidth = int(frameInfo.getFloat("w"));
      int imageHeight = int(frameInfo.getFloat("h"));
      
      PImage img = this.spritesheet.get(imageX, imageY, imageWidth, imageHeight);
      this.imageArr.add(img);
    }
 
  }

  void display(float x, float y) {
    this.frameTotal += this.animationSpeed;
    
    this.frame = int(this.frameTotal % this.imageArr.size());
    image(this.imageArr.get(this.frame), x, y);
  }
}