Удивительно, но мои посты в блоге (см. Раздел «Связанные записи» ниже) на Edge Animate и отложенные анимации были гораздо более популярными, чем я думал. В разделе комментариев люди задавали интересные вопросы и обсуждали методы, которые я представил. Один из них был довольно увлекательным и, как и все хорошие вопросы, привел к некоторому интересному коду.
Читатель создал вертикально большую анимацию. Анимация была более чем достаточно большой, чтобы прокручивать ее, чтобы увидеть все. Тогда он хотел иметь внутренние элементы, то есть анимации внутри основной анимации, которые задерживали бы их анимацию до тех пор, пока они не стали видимыми.
Чтобы продемонстрировать это, я создал новую анимацию Edge Animate и отредактировал сцену очень большой по вертикали. Затем я создал символ и определил анимацию на самом символе. Наконец, я установил для автоматического воспроизведения значение false .
Итак … теперь пришла интересная часть. Я предположил, что мог бы сделать что-то похожее на мои предыдущие записи: подождать, пока элемент будет видимым, а затем запустить анимацию.
Я начал с работы над событием creationComplete . Я должен отметить, что у символов тоже есть свои события. Я не уверен, что знаю, что лучше использовать здесь. Я предполагал, что создание Complete на сцене имело смысл, так как для меня это означало, что все было готово. Затем я написал код, чтобы получить мой символ, и использовал ту же логику, что и раньше:
Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {
console.log("Ready");
mysym=sym.getSymbol("Symbol_12");
if(isScrolledIntoView(mysym.element)) {
mysym.play(0)
} else {
$(window).on("scroll", function(e) {
if(isScrolledIntoView(mysym.element)) {
console.log('Start me up');
mysym.play(0);
$(window).off("scroll");
}
});
}
});
Простите за несколько странный интервал. Если вы прочитали предыдущие записи, то знаете, что isScrolledIntoView — это служебная функция, которую я включил, чтобы увидеть, был ли виден элемент DOM.
Вот где все сломалось. О моем товаре сообщалось как всегда , даже когда этого точно не было! Я добавил некоторые записи и обнаружил, что при загрузке веб-страницы мой символ имел «страницу x» и «страницу y», равные «0,0»!
А потом все сошло с ума. Для этого я добавил вызов setTimeout на одну секунду. Когда я сделал это и сообщил о положении моего символа, это было правильно.
Какая. . Heck. (И это не то, что я сказал.;))
К счастью, у меня есть друзья на высоких постах. Я немного поговорил с Джошем Хатвичем, главным ученым из команды Edge Animate, и он предложил проверить свойство отображения символа. Когда я сделал это, я обнаружил , что мой символ имел дисплей значение ни вначале, а затем блокировать в моем SetTimeout . Вот почему позиционирование было таким странным.
Тогда он порекомендовал простое исправление: примените свойство display к элементу, а затем проверьте, видно ли оно. Вот версия, с которой я пошел (только одна строка отличается):
Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {
console.log("Ready");
mysym=sym.getSymbol("Symbol_12");
//force it to be block
mysym.element.css("display","block");
if(isScrolledIntoView(mysym.element)) {
mysym.play(0)
} else {
$(window).on("scroll", function(e) {
if(isScrolledIntoView(mysym.element)) {
console.log('Start me up');
mysym.play(0);
$(window).off("scroll");
}
});
}
});
И это работает. (Внизу есть демонстрационная ссылка.) Говоря больше с Джошем, он согласился, что в этом случае использования может потребоваться дополнительная помощь от JS API, чтобы работать лучше в будущем. Обратите внимание, что то, что вы видите здесь, может быть лучше обработано в будущем обновлении советника. Я включил .zip своего кода, но знаю, что файл .an работает неправильно. Я тоже смотрю на это.
Когда вы посмотрите это демо, вы увидите очень высокую розовую коробку. Теоретически вы не увидите желтую коробку. Когда вы прокрутите вниз и увидите его, он должен начать двигаться вправо. Пожалуйста, будьте уверены, что вы сидите. Мои дизайнерские навыки настолько невероятны, что вы можете упасть на землю, и я не хочу быть причиной какого-либо физического ущерба.
Связанные записи в блоге
- Задержка актива Edge Animate до видимого — часть 2 (11 июля 2013 г.)
- Задержка актива Edge Animate до видимого (3 апреля 2013 г.)