На этой неделе я продемонстрировал Edge Animate в двух городах Техаса в рамках тура Create the Web. Анимации — это не то, о чем я обычно трачу много времени, думая, но я был благодарен за возможность показать, что я считаю довольно крутой программой. На моей первой презентации один из участников спросил, поддерживает ли Edge Animate анимацию, управляемую данными. Услышь то, что я сказал ему, и взгляни на простое доказательство концепции.
Во-первых, я сказал ему, что, на мой взгляд, Edge Animate подойдет для проектов, управляемых данными, но только для тех, в которых задействована хотя бы некоторая анимация на основе временной шкалы. Это различие может не иметь смысла, если вы никогда раньше не использовали Edge Animate. (Я рекомендую вам скачать его по ссылке, которой я поделился выше.) В Edge Animate есть временная шкала, которая позволяет вам создавать анимации с течением времени. Так, например, моя анимация может делать что-то одно от времени 0 до времени 1, а что-то другое от времени 1 до времени 4. Интеграция данных с этим не должна быть проблемой. Представьте себе простую анимацию погоды. У вас могут быть части, чтобы влететь термометр и собраться вместе, как головоломка. В конце вы отображаете текущую температуру.
Другой пример — анимация, полностью управляемая данными без понятия «время». Примером этого может быть простая круговая диаграмма, которая обновляется живыми данными, используя анимацию для плавного изменения секторов.
Очевидно, здесь есть серая зона, и каждый проект индивидуален. Edge Animate также упрощает добавление интерактивности в ваши проекты, поэтому допущение, что только проекты, в которых есть всякое дерьмо, имеет смысл, также не совсем справедливо. Надеюсь, вы меня поняли.
Со всем этим, давайте посмотрим на реальную демонстрацию. Это будет не самая захватывающая анимация Edge, которую вы увидите, но, надеюсь, она проиллюстрирует концепцию. Для моей демонстрации я хочу создать анимацию коробки, которая появляется на экране, а затем просто отображает текст. Управляемая данными часть будет исходить из того факта, что отображаемый нами текст должен быть взят из файла на стороне сервера. Вы можете представить, что это ColdFusion, PHP или какой-то другой скрипт. Пока что я просто сделал это простым текстом.
Я начал с создания анимации и использования статического текста. Я использовал две секунды для анимации «Прямоугольник прилетает» и одну секунду, чтобы текст постепенно исчез.
Вы можете увидеть это в действии здесь: http://www.raymondcamden.com/demos/2012/nov/7/v1/Untitled-2.html . Обратите внимание, что я не удосужился настроить какой-либо preloader или обеспечить доступную поддержку. Я стараюсь сделать это как можно проще.
Итак, теперь у нас есть основная анимация. Мы могли бы настроить его, чтобы сделать его красивее. Изменить поток движения. И т.д. Но давайте сосредоточимся на том, чтобы сделать эти данные управляемыми. Для этого мне нужно сначала остановить автоматический запуск анимации. Мой Ajax-вызов может быть медленным, поэтому я не хочу, чтобы что-либо выполнялось, пока я не верну свои данные. Отключить автозапуск так же просто, как щелкнуть по рабочей области в Edge Animate и отключить его в свойствах.
Это было просто. Следующая часть была немного сложнее. В обычном приложении я бы слушал событие типа DOM ready, прежде чем делать то, что мне нужно. Но я знаю, что у Edge Animate тоже есть свои события. Я предположил — но не был уверен — что есть событие, которое я мог бы прослушать и вызвать свою собственную логику. Когда сцена еще выбрана, я щелкнул значок Действия:
Я заметил событие creationComplete и предположил, что это безопасная ставка. Исходя из предположения, что вся моя логика уместится здесь, я использовал полезное меню действий, чтобы указать, как писать код. Сначала я выбрал «Задать текст элемента», а Animate добавил следующий блок:
// Change an Element's contents.
// (sym.$("name") resolves an Edge Animate element name to a DOM
// element that can be used with jQuery)
sym.$("Text").html("NewText");
Мой текстовый символ уже назывался Текст, поэтому я оставил код как есть. Часть, которая читает «NewText», будет изменена на результат моего вызова Ajax, но сейчас я просто хотел убедиться, что это сработало.
Далее я знал, что хочу запустить анимацию сам. Это тоже было легко. Я выбрал действие «Воспроизвести с» и указал значение 0.
// play the timeline from the given position (ms or label) sym.play(0);
В этот момент я заметил нечто странное. Когда я тестировал свою анимацию, текст в прямоугольнике не обновлялся. Что-то подсказало мне, что это может быть событие, которое я использовал. У меня нет доказательств этого (но я узнаю), но я был готов поспорить, что когда Edge Animate запускал анимацию в самом инструменте, он никогда не вызывал событие creationComplete. Вместо этого я сохранил свою работу, запустил ее в браузере и увидел, что все работает как положено.
Вы можете просмотреть эту версию здесь: http://www.raymondcamden.com/demos/2012/nov/7/v2/Untitled-2.html . Теперь вы должны увидеть, как запускается анимация и используется новый текст, а не слово «STATIC».
Woot! Так что теперь моя работа была почти завершена. Я сделал копию своей работы и открыл ее в другом редакторе. Файл Untitled-2_edgeActions.js содержал обработчик событий и пользовательскую логику, которую я создал. Вот как Edge Animate экспортировал его.
/***********************
* Adobe Edge Animate Composition Actions
*
* Edit this file with caution, being careful to preserve
* function signatures and comments starting with 'Edge' to maintain the
* ability to interact with these actions from within Adobe Edge Animate
*
***********************/
(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes
//Edge symbol: 'stage'
(function(symbolName) {
Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {
// insert code to be run when the symbol is created here
// Change an Element's contents.
// (sym.$("name") resolves an Edge Animate element name to a DOM
// element that can be used with jQuery)
sym.$("Text").html("NewText");
// play the timeline from the given position (ms or label)
sym.play(0);
});
//Edge binding end
})("stage");
//Edge symbol end:'stage'
})(jQuery, AdobeEdge, "EDGE-122609956");
Довольно просто, правда? Вы можете запустить финальную версию здесь: http://www.raymondcamden.com/demos/2012/nov/7/v3/Untitled-2.html