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: '%'
});

上面的语法是将百分比分配给单位。这意味着所有数字值都被视为百分比。

关联

此选项提供了一种管理多个调用以启动动画的方法。如果您一次应用多个事件调用，这些调用将被视为链接调用。第一个调用完成后，第二个调用将自动执行。它包含以下三个选项 -

忽略- 这是默认选项。它会忽略任意数量的调用，直到完成效果。
cancel - 当有另一个效果发生时，这会取消当前效果。它遵循最新的呼叫优先级。
链- 这使您可以将效果链接在一起并维护调用堆栈。它执行所有调用，直到遍历堆栈中的所有链接调用。

查看以下使用链接选项的语法。

句法

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

期间

该选项用于定义动画的持续时间。例如，如果您希望一个对象在 1 秒内移动 100px，那么它会比对象在 1 秒内移动 1000px 慢。您可以输入一个以毫秒为单位的数字。或者您可以使用这三个选项中的任何一个来代替数字。

短=250ms
正常 = 500ms（默认）
长 = 1000 毫秒

看一下以下使用持续时间的语法。

句法

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	线性显示带有输入、输出、输入输出事件的线性过渡
2	四人组显示带有输入、输出、输入输出事件的二次转换
3	立方体显示带有输入、输出、输入输出事件的立方体过渡
4	夸脱显示带有输入、输出、输入输出事件的四次转换
5	昆特显示带有输入、输出、输入输出事件的五次转换
6	战俘用于生成带有 in、out、in-out 事件的 Quad、Cubic、Quart 和 Quint
7	世博会显示带有输入、输出、输入输出事件的指数转换
8	环路显示带有 in、out、in-out 事件的循环过渡
9	正弦显示带有输入、输出、输入输出事件的正弦过渡
10	后退使转换返回，然后进行所有 in、out、in-out 事件
11	弹跳通过 in、out、in-out 事件使过渡充满弹性
12	松紧带带有输入、输出、输入输出事件的弹性曲线过渡

编号	转换类型和描述
1	线性显示带有输入、输出、输入输出事件的线性过渡
2	四人组显示带有输入、输出、输入输出事件的二次转换
3	立方体显示带有输入、输出、输入输出事件的立方体过渡
4	夸脱显示带有输入、输出、输入输出事件的四次转换
5	昆特显示带有输入、输出、输入输出事件的五次转换
6	战俘用于生成带有 in、out、in-out 事件的 Quad、Cubic、Quart 和 Quint
7	世博会显示带有输入、输出、输入输出事件的指数转换
8	环路显示带有 in、out、in-out 事件的循环过渡
9	正弦显示带有输入、输出、输入输出事件的正弦过渡
10	后退使转换返回，然后进行所有 in、out、in-out 事件
11	弹跳通过 in、out、in-out 事件使过渡充满弹性
12	松紧带带有输入、输出、输入输出事件的弹性曲线过渡