Запускайте анимацию (Animate CC) только тогда, когда холст станет видимым после прокрутки. - PullRequest
Новая
       33

Запускайте анимацию (Animate CC) только тогда, когда холст станет видимым после прокрутки.

0 голосов
/ 01 ноября 2018

У меня есть анимация (сделанная с помощью Adobe animate CC), которую я включил в свой HTML-файл. Я пытаюсь изменить исходный сценарий, чтобы запустить анимацию с самого начала, только когда она становится видимой в окне просмотра браузера. К сожалению, я много искал, но не смог сделать ни одно из найденных решений подходящим для моего случая.

Это оригинальный код, который я пытаюсь изменить: 

<html>

<head>

<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, 
fnStartAnimation;

function init() {
    canvas = document.getElementById("canvas");
    anim_container = document.getElementById("animation_container");
    dom_overlay_container = document.getElementById("dom_overlay_container");
    var comp=AdobeAn.getComposition("07578064E5C140B781D146A1AE4968A3");
    var lib=comp.getLibrary();
    handleComplete({},comp);
}
function handleComplete(evt,comp) {
    //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
    var lib=comp.getLibrary();
    var ss=comp.getSpriteSheet();
    exportRoot = new lib.Water_illustrazione_revista_scrollplay();
    stage = new lib.Stage(canvas);  
    //Registers the "tick" event listener.
    fnStartAnimation = function() {
        stage.addChild(exportRoot);
        createjs.Ticker.setFPS(lib.properties.fps);
        createjs.Ticker.addEventListener("tick", stage);
    }

 //follow a code to support hidpi screens and responsive scaling.

</script>

</head>

<body onload="init();" style="margin:0px;">

<div id="anchor5" class="Anime_p">
 <div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1280px; height:700px">
        <canvas id="canvas" width="1280" height="700" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
        <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1280px; height:700px; position: absolute; left: 0px; top: 0px; display: block;">
        </div>
    </div>
</div>

</body>

</html>

1 Ответ

0 голосов
/ 11 ноября 2018

Вам просто нужно сначала экспортировать анимацию как остановленную, а затем проверить, когда div появляется в браузере. Когда это происходит, запускайте анимацию.

  1. Добавить exportRoot.stop (); в конце fnStartAnimation ();
  2. Проверьте видимость вашего анимационного элемента в браузере, как описано здесь - Как узнать, видим ли элемент DOM в текущем окне просмотра?
  3. Когда условие выполняется, добавьте код - exportRoot.play ();
...