开发者

synchronized animations in YUI3?

Is it possible in yui3 to synchronize multiple animations so they progress together? Something similar to what is mentioned in the jquery 1.4 roadmap and demonstrated in this example http://ejohn.org/files/syn开发者_开发百科c.


Since I hate to find non-answers to questions on SO, I thought I'd pitch in.

I figured this out, thanks to info in a bug report (http://yuilibrary.com/projects/yui3/ticket/2528886)

Here's what I had: two boxes, side by side. I wanted the left box to shrink (width wise) and at the same time the right box to grow.

(I use divs, with float:left/float right and overflow:hidden, due to some unfortunate decisions I made some time ago, but this should work for most other configurations.)

Here's what I did:


var anim = new Y.Anim({
        duration: 1.0
});

var elmLeftBox = Y.one('#leftBox');
var elmRightBox = Y.one('#rightBox');

var intWidth = parseInt(elmLeftBox.getComputedStyle('width'), 10);

anim.on('tween', function(e) {
    var elapsedTime = this.get('elapsedTime');
    var duration = this.get('duration');
    var easing = this.get('easing');

    var leftPos = easing(elapsedTime, intWidth, (-1 * intWidth), duration*1000);
    var rightPos = easing(elapsedTime, 0, intWidth, duration*1000);
    elmLeftBox.setStyle('width', leftPos);
    elmRightBox.setStyle('width', rightPos);
});

anim.on('end', function(evt) {
    //clean up after myself - don't want hardcoded widths
    elmLeftBox.setStyle('width', 0);
    elmRightBox.setStyle('width', '100%');
});

anim.run();

Works perfectly. Good luck!


YUI3 doesn't officially support that, but you could do something pretty similar by subscribing to the tween event and modifying the values yourself.

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜