Cocos Creator动画最后一帧显示异常？

Question

在使用Cocos Creator开发2D动画时，常有开发者反馈“动画最后一帧显示异常”问题：当Animation播放结束后，节点突然跳回初始状态或出现视觉闪烁。此现象多因动画剪辑（AnimationClip）的循环设置与播放逻辑不匹配所致，尤其在非循环播放且未正确监听“finished”事件时更为明显。此外，骨骼动画中若末帧关键帧数据丢失或裁剪过度，也会导致渲染异常。需检查动画编辑器中的末帧完整性，并确保代码中合理处理播放完成后的状态锁定。

Answer 1

让【宝码香车】来帮你解答，本回答参考DeepSeek编写，并整理提供。

如果还有疑问可以“评论”。如果答案让您满意，请“采纳”，非常感谢！

Cocos Creator动画最后一帧显示异常解决方案

这个问题的根本原因是动画播放完成后的状态管理不当，常见于非循环动画播放场景。以下是完整的排查和解决方案：

问题原因分析

解决方案

1. 检查动画剪辑设置

在Cocos Creator动画编辑器中检查：

// 检查动画剪辑属性
const animationClip = this.getComponent(Animation).defaultClip;
console.log("循环模式:", animationClip.wrapMode);
console.log("动画时长:", animationClip.duration);
console.log("帧率:", animationClip.sample);

2. 正确的动画播放代码

import { _decorator, Component, Animation } from 'cc';
const { ccclass, property } = _decorator;


@ccclass('AnimationController')
export class AnimationController extends Component {
    
    @property(Animation)
    private anim: Animation = null!;


    onLoad() {
        // 方法1：监听动画完成事件
        this.anim.on(Animation.EventType.FINISHED, this.onAnimationFinished, this);
        
        // 方法2：使用Promise方式
        this.playAnimationWithPromise();
    }


    // 方法1：事件监听方式
    playAnimation() {
        this.anim.play('your-animation-clip');
    }


    onAnimationFinished(type: Animation.EventType, state: Animation.State) {
        if (type === Animation.EventType.FINISHED) {
            // 锁定在最后一帧
            this.anim.stop();
            // 可选：设置到最后一帧时间
            const clip = this.anim.getState('your-animation-clip');
            clip.setTime(clip.duration);
        }
    }


    // 方法2：Promise方式（推荐）
    async playAnimationWithPromise() {
        return new Promise<void>((resolve) => {
            const onFinished = () => {
                this.anim.off(Animation.EventType.FINISHED, onFinished);
                // 确保停留在最后一帧
                this.ensureLastFrame();
                resolve();
            };
            
            this.anim.on(Animation.EventType.FINISHED, onFinished);
            this.anim.play('your-animation-clip');
        });
    }


    // 方法3：手动控制最后一帧
    ensureLastFrame() {
        const state = this.anim.getState('your-animation-clip');
        if (state) {
            // 设置到精确的最后一帧
            state.setTime(state.duration);
            this.anim.stop();
        }
    }


    // 清理监听
    onDestroy() {
        this.anim.off(Animation.EventType.FINISHED, this.onAnimationFinished, this);
    }
}

3. 骨骼动画特殊处理

对于骨骼动画，需要额外检查：

@ccclass('SkeletonAnimationFix')
export class SkeletonAnimationFix extends Component {
    
    @property(sp.Skeleton)
    private skeleton: sp.Skeleton = null!;


    fixSkeletonAnimation() {
        // 检查骨骼动画设置
        const animation = this.skeleton.getCurrentAnimation();
        if (animation) {
            // 确保循环模式正确
            this.skeleton.setAnimation(0, animation, false);
            
            // 监听完成事件
            this.skeleton.setCompleteListener(() => {
                // 停留在最后一帧
                this.skeleton.setTimeScale(0);
            });
        }
    }
}

4. 动画编辑器检查清单

// 在控制台运行检查动画完整性
function checkAnimationIntegrity(animation: Animation) {
    const states = animation.getStateList();
    
    states.forEach(state => {
        const clip = state.clip;
        console.log(`动画剪辑: ${clip.name}`);
        console.log(`- 时长: ${clip.duration}`);
        console.log(`- 循环模式: ${clip.wrapMode}`);
        console.log(`- 曲线数量: ${clip.curves.length}`);
        
        // 检查每条曲线的关键帧
        clip.curves.forEach(curve => {
            const keyframes = curve.keyframes;
            console.log(`  - 曲线路径: ${curve.path}, 关键帧数: ${keyframes.length}`);
            
            if (keyframes.length > 0) {
                const lastKeyframe = keyframes[keyframes.length - 1];
                console.log(`    - 最后关键帧时间: ${lastKeyframe.time}`);
            }
        });
    });
}

5. 完整的故障排查流程

预防措施

1. 动画制作规范：
   • 确保动画剪辑首尾帧一致
   • 避免过度裁剪关键帧
   • 设置合适的循环模式

1. 代码最佳实践：
   • 始终监听finished事件
   • 在完成回调中明确状态管理
   • 使用TypeScript获得更好的类型安全

1. 测试验证：
   • 在不同设备上测试动画表现
   • 验证内存泄漏情况
   • 检查性能影响

通过以上方法，可以彻底解决Cocos Creator动画最后一帧显示异常的问题。