MooTools - Fx.Options

MooTools fornisce diverse opzioni Fx.Options che aiuteranno Fx.Tween e Fx.Morph. Queste opzioni ti daranno un controllo sugli effetti.

Parliamo di alcune opzioni fornite da MooTools. Prima di procedere, dai un'occhiata alla seguente sintassi per l'impostazione delle opzioni.

Sintassi

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

fps (fotogrammi al secondo)

Questa opzione determina il numero di fotogrammi al secondo nell'animazione durante il morphing. Possiamo applicare questi fps alle funzionalità Morph o Tween. Per impostazione predefinita, il valore di fps è 50. Ciò significa che qualsiasi funzionalità richiederà 50 fotogrammi al secondo durante il morphing.

Esempio

Facciamo un esempio in cui trasformeremo un elemento div usando 5 fps. Dai un'occhiata al seguente codice.

<!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>

Riceverai il seguente output:

Produzione

Clicca sul STARTpulsante per trovare l'animazione del morphing. Questo ci aiuta a osservare il numero di fotogrammi utilizzati per l'animazione. Usa valori diversi per fps per ottenere la differenza nell'animazione. Si consiglia di utilizzare il valore fps inferiore a 10. Questo ti aiuterà a ottenere facilmente la differenza.

unità

Questa opzione viene utilizzata per impostare il tipo di unità per i numeri. In generale, abbiamo tre diversi tipi di unità: px,% ed ems. Dai un'occhiata alla seguente sintassi.

Sintassi

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

La sintassi sopra è di allocare la percentuale alle unità. Ciò significa che tutti i valori in numeri vengono trattati come percentuali.

collegamento

Questa opzione fornisce un modo per gestire più chiamate per avviare un'animazione. Se applichi più chiamate di eventi contemporaneamente, queste chiamate verranno accettate come chiamate di collegamento. Al termine della prima chiamata, la seconda viene eseguita automaticamente. Contiene le seguenti tre opzioni:

  • ignore- Questa è l'opzione predefinita. Ignora qualsiasi numero di chiamate fino a quando non completa l'effetto.

  • cancel- Questo annulla l'effetto corrente, quando ne viene creato un altro. Segue la precedenza delle chiamate più recenti.

  • Chain- Questo ti consente di concatenare gli effetti insieme e mantenere lo stack di chiamate. Esegue tutte le chiamate finché non passa attraverso tutte le chiamate concatenate nello stack.

Dai un'occhiata alla seguente sintassi per l'utilizzo dell'opzione di collegamento.

Sintassi

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

Durata

Questa opzione viene utilizzata per definire la durata dell'animazione. Ad esempio, se desideri che un oggetto si muova di 100 px nella durata di 1 secondo, andrà più lentamente di un oggetto che si sposta di 1000 px in 1 secondo. È possibile inserire un numero misurato in millisecondi. Oppure puoi utilizzare una qualsiasi di queste tre opzioni al posto dei numeri.

  • Breve = 250 ms
  • Normale = 500 ms (predefinito)
  • Lungo = 1000 ms

Dai un'occhiata alla seguente sintassi per l'utilizzo della durata.

Sintassi

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

O,

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

transizione

Questa opzione viene utilizzata per determinare il tipo di transizione. Ad esempio, se dovrebbe essere una transizione graduale o dovrebbe iniziare lentamente, accelerare verso la fine. Dai un'occhiata alla seguente sintassi per applicare la transizione.

Sintassi

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

La tabella seguente descrive i diversi tipi di transizioni.

S.No. Tipo di transizione e descrizione
1

Lineare

Visualizza una transizione lineare con eventi in, out, in-out
2

Quad

Visualizza una transizione quadratica con eventi in, out, in-out
3

Cubo

Visualizza una transizione cubica con eventi in, out, in-out
4

Quart

Visualizza una transizione quartetica con eventi in, out, in-out
5

Quint

Visualizza una transizione quintica con eventi in, out, in-out
6

Pow

Utilizzato per generare eventi Quad, Cubic, Quart e Quint con eventi in, out, in-out
7

Expo

Visualizza una transizione esponenziale con eventi in, out, in-out
8

Circ

Visualizza una transizione circolare con eventi in, out, in-out
9

Sine

Visualizza una transizione sinusoidale con eventi in, out, in-out
10

Indietro

Rende la transizione indietro, poi tutta avanti con eventi dentro, fuori, dentro-fuori
11

Rimbalzo

Rende la transizione vivace con eventi in, out, in-out
12

Elastico

Transizione curva elastica con eventi in, out, in-out