如何修復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);