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