14

ここにフィドルがあります：

http://jsfiddle.net/7txt3/29/

ユーザーが再生ボタンをクリックすると、下の画像のようにレコード針がレコードに回転するようにしたい(フィドルを参照)

針の配置は必ずしも最終的なものではなく、右上隅に配置したい場合があります (そのために必要な画像と下部の css を含めました)。

記録

現在、再生をクリックすると (フィドルを参照し、レコード カバーの 1 つにカーソルを合わせ、再生をクリックします)、レコードの針が左から入り、同じレコードで停止をクリックすると、左に戻ります。再生中のレコードを停止する前に別のレコードの再生をクリックすると、同じ場所にとどまります。

再生ボタンをクリックしてから回転しない限り、常に表示されますが、レコードには表示されない下の画像のようにしたいと思います。次に、現在再生中の別のレコードで再生をクリックすると、その変化のようにシフト/移動します。もちろん、停止をクリックするとオフレコになります。

欲しいレコード針のパターン

これが私の現在のスクリプトです：

$(function(){
var station = $('.player-station'),
    record = $('.record2:first'),
    playBtns = $('.play'),
    info = $('.nprecinfo');
var isPlaying = false;

playBtns.click(function()
{
    var btn = $(this);
    if(btn.text() == 'STOP')
    {
        btn.text('PLAY');
        record.css({'-webkit-animation-play-state': 'paused',
                    '-moz-animation-play-state': 'paused'});

        $('#needle').show().animate({"left": "-=120px"}, "slow");
        isPlaying = false;     

        return;
    };

    playBtns.text('PLAY');
    var album = btn.closest('.album');
    station.text(album.find('h3').text());
    info.text(album.find('.recordinfo').text());
    record.css({'-webkit-animation-play-state': 'running',
                '-moz-animation-play-state': 'running'});
    if (isPlaying == false)
    {
    $('#needle').show().animate({"left": "+=120px"}, "slow");
    isPlaying = true;
    }

     $('#lrvinyl').css("background-image","url("+btn.attr('rel')+")");
     $('#lrvinyl').hide().fadeIn();

    btn.text('STOP');
});
});

レコード針の現在の CSS は次のとおりです。

#needle {
background-image:url(http://benlevywebdesign.com/somafm/images/recordneedle2.png);
background-repeat: no-repeat;
width:220px;
height:220px;
position:absolute;
left:-115px;
top:185px;
z-index:10;
overflow:hidden;
}

針を右上隅に配置する場合は、そのためのフィドルで使用する画像と css を次に示します。(.record2)レコードを少し移動する必要があるかもしれないので、css をleft:-4px;

#needle {
background-image:url(http://benlevywebdesign.com/somafm/images/recordneedle4.png);
background-repeat: no-repeat;
width:220px;
height:220px;
position:absolute;
left:205px;
top:10px;
z-index:10;
overflow:hidden;
}
4

3 に答える 3

5

詳細な質問には+1！:)

あなたはすでに回転ディスクのために css3 に依存しています。これは css トランジションで非常に実行可能であるため、javascript で行う必要があるのは、クラスを追加/削除することだけです。

デモ: http://jsfiddle.net/7txt3/31/

これは基本的に私が追加したものです (およびいくつかのベンダープレフィックス)

CSS

#needle
    transition: all .2s ease;
}
#needle.playing {
    transform: rotate(-10deg);
}

jquery

.animate(...)から.removeClass()と の.addClass()呼び出しに変更されました。

#needle css も針の左側から回転するように少し変更しましたが、代わりにhttps://developer.mozilla.org/en-US/docs/CSS/transform-originを参照してください。

編集

申し訳ありませんが、レコード変更間のアニメーションに関する部分を見逃していました。できることの 1 つは、クラスを削除してから、後で追加し直すことです。次のようにします。 http://jsfiddle.net/7txt3/53/

于 2012-10-16T17:37:33.370 に答える
3

これにより、望ましい効果が得られるはずです。

針を正しく回転させるには、変換原点を設定する必要があります。

http://jsfiddle.net/7txt3/35/

もちろん、速度/パーセンテージを変更する必要があります。

    #needle {
    background-image:url(http://benlevywebdesign.com/somafm/images/recordneedle2.png);
    background-repeat: no-repeat;
    width:220px;
    height:220px;
    position:absolute;
    top:185px;
    z-index:10;
    overflow:hidden;
}

#needle.playing {
    -webkit-animation-name: needle_move;
    -webkit-animation-duration:8s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:normal;
    -webkit-transform-origin: 0px 10px;
    -webkit-transform: rotate(0deg);
    -webkit-transition: all .2s;
       -moz-transition: all .2s;
            transition: all .2s;
}

@-webkit-keyframes needle_move {
    0% {
       -webkit-transform: rotate(0deg);
    }
    50% {
       -webkit-transform: rotate(-15deg);
    }
    70% {
       -webkit-transform: rotate(-15deg);
    }
    0% {
       -webkit-transform: rotate(0deg);
    }
}
于 2012-10-16T17:40:35.177 に答える
1

CANVAS を使用して、質問で必要な針のアニメーションを取得するデモを次に示します。

http://jsfiddle.net/7txt3/46/

ベンダー プレフィックスが CSS3 をスパムし、ブラウザが回転ポイントをサポートしていないためです。CANVASに行くのは少しきれいだと思います。

于 2012-10-16T18:30:55.740 に答える