QuartzCore动画形状?

时间:2013-06-24 16:29:51

标签: ios animation shapes

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

enter image description here

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

2 个答案:

答案 0 :(得分:3)

您可以使用具有可动画属性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"];

答案 1 :(得分: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"];