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

Posted

技术标签:

【中文标题】Adobe Animate CC Javascript - 每次可见时启动动画【英文标题】:Adobe Animate CC Javascript - start animation everytime it becomes visible 【发布时间】:2018-07-23 01:37:24 【问题描述】:

我在页面中间有一个 Adob​​e 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();

【问题讨论】:

【参考方案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 的新变量。

祝你好运

【讨论】:

感谢您的支持 - 但是您发布的代码是否替换了我拥有的代码的某个部分?还是全部替换,等等? 你必须用我的替换 checkCanvasVis() 函数并将 isOnStageFlag 变量添加到。 抱歉,我无法让您的解决方案发挥作用 - 但感谢您的帮助! 没问题。我的荣幸。【参考方案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 - 每次可见时启动动画

Adobe Animate CC 到 Vue.js 组件中

Adobe Animate CC Canvas (CreateJS) 矢量图形在放大时变得模糊

Adobe Animate CC (HTML5 Canvas) 中的按键事件

Adobe Animate CC、HTML5 Canvas - 将实例名称捕获为动态文本?

【An教程】快速入门Animate(原Adobe Flash)