使用Web Animation API制作模拟时钟

I’ve previously demonstrated an analog clock made with SVG and JavaScript, which I thought used a particularly elegant technique. While it’s possible to create the clock movement with HTML elements, CSS transforms and animation, it’s not possible to set such a clock to the correct time for the user. To do that, we need JavaScript… and if we’re starting with that, it made sense to experiment with the Web Animation API, showing that it too can use steps() animation for the second hand. (Due to the newness of the Web Animation API, this demo will currently only work in Chrome and Firefox).

之前，我已经演示了使用SVG和JavaScript制作的模拟时钟 ，我认为使用了一种特别优雅的技术。 虽然它可以创建与钟表机芯HTML元素 ， CSS转换和动画 ，这是不可能这样的时钟设置为正确的时间为用户。 为此，我们需要JavaScript …如果从此开始，则可以尝试使用Web Animation API，这表明它也可以在第二手中使用steps()动画。 (由于Web动画API的新颖性，该演示目前仅适用于Chrome和Firefox)。

标记和CSS (Markup & CSS)

The markup consists of a <div> with three <span> elements inside it:

标记由一个<div>以及其中的三个<span>元素组成 ：

<div id="clock">
  <span id="minutehand"></span>
  <span id="hourhand"></span>
  <span id="secondhand"></span>
</div>

The attached styles:

附件样式：

#clock {
  width: 30vw; height: 30vw;
  border-radius: 50%;
  border: 5px double #333;
  background: radial-gradient(#333, #000);
  margin: 2rem auto;
  position: relative;
}
#hourhand, #minutehand, #secondhand {
  position: absolute;
  background: white;
  transform-origin: bottom center;
  box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.3);
}

The hands are absolutely positioned inside the relatively positioned clock, with their transforms centered at the bottom of each hand. The hands are exactly positioned using calc, accounting for their different widths and heights:

指针绝对位于 相对放置的时钟内，其变换位于每个指针的底部。 使用calc 精确定位手，并考虑到手的不同宽度和高度：

#hourhand {
  width: 4%;
  height: 30%;
  left: calc(50% - (4% / 2));
  top: calc(50% - 30%);
}
#minutehand {
  width: 2%;
  height: 40%;
  left: calc(50% - (2% / 2));
  top: calc(50% - 40%);
}
#secondhand {
  width: 1%;
  height: 45%;
  background: red;
  left: calc(50% - (1% / 2));
  top: calc(50% - 45%);
}

剧本 (The Script)

The JavaScript, added to the bottom of the page:

JavaScript ，添加到页面底部：

var d = new Date(),
hands = [secondhand,minutehand,hourhand],
initDeg = [6*d.getSeconds(), 6*d.getMinutes(), 30*(d.getHours()%12) + d.getMinutes()/2];
for (var i = 0; i < hands.length; i++) {
  var stepper = i == 0 ? 60 : 0;
  var animate = hands[i].animate([
    { transform: 'rotate(' + initDeg[i] + 'deg)' },
    { transform: 'rotate(' + (initDeg[i] + 360) + 'deg)' }
  ], {
    duration: 1000 * Math.pow(60, i + 1),
    easing: 'steps(' + stepper + ', start)',
    iterations: Infinity
  });
}

A quick explanation:

快速说明：

• d grabs the current date

  d获取当前日期

• hands is an array of the clock hand ids

  hands是时钟指针id的 数组

• initDeg creates an array of the current time - hours, minutes and seconds - converted into degrees.

  initDeg创建一个将当前时间(小时，分钟和秒)转换为度的数组。

• the for loop goes through the entire array, incrementing the variable i

  for循环遍历整个数组，使变量 i 递增

• If i is 0, the variable stepper is set to 60 using a ternary operator.

  如果i为0 ，则使用三元运算符将可变stepper器设置为60 。

• the Web Animation API transforms each of the hands from their initial orientation (i.e. the current time) to 360° from this position; the duration is determined (in milliseconds) by multiplying 60 to the power of i + 1.

  Web Animation API将每只手从其初始方向(即当前时间)转换到该位置的360°； 通过将60乘以i + 1的幂来确定持续时间(以毫秒为单位)。

• if stepper is 60, that value is used for steps(); since only the second hand will have this quality, it “ticks” in the animation. The other clock hands receive steps(0), effectively creating linear animation for them.

  如果stepper为60 ，则该值用于steps() ； 由于只有秒针具有这种品质，因此它会在动画中“滴答”。 其他时针接收steps(0) ，从而有效地为其创建线性动画。

While it’s written in JavaScript, the animation still isn’t super precise, so please don’t depend on this clock for your personal schedule!

尽管它是用JavaScript编写的，但动画仍然不是非常精确，因此请不要依赖此时钟作为您的个人时间表！

翻译自: https://thenewcode.com/1085/Make-an-Analog-Clock-with-the-Web-Animation-API