2012-03-01 85 views
7

我遇到了一個問題,當我創建一個明確的動畫從橢圓改變CAShapeLayer的道路的價值一個矩形。CAShapeLayer動畫效果路徑毛刺/忽明忽暗(從橢圓RECT和背面)

在我的畫布控制器我設置基本CAShapeLayer並將其添加到根視圖的層:

CAShapeLayer *aLayer; 
aLayer = [CAShapeLayer layer]; 
aLayer.frame = CGRectMake(100, 100, 100, 100); 
aLayer.path = CGPathCreateWithEllipseInRect(aLayer.frame, nil); 
aLayer.lineWidth = 10.0f; 
aLayer.strokeColor = [UIColor blackColor].CGColor; 
aLayer.fillColor = [UIColor clearColor].CGColor; 
[self.view.layer addSublayer:aLayer]; 

然後,當我動畫路徑我得到的最後幾幀奇怪的毛刺/閃爍當形狀變爲直線時動畫,以及在動畫離開直線時的前幾幀。動畫設置如下:

CGPathRef newPath = CGPathCreateWithRect(aLayer.frame, nil); 
[CATransaction lock]; 
[CATransaction begin]; 
[CATransaction setAnimationDuration:5.0f]; 
CABasicAnimation *ba = [CABasicAnimation animationWithKeyPath:@"path"]; 
ba.autoreverses = YES; 
ba.fillMode = kCAFillModeForwards; 
ba.repeatCount = HUGE_VALF; 
ba.fromValue = (id)aLayer.path; 
ba.toValue = (__bridge id)newPath; 
[aLayer addAnimation:ba forKey:@"animatePath"]; 
[CATransaction commit]; 
[CATransaction unlock]; 

我試圖像鎖定/解鎖CATransaction,各種填充模式玩等許多不同的事情......

這裏的毛刺的圖像: http://www.postfl.com/outgoing/renderingglitch.png

我所經歷的視頻可以在這裏找到: http://vimeo.com/37720876

回答

5

不幸的是,這是敬畏,否則的限制CAShapeLayers的一些動畫路徑屬性。

基本上它試圖插入兩條路徑之間。當目標路徑和開始路徑具有不同數量的控制點時,它會遇到麻煩 - 並且曲線和直邊會產生此問題。

您可以嘗試通過繪製你的橢圓形的4條曲線,而不是單個的橢圓,以儘量減少影響,但它仍然是不完全正確。我還沒有找到從曲線到多邊形的順利方法。

您可能能夠得到大部分的方式存在,然後轉移到一個動畫漸變的最後一部分 - 這將不會那麼好,雖然。

+0

你的答案和一個我從大衛鄧肯貼之間,我有一個很好的正在發生的事情的感覺。希望未來版本中的動畫路徑屬性變得更好。 – 2012-03-03 06:58:35

+0

如果您使用弧形矩形方法進行工作,請在此處張貼! – jrturton 2012-03-03 08:32:31

+0

我不知道你是否已經做過這方面的工作,或者自從發佈這篇文章後看到任何好的答案。我開始在一個普通的圓上繪製多邊形動畫,並且目前它正在爲一個圓形工作來製作方形動畫。我已經張貼該代碼作爲這個問題的答案,http://stackoverflow.com/questions/28437014/animating-between-two-bezier-path-shapes/28448397#28448397 – rdelmar 2015-02-11 07:09:16

6

我收到了石英開發列表此反饋:

大衛·鄧肯說:

動畫形狀圖層的路徑時,才能保證當 您從喜歡動畫喜歡的工作。一個矩形的 線的序列,而橢圓是圓弧的序列(你可以看到,通過使用CGPathApply產生的 序列),並且這樣的動畫它們之間 不能保證看起來非常好,或很好地工作在所有。

要做到這一點,你基本上由 使用,你會用它來創建一個橢圓相同曲線創建一個矩形的模擬,但 用會導致渲染看起來像一個矩形 參數。這應該不是太困難(並再次,你可以用你 從CGPathApply獲得與 CGPathAddEllipseInRect創造爲導向的路徑是什麼),但可能會需要一些 調整,以得到正確的。