Struktura efektów jQuery UI jest modularna, podobnie jak struktura widgetów, pozwalając wybrać, które części pakietu chcesz użyć i zmniejszyć wymagania dotyczące kodu. Możesz utwórz niestandardowe pobieranie dla siebie, który bierze pod uwagę zależności między modułami.

Zanim zaczniesz analizować, jak stworzyć nowy efekt, powinieneś zdawać sobie sprawę z innej funkcjonalności, którą oferuje framework efektów jQuery UI, abyś mógł z niego korzystać przy opracowywaniu własnych efektów.

U podstaw poszczególnych modułów efektów jQuery UI znajduje się rdzeń powszechnie stosowanej funkcjonalności. Umiejętności te są zaimplementowane tutaj, abyś nie musiał ich wymyślać ponownie i mógł je natychmiast zastosować do własnych efektów. Wraz z animacją kolorów znajdziesz animację od atrybutów jednej klasy do drugiej oraz kilka niskopoziomowych funkcji, które mogą być przydatne przy opracowywaniu nowych efektów.

Animacja kolorów

Moduł Effects Core dodaje obsługę niestandardowej animacji dla atrybutów stylu, które zawierają wartości kolorów: kolory pierwszego planu i tła oraz kolory obramowania i konturu. jQuery pozwala tylko na animację atrybutów, które są prostymi wartościami liczbowymi, z opcjonalnym oznacznikiem jednostek, takim jak px, em lub%. Nie wie, jak interpretować bardziej złożone wartości, takie jak kolory, lub jak prawidłowo zwiększać te wartości, aby uzyskać pożądane przejście, np. Z niebieskiego na czerwony przez pośredni fioletowy kolor.

Wartości kolorów składają się z trzech komponentów: wkładu czerwonego, zielonego i niebieskiego, z których każdy ma wartość od 0 do 255. Można je określić w HTML i CSS na wiele różnych sposobów, jak pokazano poniżej:

  • Cyfry szesnastkowe- # DDFFE8
  • Minimalne cyfry szesnastkowe - # CFC
  • Wartości dziesiętne RGB-rgb (221, 255, 232)
  • Dziesiętne wartości procentowe RGB-rgb (87%, 100%, 91%)
  • Wartości dziesiętne RGB i przezroczystości-rgba (221, 255, 232, 127)
  • Nazwany kolor-wapno

Składniki czerwony, zielony i niebieski muszą zostać oddzielone i indywidualnie animowane od wartości początkowych do końcowych, zanim zostaną połączone w nowy kolor złożony dla etapów pośrednich. jQuery UI dodaje kroki animacji dla każdego atrybutu, którego dotyczy problem, aby poprawnie dekodować bieżące i pożądane kolory oraz aby zmienić wartość podczas animacji. Oprócz formatów kolorów opisanych na poprzedniej liście, połączenie animate może również przyjmować tablicę trzech wartości numerycznych (każda od 0 do 255), aby określić kolor. Po zdefiniowaniu tych funkcji można animować kolory w taki sam sposób, jak w przypadku innych atrybutów liczbowych:

$('#myDiv').animate({backgroundColor: '#DDFFE8'});

Interfejs jQuery zawiera rozwiniętą listę nazwanych kolorów, które rozumie, od podstawowego czerwonego i zielonego do bardziej ezoterycznego ciemnego i ciemnego łososia. Jest nawet przezroczysty kolor.

Animacja klas

Standardowy jQuery pozwala dodawać, usuwać lub przełączać klasy na wybrane elementy. Interfejs jQuery idzie o jeden lepszy, umożliwiając animację przejścia między stanem przed i po. Czyni to poprzez wyodrębnianie wszystkich wartości atrybutów, które mogą być animowane (wartości liczbowe i kolory) z konfiguracji początkowej i końcowej, a następnie wywoływanie standardowego połączenia animate z wszystkimi tymi właściwościami jako właściwościami do zmiany. Ta nowa animacja jest wyzwalana przez określenie czasu trwania podczas wywoływania funkcji addClass, removeClass lub toggleClass:

$('#myDiv').addClass('highlight', 1000);

jQuery UI dodaje również nową funkcję, switchClass, która usuwa klasę i dodaje klasę, z opcjonalnym przejściem między dwoma stanami (przy zapewnieniu czasu trwania):

$('#myDiv').switchClass('oldClass', 'newClass', 1000);

Typowe funkcje efektów

Aby lepiej obsługiwać różne efekty interfejsu jQuery, moduł Effects Core udostępnia kilka funkcji przydatnych dla tych efektów, a być może także dla własnych. Aby zilustrować, jak wiele z tych funkcji jest używanych, poniższy wykaz pokazuje odpowiednie części efektu slajdu.

$.effects.effect.slide = function( o, done ) {// Create elementvar el = $( this ),props = [ "position", "top", "bottom", "left", "right", "width", "height" ],mode = $.effects.setMode( el, o.mode || "show" ), ...; // Determine mode of operation// Adjust$.effects.save( el, props ); // Save current settingsel.show();distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true );$.effects.createWrapper( el ).css({overflow: "hidden"}); // Create wrapper for animation...// Animationanimation[ ref ] = ...;// Animateel.animate( animation, {queue: false,duration: o.duration,easing: o.easing,complete: function() {if ( mode === "hide" ) {el.hide();}$.effects.restore( el, props ); // Restore original settings$.effects.removeWrapper( el ); // Remove animation wrapperdone();}});};

Możesz użyć funkcji setMode, aby przekształcić tryb przełączania na odpowiednią wartość show lub hide w oparciu o bieżącą widoczność elementu. Jeśli podany tryb jest pokazywany lub ukrywany, zachowuje on tę wartość, w tym przypadku wartość domyślna pokazuje, jeśli nie została podana w ogóle.

Przed rozpoczęciem animacji efektu, możesz użyć funkcji zapisywania, aby zapamiętać oryginalne wartości kilku atrybutów (od nazw w rekwizytach) na elemencie, aby można je było przywrócić po zakończeniu. Wartości są przechowywane na elemencie za pomocą funkcji danych jQuery.

Aby ułatwić ruch elementu dla efektu, możesz owinąć pojemnik wokół tego elementu za pomocą funkcji createWrapper, która posłuży jako punkt odniesienia dla ruchu. Informacje pozycyjne są kopiowane z określonego elementu na opakowanie, dzięki czemu pojawia się bezpośrednio nad oryginalnym elementem. Element jest następnie umieszczany w nowym kontenerze u góry po lewej stronie, tak aby ogólny efekt był niezauważalny przez użytkownika. Funkcja zwraca odniesienie do opakowania.

Wszelkie zmiany w lewym / prawym / górnym / dolnym ustawieniu oryginalnego elementu będą teraz odnoszone do jego pierwotnej pozycji, bez wpływu na otaczające elementy. Po zapisaniu pewnych wartości atrybutów wcześniej, użyjesz funkcji przywracania po zakończeniu animacji, aby przywrócić oryginalne ustawienia. W tym samym czasie powinieneś usunąć wszelkie otoki utworzone wcześniej za pomocą funkcji remove-Wrapper. Ta funkcja zwraca odniesienie do opakowania, jeśli zostało usunięte, lub do samego elementu, jeśli nie było opakowania.

Istnieje kilka innych funkcji dostarczanych przez moduł jQuery UI Effects Core, które mogą być przydatne:

getBaseline (początek, oryginał) Ta funkcja normalizuje specyfikację początku (dwuelementową tablicę pozycji pionowych i poziomych) na wartości ułamkowe (0,0 do 1,0) z uwzględnieniem rozmiaru oryginalnego (obiekt z atrybutami wysokości i szerokości). Konwertuje nazwane pozycje (góra, lewo, centrum itd.) Na wartości 0,0, 0,5 lub 1,0 i konwertuje wartości liczbowe na proporcje odpowiedniego wymiaru. Zwrócony obiekt ma atrybuty x i y, które przechowują ułamkowe wartości w odpowiednich kierunkach. Na przykład,

var baseline = $.effects.getBaseline(['middle', 20], {height: 100, width: 200}); // baseline = {x: 0.1, y: 0.5}

setTransition (element, lista, czynnik, wartość) Aby zastosować współczynnik skalowania do wielu wartości atrybutów jednocześnie, użyj tej funkcji. Dla każdej nazwy atrybutu na liście pobierz jej bieżącą wartość dla elementu i zaktualizuj ją, mnożąc ją przez współczynnik. Ustaw wynik w obiekcie wartości pod nazwą atrybutu i zwróć ten obiekt z funkcji. Na przykład, aby zmniejszyć pewne wartości o połowę, możesz to zrobić:

el.from = $.effects.setTransition(el, ['borderTopWidth', 'borderBottomWidth', ...], 0.5, el.from);

cssUnit (klucz) Aby oddzielić nazwany atrybut (klucz) CSS na jego ilość i jednostki (em, pt, px lub%), zwrócony jako tablica dwóch wartości, użyj tej funkcji. Jeśli jednostki nie są jednym z tych znanych typów, zwracana jest pusta tablica. Na przykład,

var value = el.cssUnit('width'); // e.g. value = [200, 'px']

Funkcje przedstawione w tej sekcji są używane przez wiele efektów dostarczanych przez interfejs użytkownika jQuery. Te efekty są omówione w następnej sekcji.

Istniejące efekty

Liczne efekty zapewnia interfejs użytkownika jQuery. Większość z nich ma na celu podkreślenie, w jaki sposób element pojawia się lub znika (np. Ślepy i upuszczony), podczas gdy inne służą do zwracania uwagi na element (taki jak podświetlenie i potrząśnięcie):

  • blind: Element rozwija się lub kurczy pionowo (domyślnie) lub poziomo od góry lub z lewej strony
  • Odbijanie: Element wpada do lub z widoku i odbija się kilka razy
  • klip: Element rozwija się lub kurczy pionowo (domyślnie) lub poziomo od linii środkowej
  • upuszczenie: Element wsuwa się do lub z widoku od lewej (domyślnie) lub od góry i zanika do pełnego krycia lub z niego
  • wybuch: element rozbija się na sekcje i odrywa muchy lub ponownie składa się z latających części
  • zanikanie: Element zanika do pełnego krycia lub z niego
  • zwiń: Element rozszerza się lub kurczy najpierw w jednym kierunku, potem w drugim (domyślnie poziomo i pionowo)
  • highlight: Element szybko zmienia kolor tła
  • dmuchnięcie: Element zmniejsza się lub zwiększa i zanika do pełnego krycia lub z niego
  • pulsuje: element zanika i kilka razy
  • scale: Element rozwija się lub kurczy od lub do jego środka o wartość procentową
  • shake: Element przesuwa się kilka razy z boku na bok
  • size: Element zmniejsza się lub zwiększa rozmiar do podanych wymiarów
  • slide: Element przesuwa się poziomo (domyślnie) lub pionowo od swojej własnej krawędzi
  • transfer: Element zostaje przeniesiony i przeskalowany, aby dopasować element docelowy

Efekty te mogą być używane w połączeniu z ulepszonym interfejsem użytkownika jQuery, ukrywania i przełączania funkcji, podając nazwę pożądanego efektu jako pierwszy parametr. Możesz również dostarczyć dodatkowe opcje, które zmieniają zachowanie efektu, czas trwania animacji i wywoływaną funkcję wywołania zwrotnego po zakończeniu.

$('#aDiv').hide('clip');$('#aDiv').toggle('slide', {direction: 'down'}, 1000);

Podsumowanie

Do modułów jQuery UI należą niektóre podstawowe funkcje narzędziowe, zachowania niskiego poziomu (takie jak przeciąganie i upuszczanie), komponenty wysokiego poziomu lub widgety (takie jak Tabs i Datepicker) oraz liczne efekty wizualne. Możesz użyć tych efektów, aby ulepszyć prezentację elementów na swojej stronie internetowej lub zwrócić uwagę użytkownika na dany element. Aby pomóc Ci w tworzeniu własnych efektów, dostępny jest rdzeń najczęściej używanych funkcji.

Czy używałeś frameworku efektów jQuery UI? W jaki sposób porównuje się z natywnymi animacjami CSS? Daj nam znać swoje myśli w komentarzach.