开发者

How can I fix the jerky transitions in SlideItMoo? (uses Mootools' Fx.Transitions)

开发者 https://www.devze.com 2023-04-01 21:28 出处:网络
I\'m using Mootools in a joomla site. I want to do a basic banner rotator.Found a slider, SlideItMoo, that seems to mostly work.

I'm using Mootools in a joomla site.

I want to do a basic banner rotator. Found a slider, SlideItMoo, that seems to mostly work.

But it seems to me the transitions are a bit jerky, especially at the end. Towards the end of a circ:out or sine:out transition, the new image takes noticable steps.

Maybe the problem is th开发者_Go百科at the time-slice is too large-grained. Is there a way for me to reduce that time-slice to make the entire process smoother? Or is there another way to make the transition appear smoother?

I'm using Mootools. Any solution really should focus on mootools; please don't suggest I switch to an alternative framework.


I don't know why the transitions appeared to be jerky to me. I did some analysis and graphed the transition curves, and didn't see anything really obvious.

I ended up building my own transition, which to my eye appeared to produce a smoother visual effect.

// 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);
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号