ios - QuartzCore 动画形状？

Question

我环顾四周，找不到这样做的方法，基本上我想做形状动画，如下图所示。这实际上可以用 iOS 6 API 甚至 iOS 7 API 完成吗？CAAnimation 中的所有内容似乎都是将整个图层移动到另一个 CGPoint，而不是形状的一部分。

我想我可以手动完成，将 NSTimer 放在 1/24 或 1/60，计算我的形状的变化并重新绘制增量移位，直到达到所需的形状，但显然想利用 Apple 的缓入、缓和- 如果 Apple 有这方面的 API，也可以消除计时效果（并节省大量开发时间）。泰。

Answer 1

您可以使用CAShapeLayerwhich 具有path可动画的属性。您必须CGPath使用 Quartz 中的 CGPath 函数或使用 UIBezierPath 来创建形状。

你必须做这样的事情：

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.

Answer 2

对于像我这样在这些东西上苦苦挣扎的人，修改 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"];