从带有 Gif 动画库的处理草图中导出 gif

Question

我想将我的一个处理草图导出为 gif 格式，并使用 extrapixel 的 Gif 动画库 (http://extrapixel.github.io/gif-animation/) 来执行此操作。

我能够导出正确数量的帧，但它们似乎都是空的。
任何想法为什么会发生这种情况？

import gifAnimation.*;

GifMaker gifExport;

float angle = 0.1;

void setup() {
  size(500, 500);
  smooth();
  noStroke();
  background(0);

  frameRate(12);
  gifExport = new GifMaker(this, "spin rect sine growth.gif");
  gifExport.setRepeat(0); // make it an "endless" animation
  gifExport.setTransparent(255); // make white the transparent color -- match browser bg color
}

void draw() {

  float size = map(sin(angle),-1,1,0,height);
  rectMode(CENTER);
  translate(width/2, height/2);
  rotate(angle);
  noStroke();
  fill(255,255);
  rect(0,0, size, size);
  angle += 0.0523 ;

  noStroke();
  fill( 0, 15);
  rect(0, 0, width, height);

  gifExport.setDelay(0);  //maybe no delay?
  gifExport.addFrame();

  if (frameCount == 120) gifExport.finish();  
}

Answer 1

Kevin 的建议很好。如果您将帧速率设置为 12，也许您还应该将延迟设置为 1000/12。

import gifAnimation.*;

GifMaker gifExport;

float angle = 0.1;

void setup() {
  size(500, 500);
  smooth();
  noStroke();
  background(0);

  frameRate(12);
  gifExport = new GifMaker(this, "spin rect sine growth.gif");
  gifExport.setRepeat(0); // make it an "endless" animation
  gifExport.setTransparent(255); // make white the transparent color -- match browser bg color
  gifExport.setDelay(1000/12);  //12fps in ms

}

void draw() {

  float size = map(sin(angle),-1,1,0,height);
  rectMode(CENTER);
  translate(width/2, height/2);
  rotate(angle);
  noStroke();
  fill(255,255);
  rect(0,0, size, size);
  angle += 0.0523 ;

  noStroke();
  fill( 0, 15);
  rect(0, 0, width, height);

  gifExport.addFrame();

  if (frameCount == 120) gifExport.finish();  
}

我已经测试过，它似乎工作得很好：

在某种程度上，gifAnimation 库很方便，因为它为您处理编码帧，但请注意这里和那里有一些错误的帧。

如果您想完全控制帧，您可以导出图像序列并使用Image Magick 之类的东西将序列转换为 gif。我可以想到几个优点：

1. 如果您将帧保存在单独的线程中，您的导出速度会更快/不会对处理的主动画线程产生太大影响
2. 你的帧会很清晰（假设你在没有太多压缩的情况下保存，因为这个 png 效果最好）
3. 根据您的动画内容，您可以optimize your gif，这样加载时对网络/设备更友好。

这是另一个没有故障的 gif：

它一直在使用此代码导出：

float angle = 0.1;

void setup() {
  size(500, 500);
  smooth();
  noStroke();
  background(0);

  frameRate(12);
}

void draw() {

  float size = map(sin(angle),-1,1,0,height);
  rectMode(CENTER);
  translate(width/2, height/2);
  rotate(angle);
  noStroke();
  fill(255,255);
  rect(0,0, size, size);
  angle += 0.0523 ;

  noStroke();
  fill( 0, 15);
  rect(0, 0, width, height);

  if(frameCount <= 120){
    TImage frame = new TImage(width,height,RGB,sketchPath("frame_"+nf(frameCount,3)+".png"));
    frame.set(0,0,get());
    frame.saveThreaded();
  }
}
class TImage extends PImage implements Runnable{//separate thread for saving images
  String filename;

  TImage(int w,int h,int format,String filename){
    this.filename = filename;
    init(w,h,format);
  }

  public void saveThreaded(){
    new Thread(this).start();
  }

  public void run(){
    this.save(filename);
  }

}

并且通过导航到草图文件夹并运行来转换图像序列

convert *.png spin_anim.gif

如果你只是想调整它的大小：

convert spin_anim.gif -resize 100x100 spin_anim_small.gif

HTH