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