ios 线条球_iOS 一条线条绕贝塞尔曲线做动画?

2023-05-16

这个题目说得不清楚,我先猜想题主的意图,可能猜错。

假设是 2 维情况。先有一条贝塞尔曲线组成的线条,假设为红色。之后有个小点在红色线条上移动,小点移动过的路径就是蓝色,还没有移动到的地方就是红色。随着小点移动,线条由红色过渡成蓝色。这个模型可以有多个变化,假如原先线条是无色,小点也是无色,就可以看到一个线条逐渐生成的动画。假如线条保持原状,小点换成小球,就变成小球在路径上滚动的动画。

移动的速度也有歧义,什么叫平滑?有两种可能。匀速的,只需要沿着贝塞尔曲线移动。

考虑重力,路径向下的时候需要加速,路径向上的需要减速。

贝塞尔曲线也有歧义,这里假设是三阶贝塞尔曲线(有两个控制点),二阶贝塞尔曲线(有一个控制点)可以方便地转化成三阶。下面的提到贝塞尔曲线无特别说明都指三阶。

问题没有说清楚的,别人就很难去回答。上面只是重新描述了问题,下面才是正式回答。

----------

考虑贝塞尔曲线的参数方程,可以根据 t 值计算出路径点。但这样根据 t 值去做动画并非匀速的。通常曲线问题,都应该先转成直线。直线比曲线容易处理。

一段贝塞尔曲线可以细分成两段,两段可以细分成四段,这个细分过程可以不断递归下去。当细分到一定程度,忽略误差(比如误差小于一像素),曲线就转化成直线。这个细分过程,可以参考 nanovg 的 nanovg.c 中的 nvg__tesselateBezier 函数。

这样一段贝塞尔曲线就转变成折线,折线由一系列点构成。这时问题就转变成:如何沿着折线运动。这个问题就很简单了,一些基本的向量几何计算就可以解决。但需要注意一个地方,折线由多段线段组成,当沿着折线运动时,某段线段会超出范围,下一段线段就需要补上这个超出的范围。不然从一线段转移到另一线段时,误差就会被积累,动画就会突然跳一下。

匀速问题其实已经解决了。这时再考虑加速和减速,计算两点之间的夹角,可以知道小点是上坡还是下坡,也知道坡度。这时用基本的牛顿物理就可以模拟加速和键速。这种加速度问题,在高中应该做过不少。

大方向就是这些,细节可能有所偏差,需要根据实际情况进行调整。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ios 线条球_iOS 一条线条绕贝塞尔曲线做动画? 的相关文章

随机推荐