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

我已经在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,
    });
}

var aSteps=[{
“x”：“400”，
“y”：“0”
}, {
“x”：“400”，
“y”：“300”
}, {
“x”：“0”，
“y”：“300”
}, {
“x”：“0”，
“y”：“0”
}];
var iStepsLength=aSteps.length；
对于（变量i=0；i

您可以在这里看到它：

作为下一步，我希望我的Pacman在我进入下一步之前旋转90度。我尝试添加-webkit变换：旋转（90度）；到动画。但它在移动时会旋转，而不是在之前

你们有谁对如何做有好的想法吗

我有一个想法：

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)'
        });
        });
    }

var iStepsLength=aSteps.length；
对于（变量i=0；i

---

可以吗？：）

另一个解决方案，但我更喜欢将css与javascript分开

---

一旦某个反应启动，您只能触发一个动画，因此最简单的方法是为JQuery上的向上操作分配一个延迟，这样对象只在面向上时才向上移动。听起来您需要使用动画函数的回调来实现两阶段动画。因此，首先设置旋转动画，然后添加对移动函数的回调。完成后，向“下一步”函数添加一个回调，该函数选择要执行的下一个动画。

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

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