Class: Fx

Fx.Transitions перевизначає базовий Fx конструктор і додає можливість використовувати параметр transition як рядок.

Transition option:

Рівняння для використання ефекту. Див. 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

Object: Fx.Transitions

Колекція перехідів інтерполяції для використання з Fx класами.

Приклади:

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

Див. також:

• Robert Penner's Easing Equations

Примітка:

З MooTools 1.3 це нативний JavaScript Object, а не екземпляр застарілого Hash

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

Цей клас корисний лише для математичних геніїв, які хочуть написати власні рівняння згладжування. Повертає Fx функцію переходу з методами 'easeIn', 'easeOut' та 'easeInOut'.

Синтаксис:

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

Аргументи:

1. transition - (function) Може бути Fx.Transitions функцією або користувацькою функцією, яка буде розширена функціями згладжування.
2. 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);

Див. також:

• Fx.Transitions