Question

我想动画一个角色的手，使它像是在向某人挥手，使用jQuery。我试图交换2张图片（一只手向左倾斜，一只手指向右边）。但它不是很顺利...... 有更好的解决方案吗？我也尝试使用jQuery插件来旋转图像，但我找不到一个有效的插件（兼容IE8）。谢谢你的帮助！

Answer 1

当然，创建一个图像精灵

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

在一个图像中，将手的边界设置为元素，然后使用jquery循环元素的背景位置。

这个答案应该让你开始：
Background image animation using css3 or 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);

Answer 2

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

Answer 3

CSS3 animations / transforms可以创建动画

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）

使用jQuery为手形图像设置动画

3 个答案: