画的速度如何随时间变化

doreamon999

运动曲线是可设置动画的属性和时间之间的图。 运动曲线是可设置动画的属性和时间之间的图。（查看大图） 让我们以距离 ( translateX)作为可动画属性的示例。（该解释适用于任何其他可动画属性。） 计算距离-时间图上时间 t1 处的速度。 计算距离-时间图上时间 t1 处的速度。（查看大图） 如果您有物理和基本微积分的经验，您就会知道从距离-时间图解读速度非常简单。距离作为时间函数的一阶导数是速度，这意味着遵循距离-时间曲线的物体在曲线陡峭的地方速度较大，在曲线平坦的地方速度较低。如果您知道它是如何工作的，那就太好了！您已准备就绪，可以跳到下一部分。 现在，我意识到设计和。

开发是一个多元化的领域，并不是每个人都有相同的背景。也许上面两段对你来说都是行话。别担心。我们将继续前进并理解这些术语。 考虑下面的红色框。让我们在这里变得有点幼稚，将红色盒子称为“Boxy”；这样引用起来会更容易。好吧，Boxy 将以线性方式从屏幕的一个边缘移动到另一边缘，我们将分析它的运动。 的预设之一transition-timing-function是linear. 为了让 Boxy 动起来，我们要做的就是添加以下类。 复制 让我们拭目以待吧。 进 Whatsapp 号码列表 行直线运动的四四方方 盒子进行直线运动。 机器人，不是吗？你可以说这个动作感觉像机器人，因为它是线性的，这是一个完全合理的答案。但你能解释一下原因吗？我们可以看到设置linear导致机器人运动，但幕后究竟发生了什么？这就是我们首先要弄清楚的；我们将深入了解其内部结构，并理解为什么这种运动感觉机械化、块状且不自然。 让我们首先绘制 Boxy 。



的运动图表，看看我们是否可以获得一些见解。我们的图表将有两个轴，第一个是距离，第二个是时间。Boxy 在 1 秒（时间）内移动了 1000 个像素（距离）的总距离。现在，不要被下面的所有数学吓到——它非常简单。 这是我们非常简单的图表，其中的轴如上所述。 带轴的空图 带轴的空图（查看大图） 现在，它是空的。让我们用一些数据填充它。 首先，我们知道在 0 秒时，当动画尚未开始时，Boxy 处于其初始位置（0 像素）。1 秒过去后，Boxy 总共移动了 1000 个像素，落在显示屏的另一边缘。 Boxy 的初始位置和最终位置 Boxy的初始位置和最终位置（查看大图） 让我们将这些数据绘制在图表上。 绘制了 Boxy 的初始位置和。