animation - 从带有 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

凯文的建议很好。如果您将帧速率设置为 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。我能想到的有几个优点:

如果您将帧保存在单独的线程中，您的导出将更快/不会影响处理的主动画线程

你的帧会很清晰(假设你在没有太多压缩的情况下保存，因为这个 png 效果最好)

根据您的动画内容，您可以 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