javascript - Jimdo : Create rotating clipped disk on button click

Question

我正在尝试在单击播放按钮时创建旋转 CD/磁盘效果。我设法想出了一个例子，请参见下面的代码。这是播放器处于播放模式时的部分状态。

我想要创建的是一个方形图像，顶部有一个播放按钮。当用户点击按钮时，暂停按钮出现，图像的中间部分开始像旋转的 CD/磁盘一样旋转。

我尝试了一些方法，但我的 JavaScript 技能不足以创建这样的效果。

感谢任何帮助。

注意:代码答案应该能够在 Jimdo 上运行网站 build 者。

$(function() {
  var activePlayerStartBtn;

  function stopOtherPlayerSetNewAsActive(element) {
    var toShow = $(element).parent().find('.btn.hide')[0];
    $(element).addClass('hide');
    $(toShow).removeClass('hide');

    if (activePlayerStartBtn) {
      var stopButton = $(activePlayerStartBtn).parent().find('.btn').not('.hide')[0];
      $(stopButton).addClass('hide');
      $(activePlayerStartBtn).removeClass('hide');
    }

    activePlayerStartBtn = element;
  }

  function stopPlayer(element) {
    $(element).addClass('hide');
    $(activePlayerStartBtn).removeClass('hide');
    activePlayerStartBtn = null;
  }

  var widget1 = SC.Widget("so");
  $("#playSound").click(function() {
    widget1.play();
    stopOtherPlayerSetNewAsActive("#playSound");
  });
  $("#stopSound").click(function() {
    widget1.pause();
    stopPlayer('#stopSound');
  });
});

.button-wrapper {
  position: relative;
  width: 100%;
  max-width: 300px;
}

.img-circle {
  clip-path: circle(30% at 50% 50%);
  -webkit-clip-path: circle(30% at 50% 50%);
  animation: loading 10s linear infinite;
  width: 100%;
  max-width: 300px;
}

@keyframes loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.btn {
  position: absolute;
  width: 100%;
  max-width: 70px;
  cursor: pointer;
  transform: translate(-50%, -53%);
  top: 50%;
  left: 50%;
  opacity: .7;
  clip-path: circle(33% at 50% 50%);
  -webkit-clip-path: circle(33% at 50% 50%);
}

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<script type="text/javascript" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/js/api.js">
</script>

<div class="button-wrapper">
  <img src="https://i1.sndcdn.com/artworks-000281899403-n7tdjo-t500x500.jpg" alt="img" class="img-circle">
  <img id="playSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-playbtn.svg" alt="play" title="play" class="btn" name="playSound">
  <img id="stopSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-pausebtn.svg" alt="pause" title="pause" class="btn hide" name="stopSound">
</div>

<iframe id="so" width="0%" height="0" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/380167502&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false&amp;show_teaser=false"
  frameborder="0" name="so" style="display: none;"></iframe>

Answer 1

我想这可能就是您要找的。

jsFiddle with rotating Disk example

让我解释一下发生了什么，以便您了解代码和样式的作用。

相册图片我加了两次，一次是背景，一次是做转盘。看起来像这样。

<img src="https://i1.sndcdn.com/artworks-000281899403-n7tdjo-t500x500.jpg" alt="img" class="img-circle -clipped">
<img src="https://i1.sndcdn.com/artworks-000281899403-n7tdjo-t500x500.jpg" alt="img" class="img-circle">

您看不到裁剪后的图像，只有在动画开始时才会注意到。

当玩家被点击时，添加-rotating类来启动动画。

// Find the clippedImg and add the class -rotating to start the  animation
var clippedImg = $(element).parent().find('.-clipped')[0];
$(clippedImg).addClass('-rotating');

当暂停按钮被点击时，-rotating 类被移除。

如果这就是您要找的，请告诉我。