javascript - 如何在我的项目中正确重新计算停止并恢复动画计算

我在暂停的故事的过程中遇到了问题。

以下是:几点:

无需单击即可查看下一个故事pause可工作精细

当next story为clicked时，故事将跳至下一个story，其代码为window.location.href = '#'+storyId;

next story clicked后的

后出现暂停问题

暂停可以通过space bar或right click (contextmenu)

触发

用于暂停这些功能的方式如下:

toggleAnimation()

此功能中的pauseAnimation();此代码editor.postMessage( {'request':command.pause}, getDomain() );触发listener();

带有命令listener()的

command.pause，它进入此开关块
case command.pause : requestAnimationFrame(localPauseAnimation); play=false; syncPrompters(); break;

localPauseAnimation();

下面的代码负责动画制作(在animation()内部):

 styleSheet.insertRule('\
            .prompt.move {\
                transform: translateY('+destination+'px) scale('+(flipH?-1:1)+','+(flipV?-1:1)+') !important;\
                transition: transform '+time+'ms '+curve+';\
        }', 0);

我正在使用此开源项目 https://imaginarysense.github.io/Teleprompter-Core/ ，这对我来说很难破解此代码

重现步骤:

提取下载的文件夹(https://www.dropbox.com/s/e7c2d4fynwl1d6a/Teleprompter-Core-master.tar.gz?dl=0)找到index.html运行到浏览器

单击右上角的Prompt It

(等待10秒)故事将进入幻灯片窗口，按space bar它将正确停止

按下next stores(红色)按钮后按

，然后按space bar进行暂停故事将在随后按space bar时立即跳转

动画的完整代码可以在js/teleprompter.js中找到

有关动画的完整代码，请参见js/teleprompter.js

问题:暂停和播放应正常进行，没有任何跳跃

项目链接:https://www.dropbox.com/s/e7c2d4fynwl1d6a/Teleprompter-Core-master.tar.gz?dl=0

最佳答案

播放和暂停动画取决于光标位置。当前光标部分的值是通过类名“prompt move”的div的顶部位置计算的。我认为提示div的最高排名值存在问题。当您调用 window.location.href ='＃'+ storyId;时，提示div的最大值将更改。 。因此，当前光标位置将被更改。
跟随函数负责计算光标位置。

function getCurrPos(obj) {
    // There's more than a way to calculate the current position.
    // This is the original method, slower and more reliable. Used only for Intergalactic Style, where the other method fails.
    if (promptStyleOption===4) {
        if (!obj)
            obj=prompt;
        var computedStyle = window.getComputedStyle(obj, null),
            theMatrix = computedStyle.getPropertyValue("transform"),
        // Reading data from matrix.
            mat = theMatrix.match(/^matrix3d\((.+)\)$/);
        if (mat) return parseFloat(mat[1].split(', ')[13]);
            mat = theMatrix.match(/^matrix\((.+)\)$/);
        return mat ? parseFloat(mat[1].split(', ')[5]) : 0;
    }
    // This method is faster, and it's prefered because it generates less lag. Unfortunatelly it fails to calculate in 3D space.
    else
        return prompt.getBoundingClientRect().top;
}

如果将getCurrPos函数更改为以下方式，则将解决此问题。

function getCurrPos(obj) {
        // There's more than a way to calculate the current position.
        // This is the original method, slower and more reliable. Used only for Intergalactic Style, where the other method fails.
            if (!obj)
                obj=prompt;
            var computedStyle = window.getComputedStyle(obj, null),
                theMatrix = computedStyle.getPropertyValue("transform"),
            // Reading data from matrix.
                mat = theMatrix.match(/^matrix3d\((.+)\)$/);
            if (mat) return parseFloat(mat[1].split(', ')[13]);
                mat = theMatrix.match(/^matrix\((.+)\)$/);
            return mat ? parseFloat(mat[1].split(', ')[5]) : 0;
    }