Mootools 1.2教程(11)——Fx.Morph、Fx选项和Fx事件（2）

Fx选项（Options）

下面的选项都可以被Fx.Tween和Fx.Morph接受。它们都非常容易实现，而且可以给你非常多的控制权来控制你的效果。要使用这些选项，请使用下面的语法：

参考代码： 

// 建立你的渐变或者形变 
// 然后在大括号{ }之间设置你的选项 
var morphObject = new Fx.Morph(morphElement, { 
    // 首先是选项的名字 
    // 然后后面跟一个冒号（:） 
    // 然后定义你的选项 
    duration: 'long', 
    transition: 'sine:in' 
}); 

fps（每秒帧数，frames per second）

这个选项决定了这个动画每秒的帧数。默认值是50，可以接受数字和值为数字的变量。

参考代码： 

// 建立你的渐变或者形变 
// 然后在大括号{ }之间设置你的选项 
var morphObject = new Fx.Morph(morphElement, { 
    fps: 60 
}); 

// 或者这样 
var framesPerSecond = 60; 

var tweenObject = new Fx.Tween(tweenElement, { 
    fps: framesPerSecond 
}); 

unit（单位）

这个选项设置了数字的单位。例如，你的100是指100个像素（px）、百分比还是em？

参考代码： 

// 建立你的渐变或者形变 
// 然后在大括号{ }之间设置你的选项 
var morphObject = new Fx.Morph(morphElement, { 
    unit: '％' 
}); 

link（连接）

link选项提供了一种方式可以让你管理多个启动效果的函数调用。例如，如果你有一个鼠标移上去（mouseover）的效果，你是希望每次用户移上去都启动这个效果吗？或者是，如果一个人把鼠标移上去两次，它应该忽略第二个响应还是应该把它们串连起来，然后等第一次调用完成以后再第二次调用这个效果？link又三个设置：

• “ignore”（默认）——在一个效果没有完成之前忽略任何启动新效果的调用




• “cancel”——如果有另外一个效果调用，则放弃当前的效果，转而处理新的效果调用




• “chain”——链可以让你把效果像“链条”一样把效果连接起来，把这些调用进行堆栈，然后逐一调用这些效果，直到完成

参考代码： 

// 建立你的渐变或者形变 
// 然后在大括号{ }之间设置你的选项 
var morphObject = new Fx.Morph(morphElement, { 
    link: 'chain' 
}); 

duration（持续时间）

duration可以让你定义这个动画的持续时间。持续事件和速度是不一样的，因此如果你想让一个对象在一秒内移动100个像素，那么它将比一个每秒移动1000个像素的对象要慢。你可以输入一个数字（以毫秒为单位）、一个值为数字的变量或者三个快捷方式：

• “short”=250ms




• “normal”=500ms（默认）




• “long”=1000ms

参考代码： 

// 建立你的渐变或者形变 
// 然后在大括号{ }之间设置你的选项 
var morphObject = new Fx.Morph(morphElement, { 
    duration: 'long' 
}); 

// 或者这样 
var morphObject = new Fx.Morph(morphElement, { 
    duration: 1000 
}); 

transition（过渡效果）

最后一个选项：transition，可以让你决定过渡类型。例如，它是不是一个平滑的过渡或者它应该先慢慢开始然后加速直到结束。看看这些在MooTools的核心库里可以用的过渡效果：

参考代码： 

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

注意：第一个过渡条在开始时触发了一个红色的醒目效果，在结束时触发了一个橙色的醒目效果。看看下面是怎么使用Fx的事件的。

这上面30个过渡类型可以分成十组：

• Quad




• Cubic




• Quart




• Quint




• Expo




• Circ




• Sine




• Back




• Bounce




• Elastic

每一个组都有三个选项：

• Ease In




• Ease Out




• Ease In Out

• 第一页 上一页 1

  2

  3 下一页