ios - 超出 UILabel 范围的 UILabel 动画

Question

我有一个标签，我想要一个“速度计”效果；当为标签的文本分配新值时，我希望旧值向上滚动，而新值从下方进入。我不知道如何实现这一点。这是我目前使用的；

  CATransition *animation = [CATransition animation];
  animation.duration = .2f;
  animation.type = kCATransitionPush;
  animation.subtype = kCATransitionFromBottom;
  animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
  animation.removedOnCompletion = YES;

  [mylabel.layer addAnimation:animation
                       forKey:@"changeTextTransition"];

  mylabel.text = @"new text";

除了顶部和底部的过渡在淡出之前超出标签的边界之外，这非常有效。我希望过渡效果包含在标签的范围内。

我试图为图层创建一个蒙版，并将图层蒙版设置为边界，但这没有效果:

  UIImageView *maskView = [[UIImageView alloc] initWithImage:labelMask];
  // this image is a png that is the same dimensions as the label, and is 100% opaque and colored white
  maskView.frame = mylabel.frame;
  mylabel.layer.mask = maskView.layer;
  mylabel.layer.masksToBounds = YES;

我什至尝试了另一种创建蒙版的方法:

  CALayer *maskLayer = [CALayer new];
  maskLayer.frame = mylabel.frame;
  maskLayer.contents = (id)(labelMask.CGImage); // same image as above
  maskLayer.contentsRect = mylabel.bounds;
  mylabel.layer.mask = maskLayer;
  mylabel.layer.masksToBounds = YES;

这没有效果。

还有什么我可以尝试防止层动画泄漏超过 UILabel 的边界？

Answer 1

您正在使用动画移动 UILabel 的图层本身，以及 UILabel 的 clipsToBounds (UIView)/masksToBounds (CALayer) 将 UILabel 的层本身限制为一个整体。

为了使这一点更清楚:如果您将某些东西放在 UILabel 中，或者尝试在标签层上渲染更大的东西，它会被蒙版剪掉。但是，如果您只是将标签移动到父 View 上的其他位置 - 那么它会保持完整，因为 mask 会随之移动...

即使在制作动画时，情况也是完全相同的。蒙版随图层移动。

所以解决方案是将 UILabel 包含在另一个 UIView 中，它本身具有 clipsToBounds 集。这也将允许您创建一个 UIView 的子类，它是一个微型 Controller ，管理它自己的标签，为它们设置动画等。在 UIView 子类上使用简单的界面按需. (我想这就是您正在做的事情，您只是忘记了在容器 View 上设置 clipsToBounds...)