QuartzCore動畫形狀？

我環顧一下，找不到一個方法來做到這一點，基本上我想要做形狀動畫，如下圖。這可以用iOS 6 API甚至iOS 7 API來完成嗎？ CAAnimation中的所有東西似乎都是將整個圖層移動到另一個CGPoint，而不是形狀的一部分。QuartzCore動畫形狀？

enter image description here

我可以做手工我想，把一個NSTimer的1/24或1/60，計算改變我的形狀和重繪遞增變化達到所需的形狀，直到，但顯然想如果蘋果公司爲此提供API，就可以利用蘋果的易用性，緩解時間效應（並節省大量開發時間）。 TY。

來源

2013-06-24 Edward Hew

您的形狀是由CGPath定義的嗎？ – Wain

你可以使用CAShapeLayer其中有一個屬性path這是動畫。你將不得不通過使用Quartz的CGPath函數或使用UIBezierPath來將你的形狀創建爲CGPath。

你會做這樣的事情：

CAShapeLayer *shapeLayer = [CAShapeLayer layer]; 
shapeLayer.bounds = CGRectMake(0.f, 0.f, 50.f, 50.f); 
shapeLayer.position = CGPointMake(50.f, 50.f); 
shapeLayer.fillColor = [[UIColor redColor] CGColor]; 
shapeLayer.path = [[UIBezierPath bezierPathWithOvalInRect:shapeLayer.bounds] CGPath]; 

[self.view.layer addSublayer:shapeLayer]; 

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"]; 
animation.fromValue = (__bridge id) [[UIBezierPath bezierPathWithOvalInRect:shapeLayer.bounds] CGPath]; 
animation.toValue = (__bridge id) [[UIBezierPath bezierPathWithRect:shapeLayer.bounds] CGPath]; 
animation.repeatCount = NSIntegerMax; 
animation.duration = 2.0; 
animation.autoreverses = YES; 

[shapeLayer addAnimation:animation forKey:@"shapeAnimation"];

如果如預期，你應該看看CAKeyframeAnimation核心動畫的插值不起作用。

來源

2013-06-24 16:49:44 Karl

謝謝卡爾，這工作，我的一天會因爲它而變得更容易。 –

對於任何一個像我這樣的人來說，修改Karl的例子，這裏是一個簡單的語音氣泡實驗，用投影的CAMediaTimingFunction移動其底部長度的尖銳部分。這基本上是我想要做的，當有人點擊定義的項目網格時，指針移動到位以反映點擊選擇。

UIBezierPath *spath = [UIBezierPath bezierPath]; 
    [spath moveToPoint:CGPointZero]; 
    [spath addLineToPoint:CGPointMake(320.0f, 0)]; 
    [spath addLineToPoint:CGPointMake(320.0f, BLOCK_HEIGHT)]; 

    // Pointy part 
    [spath addLineToPoint:CGPointMake(20.0f + POINTER_HALF, BLOCK_HEIGHT)]; 
    [spath addLineToPoint:CGPointMake(20.0f, BLOCK_HEIGHT + POINTER_HALF)]; 
    [spath addLineToPoint:CGPointMake(20.0f - POINTER_HALF, BLOCK_HEIGHT)]; 

    [spath addLineToPoint:CGPointMake(0, BLOCK_HEIGHT)]; 
    [spath closePath]; 

    UIBezierPath *spath2 = [UIBezierPath bezierPath]; 
    [spath2 moveToPoint:CGPointZero]; 
    [spath2 addLineToPoint:CGPointMake(320.0f, 0)]; 
    [spath2 addLineToPoint:CGPointMake(320.0f, BLOCK_HEIGHT)]; 

    // Pointy part 
    [spath2 addLineToPoint:CGPointMake(300.0f + POINTER_HALF, BLOCK_HEIGHT)]; 
    [spath2 addLineToPoint:CGPointMake(300.0f, BLOCK_HEIGHT + POINTER_HALF)]; 
    [spath2 addLineToPoint:CGPointMake(300.0f - POINTER_HALF, BLOCK_HEIGHT)]; 

    [spath2 addLineToPoint:CGPointMake(0, BLOCK_HEIGHT)]; 
    [spath2 closePath]; 

    CAShapeLayer *shapeLayer = [CAShapeLayer layer]; 
    shapeLayer.bounds = CGRectMake(0.f, 0.f, 320.0f, 76.0f); 
    shapeLayer.position = CGPointMake(160.0, 200.0); 
    shapeLayer.fillColor = [[UIColor redColor] CGColor]; 
    shapeLayer.path = [[UIBezierPath bezierPathWithOvalInRect:shapeLayer.bounds] CGPath]; 

    [self.layer addSublayer:shapeLayer]; 

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"]; 
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 
    animation.fromValue = (__bridge id)(spath.CGPath); 
    animation.toValue = (__bridge id)(spath2.CGPath); 
    animation.repeatCount = NSIntegerMax; 
    animation.duration = 2.0; 
    animation.autoreverses = YES; 

    [shapeLayer addAnimation:animation forKey:@"shapeAnimation"];

來源

2013-06-25 05:42:17

QuartzCore動畫形狀？

回答

相關問題