开发者

synchronized animations in YUI3?

开发者 https://www.devze.com 2022-12-16 09:08 出处:网络
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/f

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

精彩评论

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