请教大家个问题，多数量的图片，如果快速制作序列帧动画？

Creator 3.x
#1

如题，我有一个gif动画想播放，但是cocos原生不支持。然后就导出了几十张的连续的图片。
如果要手动制作序列帧动画，一帧一帧的去放图片会很耗时耗力，有没有批量 快捷的制作方法呢？

#2

写组件封装一个

#3

能具体详细说一下吗

#4

https://store.cocos.com/app/detail/2878
这是我设计的一个简单的

#5

在编辑器界面新增轨道，然后多选图片拖进去就好了。

image
image739×341 23 KB

如果需要调整多个动画帧之间的时间，选中一个帧后按CTRL+A全选，调整间隔数后点击排序。
image
image800×387 36.9 KB

#6

好的感谢~

#7

好的，感谢~

#8

const { ccclass, property } = cc._decorator;

/**

  • 帧动画组件

*/

@ccclass

export default class ZClips extends cc.Component {

@property(cc.SpriteFrame)

public Frames: cc.SpriteFrame[] = [];

@property

public PlayOnload = false;

@property

public Duration = 0.1;

@property

private IsAllsyn = false;//保持同步

/*示例用法：场景中有10个金币道具，每个金币都有同样的帧动画，但有可能因为加载的原因，并不一定

10个金币同时play，就会出现看起来有些金币动画先播，有些后播，10个金币动画不整齐，如果将IsAllsyn设置

为true，会将帧索引以全局游戏时间为标准，不管谁先播，谁后播，在同一时间，10个金币的ZClips都会计算得到同一个

Frames的索引，保证10个金币的动画一致整齐

*/

@property

private Loop = false;

@property

private clear = false;

private _sp: cc.Sprite;

private _playing = false;

private _total_time = 0;

private _default_sp = null;

onLoad() {

    this._sp = this.node.getComponent(cc.Sprite);

    if (!this._sp)

        this._sp = this.node.addComponent(cc.Sprite);

    else {

        this._default_sp = this._sp.spriteFrame;

    }

    if (this.PlayOnload) {

        this.play(this.Loop, this.Duration, this.IsAllsyn);

    }

}

update(dt) {

    let self = this;

    if (self._playing && self.Frames.length > 0) {

        self._total_time += dt;

        let index = Math.floor(self._total_time / self.Duration) % self.Frames.length;

        if (self.IsAllsyn)

            index = Math.floor(cc.director.getTotalTime() / 1000 / self.Duration) % self.Frames.length;

        if (self.Loop || index < self.Frames.length) {

            self._sp.spriteFrame = self.Frames[index];

        }

        if (index >= self.Frames.length - 1 && !self.Loop)

            self.stop();

    }

}

/**

 * 播放

 * @param loop 是否循环（不传入使用编辑器赋的默认值，传入覆盖默认值）

 * @param duration 每帧多少秒

 * @param isAllsyn 保持同步

 * @returns

 */

play(loop = null, duration = null, isAllsyn = null) {

    if (this._playing) return;

    this._total_time = 0;

    this._playing = true;

    if (isAllsyn != null) this.IsAllsyn = isAllsyn;

    if (loop != null) this.Loop = loop;

    if (duration != null) this.Duration = duration;

}

stop() {

    this._playing = false;

    if (this._default_sp) {

        this._sp.spriteFrame = this._default_sp;

        return;

    }

    if (this.clear) this._sp.spriteFrame = null;

}

}