You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何将PIXI Spine动画快进至最后一帧?直接播放末帧遇问题

解决PIXI Spine直接显示/快进至动画最后一帧的问题

嘿,我刚好在项目里处理过一模一样的需求,给你两个简单直接的方案,亲测有效:

方案1:初始化时直接显示最后一帧

如果是一开始就不想播放动画,直接展示最后一帧,你可以这么做:

  • 先找到目标动画的总时长
  • 给动画轨道设置完动画后,直接把时间拉到总时长的位置
  • 手动调用一次update确保渲染生效

代码示例:

// 假设你的Spine实例是spineSprite,动画名称是"idle"
const targetAnimName = "idle";
const targetAnim = spineSprite.spineData.findAnimation(targetAnimName);

// 获取动画的总时长(单位:秒)
const animTotalDuration = targetAnim.duration;

// 设置动画(false表示不循环)
spineSprite.state.setAnimation(0, targetAnimName, false);

// 直接跳转到最后一帧
spineSprite.state.tracks[0].time = animTotalDuration;

// 关键:手动更新一次,让渲染立即生效
spineSprite.update(0);

如果你的动画是循环动画,直接设为总时长可能会跳回第一帧,这时候可以稍微减一点点时间,比如:

spineSprite.state.tracks[0].time = animTotalDuration - 0.001;

方案2:播放过程中快进至最后一帧

如果是动画已经在播放了,想要中途直接切到最后一帧,逻辑和上面差不多,只是不需要重新设置动画,直接修改当前轨道的时间就行:

// 获取当前播放的轨道(这里取第0轨道,根据你的实际情况调整)
const currentTrack = spineSprite.state.tracks[0];
if (!currentTrack || !currentTrack.animation) return;

const totalDuration = currentTrack.animation.duration;
currentTrack.time = totalDuration;
// 同样需要手动更新一次
spineSprite.update(0);

小提示

  • 如果你担心动画的过渡问题(比如突然跳帧有闪烁),可以把update的参数设为一个极小值,不过一般直接设0就足够了
  • 确保你获取的动画对象是正确的,findAnimation会返回对应名称的动画,找不到的话会返回null,记得加个判断避免报错

内容的提问来源于stack exchange,提问作者user1944725

火山引擎 最新活动