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();

让这个图标摆动的最佳方法是什么......就像jello一样

1 个答案: