Question

我的目标是展示一个带有圆形显示缩放动画的菜单。为此，我首先将遮罩设置为半径为0的半径。

#define DEGREES_TO_RADIANS(angle) ((angle) / 180.0 * M_PI)    
CAShapeLayer *mask = [CAShapeLayer new];
mask.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(25, 25) radius:0 startAngle:0 endAngle:DEGREES_TO_RADIANS(360) clockwise:YES].CGPath;
self.layer.mask = mask;

然后我用CABasicAnimation为新蒙版设置动画。

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
    animation.toValue = (id)[UIBezierPath bezierPathWithArcCenter:CGPointMake(25, 25) radius:self.frame.size.height*1.2 startAngle:0 endAngle:DEGREES_TO_RADIANS(360) clockwise:YES].CGPath;
    animation.removedOnCompletion = NO;
    animation.duration = 0.45f;
    animation.fillMode = kCAFillModeForwards;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    [self.layer.mask addAnimation:animation forKey:nil];

首先看这是有效的，但问题是动画本身比圆形更像椭圆形：http://i.stack.imgur.com/fqPYJ.png

代码的灵感来自Animate circular mask of UIImageView in iOS。

Answer 1

您的代码看起来很合理。（虽然如果你总是使用一个完整的圆圈，你可以使用更简单的bezierPathWithOvalInRect方法而不是bezierPathWithArcCenter）。

在您链接的图片中很难说出我在看什么。这两层是白色的，所以我们无法分辨出什么是什么。您可能希望在测试时将其中一个图层设置为彩色背景。

至于为什么你会得到一个椭圆形：你对任何一个图层都有变换吗？特别是规模变换？这会导致你的失真。

CABasicAnimation圆形面罩显示缩放路径动画

1 个答案: