查看: 9908|回复: 7

[入门教程] 趣味编程指南(7)-制作GIF动图

[复制链接]
1.jpg
本来这篇是准备讲下分形的,但是鉴于@gray6666 咨询如何转GIF动图,所以我将本来打算后面介绍的提前。
1.gif
2.gif
还有几张效果好的动图因为论坛限制附件大小无法发上来@Ash @luna
技巧

以往的方法,一般是通过 saveFrame()命令导出系列帧。再在其他软件中进行合成。

现在我们可以直接用 GifAnimation 模块来实现(详细介绍: http://extrapixel.github.io/gif-animation/)。可在 sketch - import library - add library 里面搜索导入。

下面是“万用代码”。


[AppleScript] 纯文本查看 复制代码
import gifAnimation.*;
GifMaker exp;

void setup(){
setup_();
exp = new GifMaker(this,"1.gif");
exp.setRepeat(0); //Gif重复播放的次数,0为循环播放
exp.setDelay(50); //设置帧与帧之间的延迟时间,单位为毫秒。数值为50时,帧率则为 20(1000/50)。
}

void draw(){
draw_();
if(frameCount % 1 == 0){ //每间隔多少帧,写入一次(相当于改变播放速率)
exp.addFrame(); //将当前帧写入文件内
}
}

void mousePressed(){
exp.finish(); //导出Gif
}

////////////////////////


使用的时候,可以将上面代码粘在原代码前面。然后在 setup 和 draw 后面加上一条下划线即可。

原代码如:


[AppleScript] 纯文本查看 复制代码
void setup(){
size(400,400);
}

void draw(){
background(0);
ellipse(frameCount % width,200,50,50);
}


修改后:


[AppleScript] 纯文本查看 复制代码
void setup_(){
size(400,400);
}

void draw_(){
background(0);
ellipse(frameCount % width,200,50,50);
}


之后只要点击一下鼠标,就能直接保存Gif。一行代码也不用敲~~

完整代码

下面再给出一个完整的实例



[AppleScript] 纯文本查看 复制代码
import gifAnimation.*;
GifMaker exp;

void setup(){
setup_();
exp = new GifMaker(this,"1.gif");
exp.setRepeat(0); //Gif重复播放的次数,0为循环播放
exp.setDelay(50); //设置帧与帧之间的延迟时间,单位为毫秒。数值为50时,帧率则为 20(1000/50)。
}

void draw(){
draw_();
if(frameCount % 1 == 0){ //每间隔多少帧,写入一次(相当于改变播放速率)
exp.addFrame(); //将当前帧写入文件内
}

if(frameCount*ring[0].speed > 2*PI/5){
exp.finish(); //导出Gif
}
}

void mousePressed(){

}

/////////////////////////

int num;
Ring []ring;

void setup_(){
size(400,400);
num = 15;
ring = new Ring[num];
for(int i = 0;i < num;i++){
ring = new Ring(30 + 25*i,10,10);
}
}

void draw_(){
background(0);
translate(width/2,height/2);
for(int i = 0;i < num;i++){
ring.run();
}
}

class Ring{
float r,w,speed;
int num;
float angle;

Ring(float r_,float w_,int num_){
r = r_;
w = w_;
num = num_;
speed = 0.01;
angle = 2*PI / num;
}

void run(){
rotate(frameCount*speed);
strokeCap(SQUARE);
for(int i = 0;i < num;i++){
noFill();
if(i%2 == 0){
stroke(255);
}else{
stroke(0);
}
strokeWeight(w);
arc(0,0,r,r,0,angle);
rotate(angle);
}
}
}


导出效果:
5.gif

与第一个例子略有不同的,不再是用鼠标点击的方式来决定 Gif 的保存时间。要制作出完美的,首尾无缝循环的动图。第一步需要考虑它的循环周期,并添加一个判断条件来作为终止。例如这张图的循环时间就在圆环旋转超过五分之一的位置,所以才有代码

if(frameCountring[0].speed > 2*PI/5){ exp.finish(); //导出Gif }

因为制作流程变方便了。每次做练习,只要是略微有看点的效果,自己都习惯导出一个Gif出来。推荐用这种方式作为一个学习的记录。

6.gif

9.gif


8.gif

7.gif

小练习无需精雕细琢,但可以推进自己进行大量的输出。希望大家也能享受制作Gif的乐趣~~
微调

最后,如果导出的Gif文件太大。可以再导入 photoshop 进行修改。打开后,选择     “文件” — “储存为Web格式所用格式”,即可设置图片大小以及色值精度。由于微信中有2m大小的Gif限制,所以这个ps功能还是很常用的

转自www.inslab.cn


luna  管理员

发表于 2017-4-10 10:08:46

图片确实限制大小,你可以先传到你的qq相册,再复制图片地址就好。
回复 支持 反对

使用道具 举报

iooops  版主

发表于 2017-4-26 09:41:27

哇好看!
回复 支持 反对

使用道具 举报

mindecuer  学徒

发表于 2017-12-4 00:15:43

您好,我按照步骤做,怎么找不到导出的gif文件。求指导。
回复 支持 反对

使用道具 举报

kaka  版主
 楼主|

发表于 2018-1-27 11:36:05

mindecuer 发表于 2017-12-4 00:15
您好,我按照步骤做,怎么找不到导出的gif文件。求指导。

你用的是p3把,要用P2,P3的库是其他的
回复 支持 反对

使用道具 举报

1973742214  高级技师

发表于 2018-3-16 20:58:20

库文件咋下?
回复 支持 反对

使用道具 举报

crash  学徒

发表于 2019-3-10 19:25:09

这程序有错误吧?
回复 支持 反对

使用道具 举报

crash  学徒

发表于 2019-3-10 19:25:50

编译不过去,Ring[]的类型这里
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

为本项目制作心愿单
购买心愿单
心愿单 编辑
wifi气象站

硬件清单

btnicon
我也要做!
点击进入购买页面
上海智位机器人股份有限公司 沪ICP备09038501号-4

© 2013-2019 Comsenz Inc. Powered by Discuz! X3.4 Licensed

mail