MooTools - Fx.Options

上一頁
下一頁

MooTools 提供了不同的 Fx.Options，可以幫助 Fx.Tween 和 Fx.Morph。這些選項將使您能夠控制效果。

讓我們討論 MooTools 提供的一些選項。在繼續之前，請檢視以下設定選項的語法。

語法

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

fps（每秒幀數）

此選項確定變形期間動畫的每秒幀數。我們可以將這些 fps 應用於 Morph 或 Tween 功能。預設情況下，fps 的值為 50。這意味著任何功能在變形時都將以每秒 50 幀的速度執行。

示例

讓我們舉一個例子，我們將使用 5 fps 對 div 元素進行變形。請檢視以下程式碼。

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

您將收到以下輸出 -

輸出

點選開始按鈕以查詢變形動畫。這有助於我們觀察動畫使用的幀數。使用不同的 fps 值來獲取動畫的差異。建議使用小於 10 的 fps 值。這將幫助您更容易地看到差異。

單位

此選項用於設定數字的單位型別。通常，我們有三種不同的單位型別：px、% 和 ems。請檢視以下語法。

語法

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

以上語法是將百分比分配給單位。這意味著所有數字值都被視為百分比。

連結

此選項提供了一種管理多個呼叫以啟動動畫的方法。如果您同時應用多個事件呼叫，則這些呼叫將被視為連結呼叫。第一個呼叫完成後，第二個呼叫會自動執行。它包含以下三個選項 -

  • 忽略 - 這是預設選項。它會忽略任何數量的呼叫，直到它完成效果。

  • 取消 - 當有另一個呼叫時，此選項會取消當前效果。它遵循最新的呼叫優先順序。

  • 鏈 - 這允許您將效果連結在一起並維護呼叫的堆疊。它會執行所有呼叫，直到它遍歷堆疊中的所有連結呼叫。

請檢視以下使用連結選項的語法。

語法

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

持續時間

此選項用於定義動畫的持續時間。例如，如果您希望一個物件在 1 秒的持續時間內移動 100px，那麼它的移動速度將比一個物件在 1 秒內移動 1000px 慢。您可以輸入以毫秒為單位的數字。或者，您可以使用以下三個選項中的任何一個來代替數字。

  • 短 = 250ms
  • 正常 = 500ms（預設）
  • 長 = 1000ms

請檢視以下使用持續時間的語法。

語法

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

或者，

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

過渡

此選項用於確定過渡型別。例如，它應該是平滑過渡還是應該緩慢開始然後在結束時加速。請檢視以下應用過渡的語法。

語法

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

下表描述了不同型別的過渡。

序號 過渡型別和描述
1

線性

顯示線性過渡，包括 in、out、in-out 事件
2

二次

顯示二次過渡，包括 in、out、in-out 事件
3

三次

顯示三次過渡，包括 in、out、in-out 事件
4

四次

顯示四次過渡，包括 in、out、in-out 事件
5

五次

顯示五次過渡，包括 in、out、in-out 事件
6

冪

用於生成二次、三次、四次和五次，包括 in、out、in-out 事件
7

指數

顯示指數過渡，包括 in、out、in-out 事件
8

圓形

顯示圓形過渡，包括 in、out、in-out 事件
9

正弦

顯示正弦過渡，包括 in、out、in-out 事件
10

回彈

使過渡先回彈，然後向前，包括 in、out、in-out 事件
11

彈跳

使過渡具有彈跳效果，包括 in、out、in-out 事件
12

彈性

彈性曲線過渡，包括 in、out、in-out 事件
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.