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

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

您必须更改算法，使其在滚出然后返回时再次运行。所以试试这个：

var isOnStageFlag:Boolean = false ;
// play main timeline when canvas has scrolled (vertically) into view
function checkCanvasVis() {
   var rect = canvas.getBoundingClientRect();
   if(isOnStageFlag == false) {//The rect is still out of view
       if (rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)) {
       //Dont remove this Listener > window.removeEventListener("scroll",scheduleVisCheck);
           exportRoot.play();
           isOnStageFlag = true ;//Set this flag to prevent above lines to call again
       }
    }
    else {
        if (rect.bottom  < 0 || rect.top > (window.innerHeight || document.documentElement.clientHeight)) {//You have to recheck this line of code. I wanted to control the animation if goes out of the stage to re activate your first code again
            exportRoot.stop();//Make better performance depends on you animation. because the animation is not on the stage any more
            isOnStageFlag = false ; //Now get ready for animation to back into stage
        }
    }
}

我把我的描述写在代码上。 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 - 每次可见时启动动画

Adobe Animate CC Javascript - start animation everytime it becomes visible

javascript

animation

actionscript

adobe