设置动画持续时间的时刻

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');

这将正确设置时间(但仅设置计时器(。 为了使圆圈以正确的方式进行，这有点困难，但仍然可以实现。

首先，您必须了解这两个圆圈是用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不是代码编写服务，但我仍然会给您一个线索：

1. 计算每个圆圈的距离(在 JavaScript 中(。例如：如果您的开始时间为 10 秒，则应为 16.666% 进入动画(分钟圆圈(。
2. 设置关键帧百分比以使圆从正确的位置开始。由于无法从javascript中操作关键帧百分比，我建议遵循以下StackOverflow帖子：https://stackoverflow.com/a/29514053/8750569

我希望这对你有所帮助。如果你被困在某个地方，请展示你的一些尝试，我很乐意帮助你更多:)