piątek, 15 listopada 2013

Blend dla HTML5 - animacje

Zgodnie z zapowiedzią najbliższy post miał być o animacjach w Blend i tak też będzie. Weterani XAML, do których się zaliczam, cieszyli się już przy WPF edytorem animacji w Blend, czyli 7 lat temu. W aplikacjach HTML5 animacje CSS3 często pisze się dziś ręcznie. Nie jest to trudne, ale z pewnością wygodniej byłoby je podglądać i modyfikować za pomocą narzędzi. Twórcy najnowszej wersji Blend postanowili ułatwić życie developerom aplikacji Windows Store i zaadaptowali na potrzeby CSS3 edytor znany z XAML.

Przejdźmy do konkretów. Pięć lat temu robiłem pierwsze szkolenie z Silverlight i wtedy pokazywałem animacje klatkowe. Ludzik skakał w kilku etapach, w każdym z nich z inną charakterystyką ruchu… Dziś zrobimy sobie podobne demo. Zamiast ludzika użyjemy samej głowy (o nazwie monster), którą mam zapisaną w postaci Path w SVG. Tworzymy regułę CSS dla #monster i w zakładce Animation po prawej stronie dodajemy animację. Ustawiamy dla niej kilka parametrów np. czas trwania (duration), ilość powtórzeń (iteration-count), sposób kończenia (fill-mode, wartość forwards pozostawia animowany obiekt w takim stanie, w jakim był tuż po zakończeniu animacji), kierunek (direction, opcja alternate przy większej ilości iteracji oznacza wykonywanie animacji na przemian - normalnie i w odwrotnej kolejności).

Animation1

Następnie naciskamy przycisk Edit animation i otwiera się nam edytor animacji.

Animation2

Podobnie jak w aplikacjach XAML przesuwamy suwak po timeline i edytujemy parametry obiektu w wybranych przez nas momentach czasowych np. transformacje. Dla każdego etapu możemy ustawić też inną funkcję charakteryzującą ruch w zakładce Animation. W efekcie powstał następujący opis animacji:

#monster {  
    animation-name: animation;
    animation-duration: 6s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-direction: alternate;
    animation-play-state: running;
}

@keyframes animation {
    0% {
        transform: scale(0.3, 0.3);
        transform-origin: 0px 0px;
        animation-timing-function: linear;
    }

    33.33% {
        transform: translate(550px, 625px) scale(0.3, 0.3);
        transform-origin: 0px 0px;
        animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
    }

    66.67% {
        transform: translate(850px, -12px) scale(0.3, 0.3);
        transform-origin: 0px 0px;
        animation-timing-function: step-end;
    }

    100% {
        transform: translate(1225px, 625px) scale(0.3, 0.3);
        transform-origin: 0px 0px;
    }
}

Jak widzimy, wszystko jest czystym CSS. Głowa najpierw zjeżdża ruchem jednostajnym w dół, potem szybuje w górę (mocno przyspieszając na końcu), a następnie dyskretnie znowu skacze w dół.

czwartek, 14 listopada 2013

Blend dla HTML5 - data binding

Trochę zamiłkłem. Wynikło to z różnych przyczyn. Jedną z nich było opracowanie kompleksowego artykułu o nowościach dla niemal wszystkich developerów Windows 8.1.  Napiszę o tym niedługo, jak zostanie opublikowany. Mimo, że w ramach tego przedsięwzięcia temat został praktycznie wyczerpany, to nie wszystko mogłem tam pokazać. Taki los spotkał m.in nowe edytory w Blend for Visual Studio 2013 i dlatego dwa najbliższe posty zostaną im poświęcone. Dziś krótki pokaz narzędzi do data bindingu.

Edytor data bindingu?  Każdy weteran XAML-a się uśmiechnie, bo to rzecz dość podstawowa. Ale chwila, dzisiaj mówię o HTML5. A, tu już sprawa narzędzi nie jest taka oczywista. Wiele ludzi pisze wszystko ręcznie. Twórcy najnowszego Blend postanowili przypomnieć o lepszych czasach. Poniżej mam w przykładzie ListView z podpiętym itemDataSource pod obiekt WinJS.Binding.List. Na zaznaczonym elemencie HTML otwieram, podobnie jak w XAML, edycję data bindingu. Dostaję, co prawda znacznie bardziej ubogie okienko, ale mogę w końcu wybrać interesującą mnie właściwość z kontekstu danych. Wynika to po części z nieco innej filozofii data bindingu w WinJS (i w innych bibliotekach JS), która zakłada znacznie mniejszą ilość parametrów. Konwerterem w WinJS jest funkcja, służąca do konwersji i formatowania.

DataBinding1

Teraz rzecz ciekawsza, choć też znana weteranom XAML. Chodzi o generowanie szablonu za pomocą kreatora, w którym wybieramy interesujące nas dane z kontekstu. W poniższym przykładzie przy właściwości itemTemplate wybrałem opcję <Create new template…>. Spowodowało to otwarcie okienka o takiej samej nazwie.

DataBinding2

Po wybraniu właściwości backgroundImage (rozpoznaje image!) i title, dostaję w HTML definicję szablonu:

   <div class="newTemplate" data-win-control="WinJS.Binding.Template">
        <div>
            <img data-win-bind="src:backgroundImage" height="100" width="100">
            <div data-win-bind="textContent:title"></div>
        </div>
    </div>

a w designerze na elementach listy od razu pojawiają się obrazki i tekst pod nimi. Całość, co prawda potrzebuje jeszcze ostylowania, niemniej jednak to spore udogodnienie.

Tyle na dziś. Następnym razem napiszę o animacjach.