fx.transitions.md.svn-base

一款开源强大的javascript控件

Class: Fx {#Fx}
===============

[Fx][]的构造方法在加入本模块后将被覆盖. 

并将增加可选项transition使用字符值的能力.

### 可选项 transition:

特效的变换方程式(参考[Fx.Transitions][]) 

它可以是一个函数(如: Fx.Transitions.Sine.easeIn), 或是一个字符串('sine:in', 'bounce:out' 或 'quad:in:out', 这分别映射到Fx.Transitions.Sine.easeIn , Fx.Transitions.Bounce.easeOut , Fx.Transitions.Quad.easeInOut三个函数)


Hash: Fx.Transitions {#Fx-Transitions}
======================================

存储了一组供[Fx][]类及其子类使用的特效变换方程


### 示例:

	var myFx = $('myElement').effect('margin', {
		transition: Fx.Transitions.Elastic.easeOut
	});

### 另参考:

- [Robert Penner's Easing Equations](http://www.robertpenner.com/easing/)



Fx.Transitions 方法: linear {#Fx-Transitions:linear}
------------------------------------------------------

线性方程

![inear][Linear]

Fx.Transitions 方法: quad {#Fx-Transitions:quad}
--------------------------------------------------

二次方程. 可用方式: Quad.easeIn , Quad.easeOut , Quad.easeInOut.

![quad][Quad]


Fx.Transitions 方法: cubic {#Fx-Transitions:cubic}
----------------------------------------------------

三次方程. 可用方式: Cubic.easeIn , Cubic.easeOut , Cubic.easeInOut

![cubic][Cubic]


Fx.Transitions 方法: quart {#Fx-Transitions:quart}
----------------------------------------------------

四次方程. 可用方式: Quart.easeIn , Quart.easeOut , Quart.easeInOut

![quart][Quart]


Fx.Transitions 方法: quint {#Fx-Transitions:quint}
----------------------------------------------------

五次方程. 可用方式: Quint.easeIn , Quint.easeOut , Quint.easeInOut

![quint][Quint]


Fx.Transitions 方法: pow {#Fx-Transitions:pow}
------------------------------------------------

用于生成多次方程, 比如内置的Quad, Cubic, Quart 和 Quint就是由该方法生成


### 备注:

- 调用时, 默认为`p^6`(6次方程)

Fx.Transitions 方法: expo {#Fx-Transitions:expo}
--------------------------------------------------

指数方程. 可用方式: Expo.easeIn , Expo.easeOut , Expo.easeInOut

![expo][Expo]


Fx.Transitions 方法: circ {#Fx-Transitions:circ}
--------------------------------------------------

圆方程. 可用方式: Circ.easeIn , Circ.easeOut , Circ.easeInOut

![circ][Circ]


Fx.Transitions 方法: sine {#Fx-Transitions:sine}
--------------------------------------------------

正弦方程. 可用方式: Sine.easeIn , Sine.easeOut , Sine.easeInOut

![sine][Sine]


Fx.Transitions 方法: back {#Fx-Transitions:back}
--------------------------------------------------

生成的值是先负后正的方程(应用到特效中,就可以是先收缩,后伸展的效果等). 可用方式: Back.easeIn , Back.easeOut , Back.easeInOut

![back][Back]


Fx.Transitions 方法: bounce {#Fx-Transitions:bounce}
------------------------------------------------------

生成的值是阶段性的提升和衰减的(弹跳效果). 可用方式: Bounce.easeIn , Bounce.easeOut , Bounce.easeInOut

![bounce][Bounce]


Fx.Transitions 方法: elastic {#Fx-Transitions:elastic}
--------------------------------------------------------

生成的值是上下波动的(弹性效果). 可用方式: Elastic.easeIn , Elastic.easeOut , Elastic.easeInOut

![elastic][Elastic]


Class: Fx.Transition {#Fx-Transition}
=====================================

用于创建自定义特效方程的类.

返回一个包含了'easeIn', 'easeOut', 几 'easeInOut'三个方法的[Fx][]变换函数.

### 语法:

	var myTransition = new Fx.Transition(transition[, params]);

### 参数:

1. transition - (*function*) 可为<Fx.Transitions>中的内置方程函数, 或是自定义的函数
2. params     - (*mixed*, 可选) 传递给可选项transition上指定的函数的第二个参数的值或数组

### 返回值:

* (*function*) 包含了easeIn, easeOut, easeInOut三个方法的对象

### 示例:

	//对原有的Elastic进行自定义
	var myTransition = new Fx.Transition(Fx.Transitions.Elastic, 3);
	
	//使用自定义后的Elastic.easeOut
	var myFx = $('myElement').effect('margin', {
		transition: myTransition.easeOut
	});

### 另参考:

- [Fx.Transitions][]


[Fx]: /Fx/Fx
[Fx.Transitions]: #Fx-Transitions
[Element.effect]: /Element/#Element:effect
[Linear]: ../assets/images/graphs/Linear.png
[Quad]: ../assets/images/graphs/Quad.png
[Cubic]: ../assets/images/graphs/Cubic.png
[Quart]: ../assets/images/graphs/Quart.png
[Quint]: ../assets/images/graphs/Quint.png
[Expo]: ../assets/images/graphs/Expo.png
[Circ]: ../assets/images/graphs/Circ.png
[Sine]: ../assets/images/graphs/Sine.png
[Back]: ../assets/images/graphs/Back.png
[Bounce]: ../assets/images/graphs/Bounce.png
[Elastic]: ../assets/images/graphs/Elastic.png