javascript - Canvas 时间线不与音频同步

Question

因此，我遇到 Adob​​e Animate 中的时间轴未与 CreateJS 中调用的音频同步的问题。问题在于帧速率被设置为 24fps 以匹配 Adob​​e Animate 时间轴 fps。如果帧速率低于 24fps，音频将在时间线之前完成，导致按钮和视觉效果比应有的时间晚得多。如果 fps 快于 24fps，音频将在时间线结束之前被切断。

有谁知道原因或有解决方案吗？谢谢。

Answer 1

默认情况下，Animate 设置滚动条的帧速率，但不设置动画剪辑本身的帧速率，动画剪辑会尝试遵循滚动条速率，直到绘制时间过长，此时它们会变慢。

要解决此问题，请设置 framerate on the movieclip除了股票行情自动收录机本身之外。

这将使影片剪辑丢弃将视频保持在适当帧速率所需的任何帧，这可能会导致动画稍微断断续续，但至少它们会处于正确的速度，因此与任何音频播放相匹配。

如果您使用 Animate 创建的 html 输出文件，则可以在handleComplete 函数中添加此行:

function handleComplete(evt) {
    //This function is always called, irrespective of the content. You  can use the variable "stage" after it is created in token create_stage.
    var queue = evt.target;
    var ssMetadata = lib.ssMetadata;
    for(i=0; i<ssMetadata.length; i++) {
        ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
    }
    exportRoot = new lib._MyAnimation_canvas();
    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.enableMouseOver();    

    exportRoot.framerate = lib.properties.fps; // <-- ADD THIS LINE

    //Registers the "tick" event listener.
    fnStartAnimation = function() {
        createjs.Ticker.setFPS(lib.properties.fps);
        createjs.Ticker.addEventListener("tick", stage);
    }

更复杂的动画可能需要在其他地方设置。如果您使用自己的其他js代码，您需要找到哪个movieclip有问题并将其设置在那里。