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

Question

我遇到了暂停故事的问题。

以下是一些要点：

1. 不点击下一个故事pause工作fine

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

3. next story clicked之后出现暂停问题

4. 暂停可以用space bar或right click (contextmenu)触发

对于暂停，这些函数以这种方式调用：

1. toggleAnimation()

2. pauseAnimation();在此函数中此代码editor.postMessage( {'request':command.pause}, getDomain() );触发listener();

3. listener()和命令command.pause进入该切换块

   case command.pause : requestAnimationFrame(localPauseAnimation); play=false; syncPrompters(); break;

4. 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/我很难破解这个代码

复制步骤：

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

2. 点击右上角的Prompt It

3. (等待10秒(故事将滑入窗口，按space bar，它将正确停止

4. 当按下next stores(红色(按钮时，然后按下space bar进行暂停故事现在将跳到下一次按下space bar

5. 整个动画代码可以在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.locationhref='#'+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;
}

N:B当我们通过设置进行提示时，默认情况下不会出现此问题白板的提示样式。