Ta strona korzysta z plików cookie, abyśmy mogli zapewnić jak najlepszą obsługę. Informacje o plikach cookie są przechowywane w przeglądarce i wykonują takie funkcje, jak rozpoznawanie cię po powrocie do naszej witryny i pomaganie naszemu zespołowi w zrozumieniu, które sekcje witryny są dla Ciebie najbardziej interesujące i przydatne.
10 sztuczek Design Studio – część 8
Animacje CSS
Lumira Designer ma wbudowane wsparcie dla większości dostępnych formatów języka CSS. Korzystając z jego funkcjonalności chcielibyśmy stworzyć prosty element, który poruszy się pod wpływem interakcji użytkownika – a dokładniej, panel ze zdjęciem wysuwający się spod innego elementu. W zależności od używanej przeglądarki składnia kodu może się różnić – wszystkie niezbędne informacje znajdują się na stronie W3school. W naszym przypadku korzystamy z przeglądarki Firefox. Poruszającym się obiektem będzie panel, zawierający zdjęcie pracownika, który ustawiony jest nad elementem, z którego ma się wysunąć (patrz – obrazek poniżej). Nasz obiekt umiejscowiony jest także pod nim, tj. w okienku Outline jego nazwa widnieje powyżej nazwy elementu.
Przechodząc do edytora CSS, zaczynamy od zdefiniowania naszej klatki animacji (definiujemy ją w dowolnym miejscu naszego pliku .css, uważamy jednak, żeby nie umieścić jej w już istniejącej klasie)
@-webkit-keyframesmyfirst{
0% { left:0px; top:200px;}
100% { left:0px;top:0px;}
}
Procentowe wartości określają obecny „stan” naszej animacji. Wartości w nawiasach wskazują na umiejscowienie naszego elementu w jej poszczególnych etapach. W naszym przykładzie chcemy, aby w 1 kroku animacji element znajdował się 200 pikseli niżej niż jest ustawiony, następnie, po minięciu czasu na nią przeznaczony, wrócił do stanu pierwotnego. Aby tchnąć życie w element należy przypisać mu jego własną klasę CSS (w naszym przypadku nazwaną sample), która będzie wykorzystywać zdefiniowaną już klatkę animacji.
.sample{
-webkit-animation-name:myfirst;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:linear;
-webkit-sanimation-iteration-count:1;
}
W kodzie najpierw wskazujemy na nazwę naszej klatki animacji (myfirst), następnie ustalamy czas jej trwania (2 sekundy), ustawiamy liniowe odliczanie czasu oraz liczbę określająca ile razy animacja ma zostać wykonana (1 raz). Jedne co pozostaje to wskazać nasz element jako niewidoczny (Properties, pole Visible), a następnie umieścić poniższy skrypt który „odkryje” element (przy okazji uruchamiając animację) w interesującym nas miejscu (w naszym przypadku – podczas wyboru pracownika).
PANEL_1.setVisible(true);
