从带有Gif动画库的Processing sketch导出gif

Question

我想将我的一个Processing草图导出为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

凯文的建议很好。如果您将帧速率设置为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. 如果您将帧保存在单独的线程中，您的导出将更快/不会影响Processing的主动画线程
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