【问题标题】:CoreAnimation CALayer and CATextLayer combinationCoreAnimation CALayer 和 CATextLayer 组合
【发布时间】:2011-10-30 20:14:22
【问题描述】:

我最近只是在玩 CA。现在我有点卡住了。 这是我想要动画的东西:

至于现在我已经让圆形动画工作了。我将 CALayer 子类化来制作动画。我真的不知道从这里去哪里。我必须在哪里添加 CATextLayer 的子层?如何同时为两者设置动画,使其看起来像带有线条的文本粘在圆圈末端?

如果您需要一些代码或其他任何内容,请告诉我。

我真的很乐意在这里得到一些帮助 :-)

非常感谢!

【问题讨论】:

  • 查看下面的链接。很好地说明了您可以使用动画做什么。他们在动画中加入了一些物理,等等。watchingapple.com/2008/04/… ------ 编辑:从你的问题来看,你不清楚你在制作什么动画。 “圆形动画”是什么?...您要为哪个属性设置动画?
  • 谢谢!听起来不错。我会看看那个。我想为“toValue”设置动画,以便圆的 endDegree。

标签: iphone core-animation calayer catextlayer


【解决方案1】:

我能够做到你在下面要求的。代码很粗糙,只花了几分钟,可能错过了发布,你有什么。您可以简单地将 UILabel 换成 CATextLayer(为简洁起见,使用 UILabel)。

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

【讨论】:

  • 嗨,金,非常感谢。这不完全是我想要的效果(我想让标签保持水平。但这真的对我有帮助。如果你愿意,你可以添加代码:-P
  • 抱歉回复延迟。如果你删除这两行,label.transform = CGAffineTransformMakeRotation(1.57079633);textAnimation.rotationMode = kCAAnimationRotateAuto;,它应该保持水平。
【解决方案2】:

我建议创建一个新的 UIView 类,然后使用方法 layoutSubviews。
有关 UIView 类的更多信息,请查看class reference. 只需在您的主视图中使用以下内容即可:

myView = [[myView alloc] initWithFrame:CGRectMake(100,100,100,100)];
[self.view addSubview:myView];

layoutSubviews 类似这样:

- (void) layoutSubviews{
     [super layoutSubviews];

      mainLayer.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);

      CALayer *circle = [[[CALayer alloc] init] autorelease];
      //You have to set up the circle image and everything
      circle.position = mainLayer.position;
}

当然,您必须在 .h 中添加 myView 的实现,否则其他一切都应该正常工作。

编辑:抱歉,我忘记将文本图层代码添加到 layoutSubview,但您要做的就是创建图层并将其位置设置为 mainLayer.position;

【讨论】:

  • 感谢您的回答。但我遇到的问题是动画所有的东西。我已经完成了绘图。我不确定我应该在哪里插入 CATextLayer 动画。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-08-04
  • 1970-01-01
相关资源
最近更新 更多