Question

我在故事上暂停有问题。

以下是几点：

无需单击下一个故事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时跳转< / p>
完整的动画代码可以在js/teleprompter.js

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

中找到

问题：暂停和播放应该正常进行，没有任何跳动

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

Answer 1

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

SELECT YT.YYWW,
       CT.[date]
FROM YourTable YT
     JOIN CalendarTable CT ON CT.[Year] = '20'+LEFT(YT.YYWW,2)
                          AND CT.WeekNo = RIGHT(YT.YYWW,2)
                          AND CT.DayOfWeek = 1; --Assumes Monday is day 1.

如果将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 (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;
}

N：B当我们通过设置提示时，默认情况下不会发生此问题提示样式为白板。

如何在我的项目中正确重新计算停止并重新开始动画计算

1 个答案: