Fx/Transitions

优质

小牛编辑

132浏览

2023-12-01

Class: Fx

Fx.Transitions重写基类Fx的构造函数，并增加了使用字符串使用曲线方程。

Transition选项:

曲线方程。详见下文Fx.Transitions.它接受两种参数,一个是函数(ex: Fx.Transitions.Sine.easeIn)或字符串('sine:in', 'bounce:out' or 'quad:in:out',这些字符串将映射到Fx.Transitions.Sine.easeIn / Fx.Transitions.Bounce.easeOut / Fx.Transitions.Quad.easeInOut)

Object: Fx.Transitions

一个tweening动画曲线集合.

示例:

$('myElement').set('tween', {transition: Fx.Transitions.Elastic.easeOut});
$('myElement').tween('margin-top', 100);

Fx.Transitions Method: linear

线性曲线.

Fx.Transitions Method: quad

二次方曲线,有以下值:Quad.easeIn,Quad.easeOut,Quad.easeInOut.

Fx.Transitions Method: cubic

三次方曲线,有以下值:Cubic.easeIn,Cubic.easeOut,Cubic.easeInOut.

Fx.Transitions Method: quart

四次方曲线,有以下值:Quart.easeIn,Quart.easeOut,Quart.easeInOut.

Fx.Transitions Method: quint

五次方曲线,有以下值:Quint.easeIn,Quint.easeOut,Quint.easeInOut.

Fx.Transitions Method: pow

用于生成Quad, Cubic, Quart和Quint曲线,默认为p^6.

Fx.Transitions Method: expo

指数曲线,有以下值:Expo.easeIn , Expo.easeOut , Expo.easeInOut.

Fx.Transitions Method: circ

圆周曲线,有以下值:Circ.easeIn , Circ.easeOut , Circ.easeInOut.

Fx.Transitions Method: sine

正弦曲线,有以下值:Sine.easeIn , Sine.easeOut , Sine.easeInOut.

Fx.Transitions Method: back

使用运动后退,然后向前,有以下值:Back.easeIn , Back.easeOut , Back.easeInOut.

Fx.Transitions Method: bounce

使曲线有弹性,有以下值:Bounce.easeIn , Bounce.easeOut , Bounce.easeInOut.

Fx.Transitions Method: elastic

弹性曲线,有以下值:Elastic.easeIn , Elastic.easeOut , Elastic.easeInOut.

Class: Fx.Transition

此方法只针对那些想写自己曲线的数学天才,

语法:

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

参数:

transition - (function) 一个Fx.Transitions或用户自定义函数。
params - (mixed, optional) 单值或者一个数组(单值会被转化成一个数组)。

(function) 运动曲线函数。

示例:

// Your own function. Here overshoot is bigger (now 1.3) when base -> 1 and base != 1.
var myTransition = new Fx.Transition(function(pos, x){
    return 1 - Math.pow(Math.abs(Math.log(pos) / Math.log(x && x[0] || Math.E)), pos);
}, 1.3);
 
var myFx = new Fx.Tween('myElement', {
    property: 'height',
    transition: myTransition.easeOut
}).start(30, 100);