这种动画轨迹背后的数学原理是什么?

3

这种情况背后的数学是什么?从C++角度来看。

enter image description here

更多示例请参见此处的MSDN页面

更新: 有人要求提出更具体的问题。 Penner的tweens^的数学/动画理论是什么?你如何想出这些公式?它们基于哪些数学原理?

我和数学不是好朋友! 我正在为我写的一个UI组件编写一个多FLOAT值动画器,我想知道从本地C ++程序员的角度来看,生成这样的轨迹的数学是什么。

我在谷歌上找到了代码,但我也想从编程角度了解一些理论...不仅仅是代码或纯数学。我可以根据我在线找到的内容组合所需的代码,但我希望在此过程中理解它。就像这个网站允许人们尝试使用缓动函数生成器
我还可以使用Windows动画管理器(如果情况变得混乱,我可能会使用它),但它只能操作单个float。而仅仅动画化RGB需要逐个FLOAT进行动画处理。这会导致代码膨胀...非常糟糕。 如果有人有一些提示,我将非常感激。我主要寻求来自编程角度的理论。最终目标是编写一堆不同的动画算法,可以在一段时间或速度内将一组FLOAT从其初始值动画到其目标值。 计划不仅仅是编写代码,还要理解它背后发生的事情。然后,也许会对这些动画进行创意...除非这些被证明是某些严格的标准数学函数。

看起来你想要一个三次样条线段。 - Vaughn Cato
更准确地说,看起来像一个 Hermite 曲线(因为有一条切线画出)。 - Damon
我认为你需要让你的问题更具体一些。我已经思考了一段时间如何回答,但它实际上有点宽泛(甚至有人已经投票关闭了,所以似乎其他人也有同感)。你试图解决什么问题?大多数插值技术适用于3向量或4向量(如RGBA),与单个标量相同。此外,有很多技术可以用于几种众所周知(和不太知名)的方式,这些方式可能非常不同。例如,您可以使用经典的Hermite缓入/缓出函数来决定... - Damon
@Damon 我已经完成了一个基本的线性插值算法。但我正在尝试为它添加效果。使其非线性,在末尾添加反弹效果。不是直线移动,而是向上移动一点,在接近末尾时向下移动一点。在开始/结束附近加速或减速等等...我正在尝试找出一种通用的方法来组合这样的动画和数学公式。 - CodeAngry
一种使线性插值“不那么线性/无聊”的简单方法是使用像这样的东西。请注意“说明”段落中的代码。这是一个简单的1D Hermite插值,其中所有常量(切线)已经折叠以给出易于计算的方程式。这些东西的工作原理非常好地解释在E. Lengyel的《数学3D游戏编程和计算机图形学》一书中。还有很多网站(免费),但需要花费一些时间来查找。 - Damon
显示剩余2条评论
2个回答

4

因此,考虑缓动函数的要求。

  1. 该函数应表示两个位置/状态之间的有效平滑运动。 对于那些没有阅读相关部分的人来说,这意味着 f 应为连续且可导函数,使得 f(0) == 0f(1) == 1;实际运动是使用它作为基本构建的。
  2. “缓入”(在动画缓动意义上)意味着“导数为零”;这会产生运动以零速度开始和/或结束的效果(即静止)。 因此,“缓入”意味着 f'(0) == 0,“缓出”意味着 f'(1) == 0

其他所有内容都基于审美考虑。

立方曲线(例如Bezier/Hermite样条)很受欢迎,部分原因是它们让您控制曲线两端的位置和切线(速度),但也因为它们接近一个柔性梁的自然形状,如果您将其位置限制在几个点上。 立方体形状最小化了弯曲梁的内部应力。(毫不奇怪,这些木梁被船舶设计师和其他草图制作者称为“样条线”,因为这是我们得到这个词的地方。)

从历史上看,手绘卡通动画师一直根据经验凭感觉指定他们的缓动效果。 关键动画师在其关键帧旁边绘制一个图表(称为“时间图表”;在您喜欢的图像搜索引擎上查找此内容),告诉中间人如何定时中间的单元格。

然而,相机运动(平移,缩放,旋转)则是另一回事。 布局/动画艺术家指定运动的开始和结束(使用场地图指定),运动发生的帧数,缓动说明以及布局/动画团队认为重要的任何其他内容(例如,如果必须“逗留”)。

需要计算实际运动; 如果旋转的一个帧偏差达到几百分之一度,观众会注意到。 进行这些计算是摄影部门工作的一部分。

有一本名为“Basic Animation Stand Techniques”的精彩书籍,由Brian Salt编写,可追溯到物理动画相机时代,并详细描述了他们必须做的事情以及程度。 如果您对此感兴趣,我建议您阅读它。


2

数学就是数学。

一份好的关于黎曼和的教程将演示该概念。

在基本编程中,您有一个生成给定X(时间)的Y值(高度)的数学方程。 周期性地,例如每秒一次,您插入一个新的X(时间)值并获得高度。

您评估此函数的频率越高,分辨率就越高(这就是黎曼和和微积分的图表的用处)。 您将获得的最佳结果是类似楼梯的曲线的近似值

在嵌入式系统中,没有太多资源可以非常频繁地评估此类函数。 可以使用线段来逼近曲线。 线段越多,逼近程度越高(精度更高)。 因此,一种方法是将曲线分成线段。 对于给定的x,使用相应的线性公式进行计算。 与计算高阶方程相比,计算线性方程通常需要更少的资源。

您的曲线通常是从物理方程中生成的。 因此,您不仅需要提高数学水平,还应该提高物理水平。

否则,您可以搜索网络上处理轨迹的库。

随着我们接近硬件,可以使用定时器调用评估给定X的轨迹函数的方法。 定时器有助于产生更准确的时间值。

搜索网络上的“曲线拟合算法”,“Bresenham算法”,“图形碰撞检测算法”


2
这个人是伯尔哈德·黎曼,发音类似于“Rhyman”。在查找时正确的名字可能会有所帮助。其他需要提及的名字包括达布和欧拉方法。(同样的错误经常发生在维纳和韦纳身上,一个是以维也纳命名的香肠,另一个是一些令人讨厌的政治家。) - Lutz Lehmann

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接