1

我試圖使用CGPathAddCurveToPoint動畫化一個視圖的運動並生成一條貝塞爾路徑,但我無法找出原點和destionation之間的控制點。你們中的任何一個人都知道如何在給定UIView的起源和destionation的情況下動態計算控制點?iOS計算貝塞爾路徑曲線動畫給出兩點的控制點

例如(iPad),我正在嘗試使從點(455,482)飛到(31,100)的鳥(UIView)動起來。我想成爲鳥類飛行的曲線運動而不是直線運動。我會非常感謝你的幫助。

謝謝你的答案,但仍然不知道如何計算控制點。

回答

2

您能否澄清一下您正在尋找的效果?控制點的選擇不僅是開始和結束座標的函數,還是您試圖實現的效果的功能。在過去,在我想要「拾取和放下」視圖的錯覺中動畫化圖像視圖的運動時,我在控制點上在相同方向上做了輕微的垂直偏移,這產生稍微更多的動態運動一個純粹的線性運動,但它完全取決於你想要做什麼。我也在做這個動畫的同時擴大了變形尺度,然後恢復了正常的變形尺度,進一步豐富了拾取和放棄動畫視圖的錯覺。

在你的修改答案中,你說你想顯示一隻鳥的飛行。現在,這是一個令人着迷的問題。鳥從側面看,例如從一個分支跳到另一個分支,在這種情況下,你的控制點可能會直線上升一點,以顯示鳥起飛和着陸。或者,如果您試圖模擬拍動動作,您可能還會有臨時上行控制點,每個動作一個。還是從下方或上方看鳥,在這種情況下,一個輕微的「s」形飛行模式可能就足夠了,所以你只需要一個控制指向沿飛行路徑指向起飛位置45度,並且另一個控制點在末端,朝向起點指向45度,但指向另一個方向。這一切都取決於您要查找的效果,因爲該應用的理論上是鳥在三維空間中與觀看者之間的關係。

您可能需要顯示場景的屏幕快照和鳥的圖像(是從側面還是從上面或下面)。您可能還想繪製一個您正在設想的飛行模式的例子,也許我們可以提出其他更具體的建議。

其他資源:

順便說一句,有動畫的一些有趣的示威活動可能會有所幫助。例如Mike Nachbaur的這款賽車動畫在我做第一個動畫的時候很有幫助,向我展示瞭如何繪製更加緩慢的路徑,如何沿着路徑旋轉圖像等等。我知道這不是鳥的飛行,但它是仍是說明性的我相信網上也有其他很棒的例子。無論如何,這些教程可能會幫助您縮小您的應用程序視野與更加困難的路徑之間的差距。

1
//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];