Openframeworks制作Gif动图
之前写过两篇在 Processing 下制作 Gif 动图的文章。
今天分享一个在 Openframeworks 下快速制作 Gif 动图的方法。
下载 ofxGifEncoder
首先需要用到一个库,叫 ofxGifEncoder,专门用于录制和导出 Gif。作者是 jesusgollonet ,最新版已支持 0.9。
在官网的 addons 目录上搜索 ofxGifEncoder。或通过下面链接直接下载。(
下载后,会得到一个名为 ofxGifEncoder-master 的文件夹。把后缀 “-master” 去掉,改名为“ofxGifEncoder” 并放到 OF 所在文件的 addons 中,即能正常使用。
创建类
库中自带了一个 example,但写得不算通俗,使起来也不方便。自己重新写了一个类,将常用函数打包起来。结合它就可以快速地制作 Gif。
下面是这个类的完整代码:
class WenzyGif{
public:
int frameW, frameH;
ofxGifEncoder gifEncoder;
ofImage screenImg;
bool recordOnOff;
void setup(){
frameW = 400; // 设置导出 gif 的宽
frameH = frameW * ofGetHeight()/(float)ofGetWidth(); // 高度自动按原比例进行调整
gifEncoder.setup(frameW, frameH, .25, 256);
screenImg.allocate(frameW,frameH, OF_IMAGE_COLOR_ALPHA);
}
void update(){
int ins = 3; // 影响导出的 gif 速度(间隔多少帧,截屏一次)
if(ofGetFrameNum() % ins == 0 && recordOnOff){
screenImg.grabScreen(0,0,ofGetWidth(),ofGetHeight());
screenImg.resize(frameW,frameH);
gifEncoder.addFrame(screenImg,1 /(60.0 / ins));
}
}
void keyPressed(int key){
if(key == 'b'){
gifEncoder.reset();
recordOnOff = true;
cout << "press" << endl;
}
if(key == 's'){
gifEncoder.save(ofToString(ofGetFrameNum()) + ".gif");
recordOnOff = false;
}
}
void exit(){
gifEncoder.exit();
}
};
这个类名为 “ WenzyGif.h ”,你也可以根据自己的喜好进行命名。要创建这个文件,可以在 xcode 中直接新建。或创建一个 txt 文档,将后缀修改成 “.h”,复制以上内容即可。
使用方法
准备工作完毕后,就能开始使用。
1.首先在工程文件中引入库 ofxGifEncoder。
- 若是使用 Xcode,可以安装插件 OFXcodeMenu 快速引入
2.引入 “WenzyGif.h”,可把 “ WenzyGif.h ” 拖动到左方。
3.Xcode 中会出现提示,勾选” Copy items if needed “,并点击 “ Finish ”
4.在原有工程文件 ofApp.cpp 和 ofApp.h 中,写四行代码。
—- ofApp.cpp 内
#include "WenzyGif.h"
class ofApp : public ofBaseApp{
public:
void setup();
void update();
void draw();
...
// 原代码
WenzyGif gif;
}
—- ofApp.h 内
void ofApp::setup(){
// 原代码
gif.setup();
}
void ofApp::update(){
// 原代码
gif.update();
}
void ofApp::draw(){
// 原代码
}
void ofApp::keyPressed(int key){
// 原代码
gif.keyPressed(key);
}
5.大功告成~此时就能正常使用。按 B 键就会开始录制 Gif,按 S 键就会保存 Gif。生成后文件会自动存放到 data 文件中。由于 Gif 的处理需要时间,建议间隔几秒后才关闭窗口。处理速度取决于录制的分辨率和时长。
最后的注意事项
第一次使用 ofxGifEncoder 库时,可能会出现缺少 “ofxGifFrame.h” 的提示
解决方法是在出错的文件处,用斜线杠掉。不影响正常。
完整工程文件-Test 82
现在你也可以享受制作 Gif 动图的乐趣了~下面提供一个完整的工程文件
程序运行视频:
https://v.qq.com/txp/iframe/player.html?vid=x0185s3lh7c&width=500&height=375&auto=0
录制输出的 Gif:
程序使用方法:
- 左上角的控制面板可调节各项参数
- q 键显示/隐藏控制面板
- b 键开始录制 Gif
s 键保存 Gif
点击阅读原文即可下载