Какой лучший способ заставить эту икону шевелиться .. как желе

Question

Я пытаюсь применить небольшой «покачивание» к значку, когда вы щелкаете по нему с помощью инфраструктуры анимации YUI и JavaScript.

Вот что у меня сейчас есть:

var anim = new YAHOO.util.Anim(filter.Li, {top: { to: -5 }}, .10, YAHOO.util.Easing.bounceIn);
var anim2 = new YAHOO.util.Anim(filter.Li, {top: { to: 5 }}, .15, YAHOO.util.Easing.bounceBoth);
var anim3 = new YAHOO.util.Anim(filter.Li, {top: { to: 0 }}, .20, YAHOO.util.Easing.bounceOut);
anim.onComplete.subscribe(function() { anim2.animate(); });
anim2.onComplete.subscribe(function() { anim3.animate(); });

anim.animate();

Во-первых, это немного отстойно, что мне приходится связывать вместе так много анимаций. Есть лучший способ сделать это? Кроме того, я не очень доволен тем, как это выглядит. Это слишком плавно, я выгляжу более шатким.

Есть ли лучший подход для такого рода эффекта? Спасибо!

Answer 1

Вы можете сделать его немного читабельным, если вы используете рекурсию и я предпочитаю метод анимации easyBoth.Попробуйте это:

var counter = 0,
    E = YAHOO.util.Easing,
    animationChain = [
        {attr: {top: {to: -5}}, duration: 0.08, method: E.easeBoth},
        {attr: {top: {to: 5}}, duration: 0.16, method: E.easeBoth},
        {attr: {top: {to: -5}}, duration: 0.16, method: E.easeBoth},
        {attr: {top: {to: 5}}, duration: 0.16, method: E.easeBoth},
        {attr: {top: {to: 0}}, duration: 0.08, method: E.easeBoth}
    ];

function animate() {
    var anim, current;

    if (animationChain[counter]) {
        current = animationChain[counter];
        counter += 1;
        anim = new YAHOO.util.Anim(filter.Li, current.attr, current.duration, current.method);
        anim.onComplete.subscribe(animate);
        anim.animate();
    }
}

animate();