Question

我在页面中间有一个Adobe Animate CC动画，我想在每次滚动到视图时从头开始播放 - 在向下滚动和向上滚动 - 基本上任何时候进入视图。下面的代码（我粘贴在我的动画的第一帧中）用于在动画变为可见时启动动画 - 但是如果你滚过它然后向上滚动则不能重新启动动画......可以修改它来做那个？

// stop main timeline
this.stop();

// check timeout handle
var chkTimer;

// only check visibility when scrolling has stopped
function scheduleVisCheck() {
clearTimeout(chkTimer);
chkTimer = setTimeout(checkCanvasVis, 250);
}

// play main timeline when canvas has scrolled (vertically) into view
function checkCanvasVis() {
var rect = canvas.getBoundingClientRect();
if (rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)) {
window.removeEventListener("scroll", scheduleVisCheck);
exportRoot.play();
    }

} 

// hook event listener to window scrolling
window.addEventListener("scroll", scheduleVisCheck);

// just in case canvas starts already visible
checkCanvasVis();

Answer 1

你需要更改算法，使其在滚动时再次起作用，然后再返回。所以试试这个：

Utils.staticFunc()

我在代码上写下我的描述。 checkCanvasVis已更改，并且创建了名为isOnStageFlag的新变量。

祝你好运

Answer 2

我收到了一些额外的帮助，我的原始代码修改如下，现在可以根据需要运行......

// stop main timeline
this.stop();

// check timeout handle
var chkTimer;
var inview = false;

// only check visibility when scrolling has stopped
function scheduleVisCheck() {
clearTimeout(chkTimer);
chkTimer = setTimeout(checkCanvasVis, 10);
}

// play main timeline when canvas has scrolled (vertically) into view
function checkCanvasVis() {
var rect = canvas.getBoundingClientRect();
if (rect.top >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) -150 || (rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.bottom > 150)   ) {
    if (inview == false) exportRoot.play(0);
inview = true;
    } else {
    inview = false;
}
}

// hook event listener to window scrolling
window.addEventListener("scroll", scheduleVisCheck);

// just in case canvas starts already visible
checkCanvasVis();

Adobe Animate CC Javascript - 每次可见时启动动画

2 个答案: