2

このjQueryコードを使用して、右、下、左、上という4つのステップで動くCSSでパックマンフィギュアを作成しました。

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/

次のステップとして、次のステップに進む直前にパックマンを 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

別の解決策ですが、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); }
于 2013-09-17T11:34:53.403 に答える