关于适配帧动画

[IryNeko]

需求描述：
现在的图生视频AI模型例如wan2.2已经支持生成第一帧和最后一帧一致的循环帧动画
个人认为在自动语音嘴型，自动眨眼，live2d，龙骨之外，AI生成的帧动画在性价比上有着绝对优势
同时，帧动画真的比较容易获得，就是容易让游戏变成几十个g的巨无霸，自己也生成过，想要试试的可以联系我

已知问题：
AI输出的图包含背景，需要批量去除背景
pixi.js有点难办，animatedsprite这个类要输入一列序列帧，然而loader不会把视频载入成序列帧, 这个项目依赖的版本支持gif导入吗？

解决方案：
利用已有的去除背景模型批量去除背景（去除以后，输出的序列帧透明png，也不用压gif了）
直接载入整个文件夹，可选方案：

1. 新增一个载入animated适配（有点麻烦）
2. 在原有的载入figure基础上，适配载入loop动画/非loop动画，例如 avatar(loop:100).png，自动适配 avatar000001.png-avatar000100.png，循环播放。如果使用animatedsprite，大概率和webgal原生的动画逻辑冲突了。使用原生逻辑来update比较稳妥的适配原生的animation组件，同时可以达到loop和非loop流程，不用和pixi打不必要的交道，fps别跑太快就不会扯到

看上去好像已经在我的技术力能解决的程度了，我去搓一下得了

[MakinoharaShoko]

在 #795 已有 gif 实现，可能补充 loop 逻辑就可以了？然后用一个参数来控制是否要循环 gif

[IryNeko]

// 这边让frame可以播放，加入seq_no概念
// 如果是(loop)则用从1开始的数代替
// 如果是(no loop)则保持结束帧 //todo
var seq_no=0;
const loop_regex = /(loop:\s*(\d{1,3}|100000))/;
const no_loop_regex = /(no loop:\s*(\d{1,3}|100000))/;
const loop_yes = url.match(loop_regex);
const loop_no = url.match(no_loop_regex);
let seq_set: { [key: number]: any } = {}; // empty object
let frameNuem=0
if (loop_yes){
//循环播放，用完为止
const blank = () => {}
frameNuem=parseInt(loop_yes[1], 10); //获得多少frame
while(seq_no<frameNuem){ //全部加载
console.log(seq_no)
seq_no+=1;
const seq_url=url.replace(loop_regex,seq_no.toString().padStart(6, '0'))
seq_set[seq_no]=seq_url
if (!loader.resources?.[seq_url]?.texture) {
this.loadAsset(seq_url, blank);
}
}
function loop(){
//use 16 fps
setTimeout(() => {
setup();
loop()
}, Math.round(1000/16));//计算帧率
}
loop()
}
else{
if (!loader.resources?.[url]?.texture) {
this.loadAsset(url, setup);
} else {
// 复用
setup();
}
}

大概是这么先看一下是不是一个 avatar(loop).png，是的话就检测
然后在setup里面反正就是循环更新呗，如果是loop就改一下 seq_play_no第几张的参数，不loop就过去了

  setTimeout(() => {
    let seq_url=url
    console.log(seq_play_no) 
    if (loop_yes){
      if (seq_play_no<frameNuem){
        seq_play_no+=1
      }
      else{
        seq_play_no=0
      }
      seq_url=seq_set[seq_play_no]
    }
    if (loop_no){
      if (seq_play_no<frameNuem){
        seq_play_no+=1
      }
      seq_url=seq_set[seq_play_no]
    }
  console.log(seq_url)

然后最后更新sprite

if (texture && this.getStageObjByUuid(figureUuid)&&seq_play_no!=0){
thisFigureContainer.children[0].texture=texture
}

只能说能跑，非loop加载没写呢还，看着逻辑也不太对，在跑webgal的animation的情况下可能会嘎
功能上，我想着比如我的人物从站姿变成托腮姿势，然后一直循环托腮姿势（非静止人物），过几个字段把手放下，可能是先播放1-80，再循环161-240，参数处理好弄，但放下的动画中间衔接没法衔接啊

[IryNeko]

在 #795 已有 gif 实现，可能补充 loop 逻辑就可以了？然后用一个参数来控制是否要循环 gif

gif实现有的话我试试，话说pixi新的版本自己支持gif对吧。主要还是我扒完图片背景以后出来就是一堆图， 打gif多了个步骤（就是给打在一起了也没小），感觉最优解是利用一个lossy compress出来的animated webp来跑这样最小，不过那玩意儿先处理图然后弄成blob给pixi收中间过程有点多

[IryNeko]

在 #795 已有 gif 实现，可能补充 loop 逻辑就可以了？然后用一个参数来控制是否要循环 gif

gif是有了，怎么用它有了吗？找了两圈没找到gif怎么播放的