从带有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. 根据您的动画内容,您可以优化您的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