Jakiś czas temu na blogu MIX Online pojawił się wpis na temat narzędzia pozwalającego tworzyć animacje jQuery. Podobnie jak wy teraz, podszedłem do tematu dosyć sceptycznie i odłożyłem jego zgłębianie na później. Dzisiaj zainstalowałem to narzędzie i przeprowadziłem kilka prostych testów. Ich wynik przeszedł moje najśmielsze oczekiwania. Okazuje się, że Glimmer został dokładnie przemyślany i oprócz przyjaznego interfejsu oferuje bardzo dobre narzędzia do tworzenia animacji. Wystarczy wspomnieć o wizadrach, dzięki którym w kilka chwil można stworzyć rozwijane menu lub tooltip. Oczywiście obok gotowych animacji mamy do dyspozycji edytor, który pozwoli zaprojektować animację od początku do końca.
Po zainstalowaniu i uruchomieniu Glimmera, ujrzymy ekran powitalny, z poziomu którego można stworzyć własną animację, wybrać jedną z dostępnych lub przejść do strony projektu.

Nie będę opisywał gotowych szablonów, ponieważ ich zastosowanie jest intuicyjne i sprowadza się do kilku prostych kroków. Poza tym wizardy zostały tak przygotowane, że nie wymagają dodatkowego opisu. O wiele bardziej interesujące są możliwości jakie daje edytor animacji.

Wystarczy wczytać plik HTML, zawierający poprawnie sformatowany kod, a następnie wskazać źródło zdarzenia, typ zdarzenia oraz cel. Źródłem zdarzenia może być dowolny element znajdujący się we wczytanym dokumencie. Element można wskazać po tagu (np div), klasie (.jakas-klasa) lub identyfikatorze (#identyfikator). Typem zdarzenia są wszystkie przewidziane przez jQuery zdarzenia, np click, mouseover, blur, scroll, itp.

Cel wybiera się w taki sam sposób jak źródło. Po określeniu celu, należy wybrać rodzaj animacji oraz ustalić jej parametry. Np dla animacji przeźroczystości należy wybrać wartość początkową oraz końcową. Oprócz samej animacji mamy możliwość ustalenia dodatkowych parametrów, takich jak czas trwania oraz efekt przejścia. Co więcej, można wskazać animację jaka ma się wykonać po zakończeniu bieżącej.

Edytor daje możliwość określenia więcej niż jednej animacji na cel oraz więcej niż jeden cel na zdarzenie. Przy odrobienie wysiłku można stworzyć skomplikowaną animację bez napisania ani jednego wiersza w Javascript. Jeśli martwicie się o jakość wygenerowanego kodu, spieszę wyjaśnić, że kod jest poprawnie wygenerowany i nie zawiera dziesiątek zbędnych zmiennych i dziwnych operacji. Jedyne co kiepsko wygląda w wygenerowanym kodzie, to komentarz zawierający informacje niezbędne dla Glimmera. Po zakończeniu pracy można ten komentarz śmiało usunąć. Oto przykładowy kod wygenerowany przez to narzędzie (nic w nim nie zmieniałem).

//Microsoft.Glimmer.OneWay
//<AnimationCollection FilePath="C:\test.html.glimmer.js" xmlns="clr-namespace:GlimmerLib;assembly=GlimmerLib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Animation Name="ActionName1" EventType="click" Trigger="#link"><Animation.Targets><Target Name="#div" Duration="1000" Easing="linear" Callback="ActionName2"><Target.Effects><ColorEffect CSSName="color" DisplayName="Color Animation" MaxValue="1" MinValue="0" From="0" To=""darkred"" IsStartValue="False" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="True" JQueryPluginURI="effects.core.js" /></Target.Effects></Target></Animation.Targets></Animation><Animation Name="ActionName2" EventType="[none]" Trigger="{x:Null}"><Animation.Targets><Target Name="#div" Duration="1000" Easing="linear" Callback="null"><Target.Effects><RemoveHTMLEffect CSSName="#link" DisplayName="Remove HTML Effect" MaxValue="0" MinValue="0" From="0" To="0" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({1}).remove();
" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target></Animation.Targets></Animation></AnimationCollection>
jQuery(function($) {
var timer;
function ActionName1(event)
{
    $("#div").animate({"color":"blue"},1000, "linear", ActionName2);
}

function ActionName2(event)
{
     $("#link").remove();
}

$('#link').bind('click', ActionName1);


});

Więcej informacji na temat Glimmera oraz przykładowe animacje znajdziecie na oficjalnej stronie projektu.

Strona tego bloga