CoreAnimation CALayer和CATextLayer组合

问题描述

我最近正在和CA一起玩。现在我有点卡住了。
这是我要设置动画的东西：

I'am just playing around with CA lately. Now I am kind of stuck.This is the thing I want to animate:

到目前为止，我已经使圆形动画起作用了。我将CALayer细分为动画。我真的不知道从这里去哪里。我必须在哪里添加CATextLayer的子层？如何同时设置两个动画的外观，使其线条的文本似乎停留在圆的末端？

As for now I already got the circle animation working. I subclassed CALayer to make the animation. I really don't know where to go from here. Where do I have to add the sublayer of CATextLayer? How do I animate both at the same time so it looks like the text with its line is sticking at the circle end?

如果您需要一些代码或其他任何东西，请让我知道。

If you need some code or anything else let me know.

我真的很高兴在这里得到一些帮助：-）

I would be really happy to get some help here :-)

非常感谢！

推荐答案

我能够按照下面的要求进行操作。代码非常粗糙，仅花了几分钟时间，可能错过了发行版以及您的需求。您可以简单地将UILabel交换为CATextLayer（为简便起见使用UILabel）。

I was able to do what you are asking for below. Code is very rough, just spent a couple minutes on it, may have missed releases and what have you. You can simply swap the UILabel for a CATextLayer (used UILabel for brevity).

    CAShapeLayer* circle = [[CAShapeLayer alloc] init];
    CGMutablePathRef path = CGPathCreateMutable();
    CGRect textRect = CGRectMake(self.bounds.size.width/4, (self.bounds.size.height-self.bounds.size.width/2)/2, self.bounds.size.width/2, self.bounds.size.width/2);
    float midX = CGRectGetMidX(textRect);
    float midY = CGRectGetMidY(textRect);
    CGAffineTransform t = CGAffineTransformConcat(
                            CGAffineTransformConcat(
                                CGAffineTransformMakeTranslation(-midX, -midY),
                                CGAffineTransformMakeRotation(-1.57079633/0.99)),
                            CGAffineTransformMakeTranslation(midX, midY));
    CGPathAddEllipseInRect(path, &t, textRect);
    circle.path = path;
    circle.frame = self.bounds;
    circle.fillColor = [UIColor clearColor].CGColor;
    circle.strokeColor = [UIColor blackColor].CGColor;
    circle.lineWidth = 60.0f;
    [self.layer addSublayer:circle];

    CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = 15.0f;
    animation.fromValue = [NSNumber numberWithFloat:0.0f];
    animation.toValue = [NSNumber numberWithFloat:1.0f];
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    [circle addAnimation:animation forKey:@"strokeEnd"];

    [circle release];

    UILabel* label = [[UILabel alloc] init];
    label.text = @"Test Text";
    label.font = [UIFont systemFontOfSize:20.0f];
    label.center = CGPathGetCurrentPoint(path);
    label.transform = CGAffineTransformMakeRotation(1.57079633);
    [label sizeToFit];
    [self.layer addSublayer:label.layer];

    CAKeyframeAnimation* textAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    textAnimation.duration = 15.0f;
    textAnimation.path = path;
    textAnimation.rotationMode = kCAAnimationRotateAuto;
    textAnimation.calculationMode = kCAAnimationCubicPaced;
    textAnimation.removedOnCompletion = NO;
    [label.layer addAnimation:textAnimation forKey:@"position"];

这篇关于CoreAnimation CALayer和CATextLayer组合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！