Jak tworzyć animacje i przejścia za pomocą Motion UI

Animacje i przejścia pozwalają projektantom wizualizować zmiany i różnicować zawartość. Animacje i przejścia są efektami ruchomymi pomóc użytkownikom rozpoznać, kiedy coś się zmienia na stronie, na przykład, klikają przycisk, a na ekranie pojawia się nowa informacja. Dodanie ruchu do aplikacji i stron internetowych poprawia wrażenia użytkownika, ponieważ pozwala użytkownikom zrozumienie treści w bardziej intuicyjny sposób.

Możemy tworzyć animacje i przejścia od podstaw lub za pomocą bibliotek lub frameworków. Dobrą wiadomością dla nas, ludzi z frontendu, jest to, że Zurb, twórca Fundacji, otwarty w październiku ubiegłego roku Motion UI, jej biblioteka animacji i przejścia oparta na Sassie.

Został on pierwotnie dołączony do Foundation for Apps, a teraz do samodzielnego wydania otrzymał aktualizację, w tym system kolejkowania animacji i elastyczne wzorce CSS. Motion UI obsługuje także niektóre komponenty ramy Foundation, takie jak suwak Orbit, przełącznik Toggler i modal Reveal, więc jest to dość solidne narzędzie.

Rozpoczęcie pracy

Chociaż Motion UI jest biblioteką Sass, niekoniecznie trzeba go używać z Sass, ponieważ Zurb zapewnia programistom poręczny zestaw startowy, który zawiera tylko skompilowany CSS. Możesz pobrać go ze strony domowej Motion UI i szybko zacząć prototypować za pomocą predefiniowanej animacji CSS i klas przejścia.

Zestaw startowy nie tylko zawiera Motion UI, ale także ramy Foundation, co oznacza, że ​​możesz użyć siatki Foundation i wszystkich innych funkcji Foundation for Sites, jeśli chcesz.

Zestaw startowy jest również dostarczany z index.html plik, który pozwala szybko przetestować strukturę.

Jeśli potrzebujesz bardziej zaawansowanych ustawień i chcesz skorzystać z potężnych miksów Sass Motion UI, możesz zainstalować pełną wersję zawierającą źródło .scss pliki z npm lub Bower.

Dokumentacja Motion UI jest obecnie na wpół wypalona. Możesz go znaleźć tutaj na Github lub wnieść swój wkład, jeśli chcesz.

Szybkie prototypowanie

Aby rozpocząć prototypowanie, możesz edytować index.html plik zestawu startowego lub utwórz własny plik HTML. Układ można zbudować za pomocą siatki Foundation, ale Motion UI może być również używany jako samodzielna biblioteka bez ramy Foundation.

Istnieją 3 główne typy predefiniowanych klas CSS w Motion UI:

1. Klasy przejścia - umożliwiają dodawanie przejść, takich jak przesuwanie, zanikanie i efekty zawiasowe do elementu HTML.
2. Klasy animacji - umożliwiają używanie różnych efektów wytrząsania, poruszania się i wirowania
3. Klasy modyfikatorów - współpracuj zarówno z klasami przejścia, jak i animacji, a pozwalają one dostosować szybkość, czas i opóźnienie ruchu.

Budowanie HTML

Wspaniałą rzeczą w predefiniowanych klasach CSS jest to, że nie można ich używać tylko jako klas, ale także jako innych atrybutów HTML. Na przykład możesz dodaj je do wartość atrybut etykietka, lub możesz używaj ich w swoim własnym zwyczaju dane-* atrybut także.

W poniższym fragmencie kodu wybrałem tę drugą opcję oddzielne klasy zachowania i modyfikatora. Użyłem powolny i łatwość atrybuty modyfikatora jako klasy i stworzył niestandardowy animacja danych atrybut dla skala w górę przejście. The Kliknij przycisk ma wywołać efekt.

 
 Kliknij  

Odtwarzanie animacji i przejść za pomocą jQuery

Interfejs Motion zawiera niewielką bibliotekę JavaScript, która może odtwarzać przejścia i animacje po wystąpieniu określonego zdarzenia.

Sama biblioteka znajduje się w zestawie startowym w motion-ui-starter> js> vendor> motion-ui.js ścieżka.

Tworzy MotionUI obiekt, który ma dwie metody: animateIn () i animateOut (). Przejście lub animacja związana z określonym elementem HTML ( tag w naszym przykładzie) może zostać wywołany za pomocą jQuery w następujący sposób:

 $ (function () $ (". button"). click (function () var $ animation = $ ("# boom"). data ("animacja"); MotionUI.animateIn ($ ("# boom") , $ animation);););

W powyższym fragmencie kodu uzyskaliśmy dostęp do animacja danych atrybut za pomocą wbudowanego jQuery dane() metoda, a następnie nazywana animateIn () metoda MotionUI obiekt.

Oto pełny kod i wynik. Użyłem wbudowanych klas przycisków dla frameworków Foundation Kliknij i dodałem trochę podstawowego CSS.

Ponieważ interfejs użytkownika jest dość elastyczny, można także dodawać i uruchamiać przejścia i animacje na wiele innych sposobów.

Na przykład w powyższym przykładzie niekoniecznie musimy użyć animacja danych atrybut niestandardowy, ale można po prostu dodać klasę zachowania za pomocą addClass () Metoda jQuery do element w następujący sposób:

 $ ('# boom'). addClass ('scale-in-up');

Dostosowywanie z Sass

Gotowe klasy CSS Motion UI używają domyślnych wartości, które można łatwo dostosować za pomocą Sass. Za każdym przejściem i animacją kryje się miks Sass, który umożliwia zmianę ustawień efektu. W ten sposób możesz łatwo utworzyć w pełni niestandardową animację lub przejście.

Dostosowanie nie będzie jednak działać z zestawem startowym, musisz zainstalować wersję Sass, jeśli chcesz skonfigurować efekty zgodnie z własnymi potrzebami.

Aby dostosować przejście lub animację, najpierw musisz znajdź odpowiednią mieszankę. The _classes.scss plik zawiera nazwy skompilowanych klas CSS z odpowiednimi miksami.

W naszym przykładzie użyliśmy .skala w górę atrybut i rzucając okiem na _classes.scss, możemy szybko dowiedzieć się, że korzysta z mui-zoom mixin:

 // Transitions @mixin motion-ui-transitions … // Skala .scale-in-up @include mui-zoom (in, 0,5, 1); …

Motion UI używa mui- prefiks do miksów, a każdy miks ma swój własny plik. Motion UI ma dość oczywiste konwencje nazewnictwa, więc możemy szybko znaleźć mui-zoom mieszać w _zoom.scss plik:

 @mixin mui-zoom ($ state: in, $ from: 1.5, $ to: 1, $ fade: map-get ($ motion-ui-settings, scale-and-fade), $ duration: null, $ timing: null, $ delay: null) …

Korzystając z tej samej techniki, możesz łatwo kontrolować każdą cechę animacji lub przejścia, zmieniając wartości odpowiednich zmiennych Sass.

Konfigurowanie klas modyfikatorów

Klasy modyfikatorów, które kontrolują zachowanie (szybkość, czas i opóźnienie) animacji i przejść, można również konfigurować za pomocą Sass, modyfikując wartości odpowiednich zmiennych w _settings.scss plik.

Po wprowadzeniu zmian nastąpi ruchowy interfejs użytkownika użyj nowych wartości jako domyślnych w każdej animacji i przejściu, więc nie będziesz musiał konfigurować powiązanych miksów pojedynczo.