关键词

素材浏览器软件教程动态图图层文件夹脚本网页浏览器

文字记录

好的，下边我们先来准备一下 GIF 图片。那 GIF 动态图最开始设计的时候是用于网页显示的，在上网的时候，在网页里边可以嵌入一个 GIF 动态图。

它为什么能够呈现这种动态的效果呢？其实图片里边就包含了很多帧的画面。虽然我们看到的是一个文件，文件还是比较大的，文件里边包含了很多帧的画面，很多帧的数据，我们可以用一些工具软件来查看一下它里边的内容。比如我们经常使用的 photoshop 软件，把GIF图片拖到photoshop 里边打开可以看到图层面板里边有 12 个图层，这就意味着图片其包含了 12 帧的画面，在真正显示的时候，浏览器会把每一帧画面循环的显示，从而能达到一个动态的效果。

那我们设计思路也是这个样子的，我们也是把这 12 帧画面剔出来，然后用一个脚本控制它循环显示。

有了这个思路之后，我们就应该清楚了，首先我们需要把它给处理一下，因为在cocos 里边并不支持直接使用一个 GIF图片，原则上我们需要进行一番预处理。

我们在这里可以使用两种方式，第一种就是很直接的方式，直接使用软件把这每一帧画面给剔出来，然后加入到我们的项目里边。

第二种方式还是使用软件，把GIF图片转成图集 atlas ，这个是 cocos 里边的一个专有术语，使用这种方式也可以，先讲第一种方式，里边包含了 12 帧画面，把这 12 帧画面提取出来，得到 12 张图片，我们只需要把这 12 帧画面加入到cocos里边就行了。

新建一个项目，在 assets下边新建一个文件夹叫GIF，再建一个子目录

然后把这些图片选中，加入到项目里，接下来在脚本里把12 张图片轮番显示一下就可以

加进来之后还没完，最好加一个设置。当引入一张图片的时候，其实做了一个自动剪裁的工作，会把旁边的空白区域自动剪裁掉，叫做 autotrim，真正显示的时候，大小是紫色框里边的内容。

我们需要把这个特性禁用掉，不然每张图片是不一般大的。我们需要逐一进行设置，把 trim type 设置为 none。点中图片属性检查器有一个sprite， trim type 就是剪裁类型，默认是 auto ，把它设置为 none ，让它不自动剪裁，点一下右上角的应用就可以，紫色框就是这个全部的大小了，就没有自动剪裁指数。

当图片比较多的时候，操作还是有一些繁琐。