-1

我想使用 jQuery 为角色的手设置动画，使其就像在向某人挥手一样。我尝试交换 2 张图像（一只手指向左侧，一只手指向右侧）。但是不是很顺利……有没有更好的解决方案？我也尝试使用 jQuery 插件来旋转图像，但我找不到可以工作的插件（并且与 IE8 兼容）。谢谢你的帮助！

4

3 回答 3

2

当然，创建一个图像精灵

[手 1/7][手 2/7][手 3/7][手 4/7][手 5/7][手 6/7][手 7/7]

全部在一张图像中，将您的手的边界设置为一个元素，并使用 jquery 循环您的元素的背景位置。

这个答案应该让你开始：
使用 css3 或 jquery 的背景图像动画？

var c = 0 ;
function loop(){
  c = ++c % 7; // Reminder the number of images (7)
  $('#hand').css({backgroundPosition: (240*c)+'px 0px'}); // 240 = one image/sprite width
}
setInterval(loop, 25);
于 2013-04-10T17:59:53.423 回答
0

正如 roXon 所说，你可以这样做，这也很有用： jQuery GIF Animations take a look

于 2013-04-10T18:00:49.693 回答
0

CSS3动画/变换可以创建动画

jsfiddle demo

.waving-anim {
    animation:wave 500ms infinite;
    transform-origin:bottom left;
}

@keyframes wave {
    0% {
        transform:rotate(3deg);
    }
    50% {
        transform:rotate(-3deg);
    }
    100% {
        transform:rotate(3deg);
    }
}

确实需要供应商前缀（参见演示）并且在当前浏览器中受支持（包括 IE10）

于 2013-04-10T20:44:24.583 回答