Math 最平滑的计时器间隔,可在一定时间内将值添加到100

Math 最平滑的计时器间隔,可在一定时间内将值添加到100,math,Math,在我的虚拟键盘应用程序中,有一个驻留选项。 如果用户将鼠标指针悬停在某个键/按钮上,该按钮将开始从左到右填充颜色,一旦完全更改颜色,将自动单击该按钮 我想用定时器来做这个 在每个计时器间隔/事件中,应再填充一点钥匙,直到达到100 因此,在每个计时器事件中,我添加一定量 自动点击/停留时间可调 我正在寻找以最平滑的方式填充关键点的公式 计时器间隔越小,颜色变化看起来就越平滑 但是,计时器的滴答声不能超过25毫秒 哪一个公式会告诉我需要为每个25毫秒的计时器事件添加多少个值 使用25毫秒的计时器间

在我的虚拟键盘应用程序中,有一个驻留选项。 如果用户将鼠标指针悬停在某个键/按钮上,该按钮将开始从左到右填充颜色,一旦完全更改颜色,将自动单击该按钮

我想用定时器来做这个

在每个计时器间隔/事件中,应再填充一点钥匙,直到达到100

因此,在每个计时器事件中,我添加一定量

自动点击/停留时间可调

我正在寻找以最平滑的方式填充关键点的公式

计时器间隔越小,颜色变化看起来就越平滑

但是,计时器的滴答声不能超过25毫秒

哪一个公式会告诉我需要为每个25毫秒的计时器事件添加多少个值

使用25毫秒的计时器间隔将创建外观最平滑的图形更改,因为关键帧的颜色变化轻微而不是突然

在1秒内,间隔为25ms的计时器将触发40次

因此,如果用户希望键单击的停留时间为0.30秒,那么公式是什么来确定我必须在每个计时器事件中添加哪个值,以便0.30秒后该值为100

一个糟糕的解决方案是将计时器的间隔设置为300毫秒,然后选择一个附加值100。在这种情况下,计时器将触发一次并将值设置为100。这当然是可行的,但图形上的变化并不顺利

相反,我正在寻找一个更平滑的计算,更频繁的计时器事件


谢谢大家!

我认为这只是划分。如果停留时间为300毫秒,且计时器每25毫秒滴答一次,则在停留时间内,计时器滴答300/25=12次。因此,在每个计时器滴答声时,填充值应增加100的1/12,也就是说,100/12=8.33


现在如果你的填充值只能是整数,这就不太管用了;如果你把8.33四舍五入到8,然后在每个刻度上加8,那么这个值在300毫秒内只会增加96。所以你应该做的是记录到目前为止发生了多少个刻度,称之为t,在每个刻度上,将值设置为100*t/12,四舍五入到最接近的整数。

我认为这只是除法。如果停留时间为300毫秒,且计时器每25毫秒滴答一次,则在停留时间内,计时器滴答300/25=12次。因此,在每个计时器滴答声时,填充值应增加100的1/12,也就是说,100/12=8.33


现在如果你的填充值只能是整数,这就不太管用了;如果你把8.33四舍五入到8,然后在每个刻度上加上8,那么这个值在300毫秒内只会增加96。所以你应该做的是记录到目前为止发生了多少个刻度,称之为t,在每个刻度上,将值设置为100*t/12,四舍五入至最接近的整数。

用于确定最频繁更新的每个勾号保持计时器在25ms时的添加量的公式:

TICKS = DWELL_TIME / 0.025 (ms)
VALUE_PER_TICK = 100 / TICKS
可通过组合除法简化:

VALUE_PER_TICK = 100.0 / ( DWELL_TIME / 0.025 )
例如,停留时间=0.3:

滴答声=12

每刻度值=8.33


希望有此帮助。

对于最频繁的更新,用于确定每个滴答计时器的添加量的公式为25毫秒:

TICKS = DWELL_TIME / 0.025 (ms)
VALUE_PER_TICK = 100 / TICKS
可通过组合除法简化:

VALUE_PER_TICK = 100.0 / ( DWELL_TIME / 0.025 )
例如,停留时间=0.3:

滴答声=12

每刻度值=8.33


希望对您有所帮助。

要根据您自己的定义确定用颜色填充键的最平滑方式,我们应该尽可能多地增加值计数器

因为您希望在0.3秒内将值增加到100,并且每25毫秒增加一次,我们可以这样计算增量值:

0.3秒等于300毫秒,或12个25毫秒的间隔。因此,您希望在12个间隔内将值增加到100

换句话说,在恒定增量率下,您希望每一步将值增加100/12,或大约8.33个单位


希望这有帮助。

要根据您自己的定义确定用颜色填充关键帧的最平滑方式,我们应该尽可能经常地增加值计数器

因为您希望在0.3秒内将值增加到100,并且每25毫秒增加一次,我们可以这样计算增量值:

0.3秒等于300毫秒,或12个25毫秒的间隔。因此,您希望在12个间隔内将值增加到100

换句话说,在恒定增量率下,您希望每一步将值增加100/12,或大约8.33个单位


希望这能有所帮助。

为这类事情制作动画的最平滑的方法不是在每个刻度上添加特定的数量

当悬停开始时,请记住悬停开始时间,并尽可能快地将计时器设置为25毫秒 好的在浏览器中,使用requestAnimationFrame

然后在每次滴答声中,从系统时钟中获取当前的_时间,然后计算:

fill_width = full_width * (current_time - start_time) / dwell_time
。。。并填充到计算的数量。如果答案大于全宽,那么您就完成了,应该停止计时器


这样,无论计时器何时启动,您总是为当前实时填充正确的量。即使计时器不稳定,您的动画也会很流畅。

制作此类动画的最流畅的方法不是在每个刻度上添加特定数量

当悬停开始时,请记住悬停开始时间,并尽可能快地设置计时器25毫秒即可。在浏览器中,使用requestAnimationFrame

然后在每次滴答声中,从系统时钟中获取当前的_时间,然后计算:

fill_width = full_width * (current_time - start_time) / dwell_time
。。。并填充到计算的数量。如果答案大于全宽,那么您就完成了,应该停止计时器


这样,无论计时器何时启动,您总是为当前实时填充正确的量。即使计时器抖动,动画也会平滑。

您所说的最平滑的方式是什么意思?按键是否应该以恒定速率填充?@我已经编辑了我的问题。最平滑的方式意味着最频繁的计时器间隔。在这种情况下,我只会在下一个最早的时间增加颜色的数量;i、 e,每25毫秒增加1个单位。“我认为这个问题没有专门的公式。”谢谢,我的问题又补充了一些东西。也许公式没有那么难/特别,但现在我看不出来。你现在的问题是,你想增加颜色的数量,使0.30秒后的值为100。0.3秒等于300毫秒,或12个25毫秒的间隔。因此,您希望每25毫秒将该值增加100/12,大约等于8.3。您所说的最平滑的方式是什么意思?按键是否应该以恒定速率填充?@我已经编辑了我的问题。最平滑的方式意味着最频繁的计时器间隔。在这种情况下,我只会在下一个最早的时间增加颜色的数量;i、 e,每25毫秒增加1个单位。“我认为这个问题没有专门的公式。”谢谢,我的问题又补充了一些东西。也许公式没有那么难/特别,但现在我看不出来。你现在的问题是,你想增加颜色的数量,使0.30秒后的值为100。0.3秒等于300毫秒,或12个25毫秒的间隔。因此,你想每25毫秒增加100/12,大约等于8.3。虽然你的计算很好,但Matt Timmermans的答案更平滑,所以我会接受他的答案,好吗?虽然你的计算很好,Matt Timmermans的答案更平滑,所以我会接受他的答案,好吗?