14

这是小提琴：

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

当用户单击播放按钮时，我想让记录上的记录针像您在下图中看到的那样旋转到记录上（见小提琴）

针的位置不一定是最终的，我可能希望它位于右上角。（我已经包含了所需的图像和底部的 css）

记录

现在，如果您单击播放（请参阅小提琴，将鼠标悬停在其中一个唱片封面上，单击播放），唱片针从左侧进入，然后如果您单击同一唱片上的停止，它会回到左侧。如果您在停止播放之前单击另一条记录的播放，它只会停留在同一位置。

我希望它像下面的图像一样，它始终显示但不在记录中，除非您单击播放按钮然后它会旋转。然后，如果您在另一张唱片正在播放时单击另一张唱片上的播放，它只会像它的变化一样移动/移动。然后，当然，如果您单击停止，它就会消失。

我想要的唱片针图案

这是我当前的脚本：

$(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(...)to.removeClass()和.addClass()调用。

我还稍微更改了#needle css，以便从针手的左侧旋转，但您可以查看https://developer.mozilla.org/en-US/docs/CSS/transform-origin。

编辑

抱歉，我错过了关于在记录更改之间设置动画的部分。您可以做的一件事是删除该类，然后在延迟后将其添加回来，如下所示：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 回答