2

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

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); 到动画。但是，它在移动时正在旋转，而不是在之前。

你们中的任何人对如何做到这一点有一个好主意吗？

4

2 回答 2

2

我有这个想法：

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/

那样可以么？:)

于 2013-09-17T11:28:55.830 回答
0

另一种解决方案，但我只是更喜欢让 css 远离 javascript

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); }
于 2013-09-17T11:34:53.403 回答