MooTools - Fx.Options
MooTools 提供了不同的 Fx.Options，它们将有助于 Fx.Tween 和 Fx.Morph。这些选项将让您控制效果。
让我们讨论一下 MooTools 提供的一些选项。在继续之前，请先查看以下用于设置选项的语法。
语法
var morphObject = new Fx.Morph(morphElement, {
//首先声明选项的名称
//放置 :
//然后定义您的选项
});
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>
您将收到以下输出 −
输出
点击START按钮找到变形动画。这有助于我们观察动画使用的帧数。使用不同的fps值来获取动画的差异。建议使用小于10的fps值。这将帮助您轻松获得差异。
unit
此选项用于设置数字的单位类型。通常，我们有三种不同类型的单位——px、%和ems。看看下面的语法。
语法
var morphObject = new Fx.Morph(morphElement, {
unit: '%'
});
上述语法是将百分比分配给单位。这意味着数字中的所有值都被视为百分比。
link
此选项提供了一种管理多个调用以启动动画的方法。如果您一次应用多个事件调用，这些调用将被视为链接调用。第一个调用完成后，第二个调用将自动执行。它包含以下三个选项 −
ignore − 这是默认选项。它会忽略任意数量的调用，直到完成效果。
cancel − 当有另一个效果时，这会取消当前效果。它遵循最新的调用优先级。
Chain − 这可让您将效果链接在一起并维护调用堆栈。它会执行所有调用，直到它执行完堆栈中的所有链式调用。
查看以下使用链接选项的语法。
语法
var morphObject = new Fx.Morph(morphElement, {
link: 'chain'
});
持续时间
此选项用于定义动画的持续时间。例如，如果您希望一个对象在 1 秒的持续时间内移动 100px，那么它将比一个对象在 1 秒内移动 1000px 的速度慢。您可以输入一个以毫秒为单位的数字。或者，您可以使用这三个选项中的任何一个来代替数字。
- 短 = 250 毫秒
- 正常 = 500 毫秒(默认)
- 长 = 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'
});
下表描述了不同类型的过渡。
| S.No. | 过渡类型 &描述 |
|---|---|
| 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 事件的 Quad、Cubic、Quart 和 Quint |
| 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 事件进行弹性曲线过渡 |
