MooTools - Fx.Options

MooTools zapewnia różne Fx.Options, które pomogą Fx.Tween i Fx.Morph. Te opcje zapewniają kontrolę nad efektami.

Omówmy kilka opcji, które zapewniają MooTools. Zanim przejdziemy dalej, spójrz na następującą składnię konfigurowania opcji.

Składnia

var morphObject = new Fx.Morph(morphElement, {
   //first state the name of the option
   //place a :
   //then define your option
});

fps (klatki na sekundę)

Ta opcja określa liczbę klatek na sekundę w animacji podczas przekształcania. Możemy zastosować te fps do funkcji Morph lub Tween. Domyślnie wartość fps wynosi 50. Oznacza to, że każda funkcjonalność podczas morfingu zajmie 50 klatek na sekundę.

Przykład

Weźmy przykład, w którym dokonamy morfowania elementu div przy użyciu 5 fps. Spójrz na poniższy kod.

<!DOCTYPE html>
<html>

   <head>
      <style>
         #morph_element {
            width: 100px;
            height: 100px;
            background-color: #1A5276;
            border: 3px solid #dd97a1;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var morphStart = function(){
            this.start({
               'width': 200,
               'height': 200,
               'background-color': '#d3715c'
            });
         }
         
         window.addEvent('domready', function() {
            var morphElement = $('morph_element');
            var morphObject = new Fx.Morph(morphElement, {
               fps: 5
            });
            
            $('start').addEvent('click', morphStart.bind(morphObject));
         });
      </script>
   </head>
   
   <body>
      <div id = "morph_element"> </div><br/>
      <input type = "button" id = "start"value = "START"/>
   </body>
   
</html>

Otrzymasz następujący wynik -

Wynik

Kliknij na STARTprzycisk, aby znaleźć animację morfingu. Pomaga nam to obserwować liczbę klatek używanych do animacji. Użyj różnych wartości fps, aby uzyskać różnicę w animacji. Zalecane jest używanie wartości fps mniejszej niż 10. To pomoże ci łatwo uzyskać różnicę.

jednostka

Ta opcja służy do ustawiania typu jednostki dla liczb. Generalnie mamy trzy różne typy jednostek - px,% i ems. Spójrz na następującą składnię.

Składnia

var morphObject = new Fx.Morph(morphElement, {
   unit: '%'
});

Powyższa składnia polega na przypisaniu wartości procentowej jednostkom. Oznacza to, że wszystkie wartości liczbowe są traktowane jako procenty.

połączyć

Ta opcja umożliwia zarządzanie wieloma wywołaniami w celu rozpoczęcia animacji. Jeśli zastosujesz jednocześnie wiele wywołań zdarzeń, będą one traktowane jako wywołania linków. Po zakończeniu pierwszego wywołania drugie wywołanie jest wykonywane automatycznie. Zawiera następujące trzy opcje -

  • ignore- To jest opcja domyślna. Ignoruje dowolną liczbę wywołań, dopóki nie zakończy efektu.

  • cancel- To anuluje obecny efekt, gdy jest wykonywany inny. Jest zgodny z najnowszym priorytetem połączeń.

  • Chain- Pozwala to łączyć efekty razem i utrzymywać stos wywołań. Wykonuje wszystkie wywołania, dopóki nie przejdzie przez wszystkie połączone wywołania na stosie.

Spójrz na następującą składnię dotyczącą korzystania z opcji łącza.

Składnia

var morphObject = new Fx.Morph(morphElement, {
   link: 'chain'
});

Trwanie

Ta opcja służy do określenia czasu trwania animacji. Na przykład, jeśli chcesz, aby obiekt poruszał się o 100 pikseli w czasie 1 sekundy, będzie poruszał się wolniej niż obiekt poruszający się o 1000 pikseli w ciągu 1 sekundy. Możesz wprowadzić liczbę mierzoną w milisekundach. Lub możesz użyć dowolnej z tych trzech opcji zamiast liczb.

  • Krótki = 250 ms
  • Normalny = 500 ms (domyślnie)
  • Długi = 1000 ms

Spójrz na następującą składnię dotyczącą używania czasu trwania.

Składnia

var morphObject = new Fx.Morph(morphElement, {
   duration: 'long'
});

Lub,

var morphObject = new Fx.Morph(morphElement, {
   duration: 1000
});

przejście

Ta opcja służy do określenia typu przejścia. Na przykład, jeśli powinno to być płynne przejście lub powinno zaczynać się powoli, przyspieszyć pod koniec. Spójrz na następującą składnię, aby zastosować przejście.

Składnia

var tweenObject = new Fx.Tween(tweenElement, {
   transition: 'quad:in'
});

W poniższej tabeli opisano różne typy przejść.

S.No. Typ i opis przejścia
1

Liniowy

Wyświetla liniowe przejście ze zdarzeniami in, out, in-out

2

Kwadrat

Wyświetla kwadratowe przejście ze zdarzeniami in, out, in-out

3

Sześcienny

Wyświetla sześcienne przejście ze zdarzeniami in, out, in-out

4

Kwarta

Wyświetla przejście kwartetyczne bez wydarzeń in, out, in-out

5

Kwinta

Wyświetla kwintyczne przejście ze zdarzeniami in, out, in-out

6

Pow

Służy do generowania Quad, Cubic, Quart i Quint ze zdarzeniami in, out, in-out

7

Expo

Wyświetla wykładnicze przejście ze zdarzeniami in, out, in-out

8

Circ

Wyświetla okrągłe przejście ze zdarzeniami in, out, in-out

9

Sinus

Wyświetla przejście sinusoidalne ze zdarzeniami in, out, in-out

10

Plecy

Sprawia, że ​​przejście się cofa, a potem wszystko z powrotem, ze zdarzeniami: wejście, wyjście, wejście-wyjście

11

Odbić się

Sprawia, że ​​przejście jest sprężyste w przypadku wydarzeń in, out, in-out

12

Elastyczny

Elastyczne przejście krzywej ze zdarzeniami in, out, in-out