让这个图标像果冻一样摆动的最好方法是什么

发布于 2024-12-10 14:51:50 字数 633 浏览 0 评论 0原文

当您使用 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();

首先，我必须将这么多动画链接在一起，这有点蹩脚。有更好的方法吗？另外，我对它的外观并不是很满意。它有点太流动了，我希望获得更多不稳定的外观。

有没有更好的方法来达到这种效果？谢谢！

原文

I'm trying to apply a little "wiggle" to an icon when you click on it using the YUI animation framework and Javascript.

Here's what I have right now:

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

First off, it's kinda lame that I have to chain together so many animations. Is there a better way to do this? Also, I'm not really all that pleased with the way it looks. It's a bit too fluid, I'm looking to get more of a wobbly look.

Is there a better approach to do this sort of effect? Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

も让我眼熟你 2024-12-17 14:51:51

如果你使用递归，你可以让它变得更易读，而且我更喜欢 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();

You can make it a little bit readable if you use recursion and i prefere the easyBoth animation method. Try this one:

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

回复收藏 0 原文

~没有更多了~