Question

我想实现一个计时器，但是它应该显示当前的分钟秒数。

所以我发现了一个codepen.io/ninjascribble/pen/rHwkK

如何使动画在特定时间开始？

Answer 1

在Codepen的JS-Part中有一个“ startDate”值。默认情况下，它设置为new Date();

只需在这里设置您的日期，您就可以开始了：

var defaults = {}
  , one_second = 1000
  , one_minute = one_second * 60
  , one_hour = one_minute * 60
  , one_day = one_hour * 24
  , startDate = INSERT_YOUR_DATE_HERE
  , face = document.getElementById('lazy');

这将设置正确的时间（但仅设置计时器）。要使圈子正确地前进，这会有些困难，但仍然可以实现。

首先，您必须了解这两个oter圆是使用css关键帧动画制作的。意味着当前，我们的javascript对他们没有影响。它们只是预先编程为每60/3600秒运行一次。

@keyframes spin1 {
  0% {
    transform: rotate(225deg);
  }
  50% {
    transform: rotate(225deg);
  }
  100% {
    transform: rotate(405deg);
  }
}

@keyframes spin2 {
  0% {
    transform: rotate(225deg);
  }
  50% {
    transform: rotate(405deg);
  }
  100% {
    transform: rotate(405deg);
  }
}

您可能已经知道Stack Overflow不是编写代码的服务，但是我仍然会带给您帮助：

计算每个圆圈必须达到的距离（在JavaScript中）。例如：如果您的开始时间是10秒，则应达到动画（分钟圈）的16.666％。
设置关键帧百分比以使圆从正确的位置开始。由于无法通过javascript操作关键帧百分比，因此建议遵循以下StackOverflow帖子：https://stackoverflow.com/a/29514053/8750569

希望这对您有所帮助。如果您被困在某个地方，请显示一些尝试，我很乐意为您提供更多帮助：）

设置动画持续时间

1 个答案: