📄 fx.md.svn-base
字号:
Class: Fx {#Fx}
===============
本类一般不独立使用,它用来提供作为Fx系的类的基础功能类.
所有其他的Fx系列的类都继承本类.
### 实现:
- [Chain][], [Events][], [Chain][]
Fx 方法: constructor {#Fx:constructor}
----------------------------------------
### 语法:
var myFx = new Fx([options]);
### 参数:
1. options - (*object*, 可选) 参见如下可选项:
### 可选项:
* fps - (*number*: 默认为 50) 动画特效的秒帧数
* unit - (*string*: 默认为 false) 计量单位(如: 'px', 'em', 或 '%'). 参见[Element:setStyle](/Element/Element/#Element:setStyle)
* link - (*string*: 默认为 ignore) 可为: 'ignore', 'cancel' 或 'chain'
* 'ignore' - 当特效正在执行之中时,再次调用特效开始的方法将被忽略(和可选项'wait'为true时同义)
* 'cancel' - 当特效正在执行之中时,再次调用特效开始的方法将立即取消当前执行的特效,开始执行新的特效(和可选项'wait'为false时同义)
* 'chain' - 当特效正在执行之中时,再次调用特效开始的方法将会把新的特效链接在当前执行的特效之后,依次执行各个特效
* duration - (*number*: 默认为 500) 特效间隔毫秒数. 也可使用以下预定义字符串:
* 'short' - 250ms
* 'normal' - 500ms
* 'long' - 1000ms
* transition - (*function*: 默认为 [Fx.Transitions.Sine.easeInOut](/Fx/Fx.Transitions)) 特效的变换方程, 详见[Fx.Transitions](/Fx/Fx.Transitions). 也可以使用如下格式的字符串:
transition[:in][:out] - 例如: 'linear', 'quad:in', 'back:in', 'bounce:out', 'elastic:out', 'sine:in:out'
### 事件:
* start - (*function*) 特效开始执行时触发
* cancel - (*function*) 手动停止特效执行时触发
* complete - (*function*) 特效执行完成后触发
* chainComplete - (*function*) 当使用link可选项为'chain'时, 该事件在特效链执行完后触发
### 备注:
- 要使用不同的特效变换方式, 则需要包含Fx.Transitions.js模块(或则,可以自己编写变换方程)
- Fx类只是一个提供特效基础功能的骨架类
### 另参考:
- [Fx.Tween][], [Fx.Morph][].
Fx 方法: start {#Fx:start}
----------------------------
开始执行特效变换(并触发'start'事件)
### 语法:
myFx.start(from[, to]);
### 参数:
1. from - (*mixed*) 特效的起始值. 如果只给出一个参数,则本值将作为结束值
2. to - (*mixed*, 可选) 特效的结束值
### 返回值:
* (*object*) - Fx实例
### 示例:
- 参看Fx的各个子类的示例
### 备注:
- 如果只给出一个参数, 则该值将作为结束值(元素当前的状态值将作为起始值)
- 值的格式和类型依赖于子类的具体实现, 并可能在个别情况下差异巨大. 请查看各个子类的文档.
Fx 方法: set {#Fx:set}
------------------------
用于设置特效值.
该方法在特效变换过程中每个'步进'都会调用; 也可以手工调用.
### 语法:
myFx.set(value);
### 参数:
1. value - (*mixed*) 特效值
### 返回值:
* (*object*) - Fx实例
### 示例:
- 请参看Fx的各子类的示例
Fx 方法: cancel {#Fx:cancel}
------------------------------
取消一个特效的执行(并触发'cancel'事件)
### 语法:
myFx.cancel();
### 返回值:
* (*object*) - Fx实例
Fx 方法: pause {#Fx:pause}
----------------------------
暂停当前执行的特效
### 语法:
myFx.pause();
### 返回值:
* (*object*) - Fx实例
### 备注:
- 可以调用[Fx:resume](#Fx:resume)方法来恢复执行暂停的特效
- 如果在暂停中的特效上调用start方法, 则将清除暂停中的特效, 直接执行新特效
Fx 方法: resume {#Fx:resume}
------------------------------
恢复执行暂停中的特效
### 语法:
myFx.resume();
### 返回值:
* (*object*) - Fx实例
### 备注:
- 只有对暂停中的特效执行本方法才有效果, 否则将忽略.
[Fx]: #Fx
[Chain]: /Class/Class.Extras#Chain
[Events]: /Class/Class.Extras#Events
[Chain]: /Class/Class.Extras#Options
[Fx.Tween]: /Fx/Fx.Tween
[Fx.Morph]: /Fx/Fx.Morph
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -