Как я могу исправить рывки переходов в SlideItMoo? (использует Fx.Transitions Mootools)

Question

Я использую Mootools на сайте Joomla.

Я хочу сделать простой ротатор баннеров.Нашел слайдер, SlideItMoo , который, кажется, в основном работает.

Но мне кажется, что переходы немного резкие, особенно в конце.К концу перехода circ:out или sine:out новое изображение предпринимает заметные шаги.

Возможно, проблема в том, что временной интервал слишком крупный.Есть ли способ для меня сократить этот временной интервал, чтобы сделать весь процесс более плавным?Или есть другой способ сделать переход более плавным?

Я использую Mootools.Любое решение действительно должно фокусироваться на mootools;пожалуйста, не предлагайте мне перейти на альтернативные рамки.

Answer 1

Я не знаю, почему переходы показались мне резкими.Я провел некоторый анализ и построил графики кривых перехода и не увидел ничего действительно очевидного.

Я закончил тем, что построил свой собственный переход, который, на мой взгляд, давал более плавный визуальный эффект.

// Requirements for a transition function are:
// - it should be continuous on the interval [0,1]
// - f(0) = 0, and f(1)= 1 .  f(x) between zero and 1
//   may fall out of that range.
//
// To guarantee the f(x)=1 , I produce a fn for which f(0)=0, 
// and f(1) is non-zero. Then I produce a second function which is the
// normalized transform of that, by simply using g(x)=f(x)/f(1), and
// use g(x) instead of f(x) as the transition function.  
// This guarantees that g(1) = 1.
//

function fn1(x) {
    return (Math.pow(x + 0.4, 3)  * Math.sin((x - 0.5)*3.1415926));
}

function g(x) {
    return fn1(x)/normalizationFactor;
}

normalizationFactor = fn1(1);
transitionCustom = new Fx.Transition(g);