QuartzCore动画形状？

Question

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

我可以手动操作，我想，在1/24或1/60上放置NSTimer，计算我的形状的变化并重新绘制增量变化，直到达到所需的形状，但显然想利用Apple的易用性 - 如果Apple有这方面的API，那么，也可以缓解时间效应（并节省很多开发时间）。 TY。

Answer 1

您可以使用具有可动画属性CAShapeLayer的{​​{1}}。您必须使用Quartz中的CGPath函数或使用UIBezierPath将您的形状创建为path。

你必须做这样的事情：

CGPath

如果Core Animation的插值不能按预期工作，您应该查看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"]; 。

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"];