📜  MooTools-Fx.Options

📅  最后修改于: 2020-10-22 06:41:45             🧑  作者: Mango


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元素进行变形。看一下下面的代码。


      
      
      
      
      
   
   
   
      

您将收到以下输出-

输出

单击“开始”按钮以查找变形动画。这有助于我们观察用于动画的帧数。对fps使用不同的值可获得不同的动画效果。建议使用小于10的fps值。这将帮助您轻松获得差异。

单元

此选项用于设置数字的单位类型。通常,我们有三种不同类型的单位-px,%和ems。看一下下面的语法。

句法

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

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

链接

此选项提供了一种管理多个启动动画的调用的方法。如果您一次应用多个事件调用,这些调用将被当作链接调用。一旦第一个调用结束,则第二个调用将自动执行。它包含以下三个选项-

  • 忽略-这是默认选项。在完成效果之前,它将忽略任何数量的呼叫。

  • 取消-当正在制作另一种效果时,这将取消当前效果。它遵循最新的呼叫优先级。

  • 链接-这使您可以将效果链接在一起并维护调用堆栈。它执行所有调用,直到通过堆栈中的所有链接调用为止。

看一下使用link选项的以下语法。

句法

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

持续时间

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

  • 短= 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'
});

下表描述了不同类型的过渡。

S.No. Transition type & Description
1

Linear

Displays a linear transition with in, out, in-out events

2

Quad

Displays a quadratic transition with in, out, in-out events

3

Cubic

Displays a cubicular transition with in, out, in-out events

4

Quart

Displays a quartetic transition with in, out, in-out events

5

Quint

Displays a quintic transition with in, out, in-out events

6

Pow

Used to generate Quad, Cubic, Quart and Quint with in, out, in-out events

7

Expo

Displays an exponential transition with in, out, in-out events

8

Circ

Displays a circular transition with in, out, in-out events

9

Sine

Displays a sineousidal transition with in, out, in-out events

10

Back

Makes the transition go back, then all forth with in, out, in-out events

11

Bounce

Makes the transition bouncy with in, out, in-out events

12

Elastic

Elastic curve transition with in, out, in-out events