Question

我在CSS中创建了一个Pacman图，它使用这个jQuery代码分为4个步骤：向右，向下，向左和向上移动：

var aSteps = [{
    "x": "400",
    "y": "0"
}, {
    "x": "400",
    "y": "300"
}, {
    "x": "0",
    "y": "300"
}, {
    "x": "0",
    "y": "0"
}];

var iStepsLength = aSteps.length;
for (var i = 0; i < iStepsLength; i++) {
    $('#P1').animate({
        left: aSteps[i].x,
        top: aSteps[i].y,
    });
}

你可以在这里看到： http://jsfiddle.net/qE6wm/2/

下一步，我希望我的Pacman在我进入下一步之前以90度旋转。我已经尝试将 -webkit-transform：rotate（90deg）; 添加到动画中。但是它在移动时旋转，而不是之前。

你们有没有想过如何做到这一点？

Answer 1

我有这个想法：

var iStepsLength = aSteps.length;
for (var i = 0; i < iStepsLength; i++) {
    var rotation = 0;
    $('#P1').animate({
        left: aSteps[i].x,
        top: aSteps[i].y,
    }, 2500, function () {
        rotation = rotation + 90;
        $(this).css({
            'transform': 'rotate(' + rotation + 'deg)',
                '-ms-transform': 'rotate(' + rotation + 'deg)',
                '-webkit-transform ': 'rotate(' + rotation + 'deg)'
        });
        });
    }

http://jsfiddle.net/qE6wm/3/

可以吗？ :)

Answer 2

另一个解决方案，但我更喜欢从javascript中取消css

http://jsfiddle.net/6euPg/

var aSteps = [
    {"x":"400", "y":"0"},
    {"x":"400", "y":"300"}, 
    {"x":"0", "y":"300"},
    {"x":"0", "y":"0"} 
];

var rotations = ["turn-90", "turn-180", "turn-270", "turn-360" ];
var iStepsLength = aSteps.length;

for (var i = 0; i < iStepsLength; i++) {

    (function(i) {

        $('#pacman').animate({
            left: aSteps[i].x,
            top: aSteps[i].y,
        }, function() {
            this.className = rotations[i]; // this applies the class for rotation
        });

     }(i));
}

CSS

.turn-90 {  transform: rotate(90deg);   }
.turn-180 {  transform: rotate(180deg); }
.turn-270 {  transform: rotate(270deg); }
.turn-360 {  transform: rotate(360deg); }

Pacman |使用jQuery或CSS旋转div元素

2 个答案: