如何以圆角矩形的形式对指示器进行动画处理？

Question

如何使用 html-js-css 为其制作动画？指标必须顺时针顺利填充。

我必须马上说CSS中的clip-path属性在iPhone上不起作用。

我没有任何想法。

Answer 1

这可以通过将要旋转的时钟指针放在 div 中，然后绕其中心旋转该 div 来实现。

您可以使用 CSS 动画 平滑地旋转手包装 div。请参阅下面的示例。

function toggleDebug () {
  console.log('toggle debug')
  document.querySelector('.clockface').classList.toggle('debug');
}

.clockface {
  border: 2px solid #000;
  border-radius: 50px;
  height: 100px;
  position: relative;
  width: 100px;
}

.hand-wrapper {
  left: 0;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

.hand {
  background-color: red;
  height: 4px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
}

.rotate-forever {
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg) }
  to { transform: rotate(360deg) }
}

.debug .hand-wrapper {
  border: 2px solid red;
}

<div class="clockface">
  <div class="hand-wrapper rotate-forever">
    <div class="hand"></div>
  </div>
</div>
<div><button onclick="toggleDebug()">Debug</button></div>