如何修復SlideItMoo中的顛簸過渡？ （使用Mootools的Fx.Transitions）

Question

我在joomla網站上使用Mootools。

我想做一個基本的橫幅旋轉器。 找到了一個似乎可以正常工作的滑塊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);