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).

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

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ół.