给定两个点的贝塞尔路径曲线动画的iOS计算控制点答案

【问题标题】：iOS Calculation control points for bezier path curve animation given two points给定两个点的贝塞尔路径曲线动画的iOS计算控制点
【发布时间】：2012-08-31 22:30:35
【问题描述】：

我正在尝试使用 CGPathAddCurveToPoint 为视图的移动设置动画并生成贝塞尔路径，但我无法确定起点和终点之间的控制点。你们中的任何人都知道如何在给定 UIView 的来源和目的地的情况下动态计算控制点？

例如 (iPad)，我正在尝试制作一只鸟 (UIView) 从点 (455,482) 飞到 (31,100) 的动画。我想成为鸟儿飞行的曲线运动而不是直线运动。非常感谢您的帮助。

感谢您的回答，但仍然想知道如何计算控制点。

【问题讨论】：

标签： ios animation core-animation uiviewanimation uiviewanimation-curve

【解决方案1】：

您能否澄清一下您正在寻找的效果？控制点的选择不仅是起点和终点坐标的函数，也是您要达到的效果的函数。过去，在我想要“拾取和放下”视图的错觉的图像视图的运动动画中，我在同一方向上的控制点上做了轻微的垂直偏移，这会产生比纯粹的线性运动，但这完全取决于您要做什么。我还通过动画放大然后同时恢复变换比例的正常来完成此操作，以进一步丰富拾取和放下动画视图的错觉。

在您修改后的答案中，您说您想展示一只鸟的飞行。现在，这是一个有趣的问题。是从侧面看到的鸟，例如从一个分支起飞到另一个分支，在这种情况下，您的控制点可能都会指向一点点以显示鸟的起飞和降落。或者，如果您尝试模拟扑动运动，您可能还具有临时向上控制点，每个扑动一个。或者是从下方或上方看鸟，在这种情况下，轻微的“s”形飞行模式可能就足够了，所以你只需要一个与起飞位置成 45 度角的控制器，指向飞行路径，并且终点的另一个控制点，指向起点向后 45 度，但指向另一个方向。考虑到应用程序在 3d 空间中鸟和观察者之间的关系的理论，这一切都取决于您正在寻找的效果。

您可能需要显示场景的屏幕快照和鸟的图像（是从侧面，还是从上方或下方）。您可能还想绘制一个您所设想的飞行模式的示例，也许我们可以提出其他更具体的建议。

其他资源：

顺便说一下，有一些有趣的动画演示可能会有所帮助。例如，Mike Nachbaur 的这个赛车动画在我制作第一个动画时很有帮助，向我展示了如何绘制贝塞尔路径，如何沿着路径旋转图像等等。我知道这不是鸟的飞行，但它仍然是说明性的。我相信网上也有其他很好的例子。无论如何，这类教程可能会帮助您弥合您对应用的愿景与贝塞尔路径的外观之间的差距。

【讨论】：

【解决方案2】：

//Draw points
UIBezierPath *aPath = [UIBezierPath bezierPath];
[aPath setLineWidth: LINE_SIZE];
for (int i=0; i<[results count]; i++) {
    CGPoint endPt = [[results objectAtIndex: i] CGPointValue];
    if (i == 0) {
        [aPath moveToPoint:endPt];
    } else {
        //Previous (start) point
        CGPoint startPt =[[results objectAtIndex: i-1] CGPointValue];

        //Default control points
        CGPoint cPt1, cPt2;
        if(ABS(startPt.x - endPt.x) > ABS(startPt.y - endPt.y)) {
            cPt1 = (CGPoint){(startPt.x + endPt.x) / 2, startPt.y};
            cPt2 = (CGPoint){cPt1.x, endPt.y};
        } else {
            cPt1 = (CGPoint){startPt.x, (startPt.y + endPt.y) / 2};
            cPt2 = (CGPoint){endPt.x, cPt1.y};
        }

        //Add curve to end point
        [aPath addCurveToPoint: endPt controlPoint1: cPt1 controlPoint2: cPt2];
    }
}
[aPath stroke];

【讨论】：