ios - 两个 View 之间的自定义循环过渡

Question

我想创建一个类似于 Spy Mouse 应用程序中不同 View 之间切换动画的动画。请参阅此视频以供引用:

http://www.youtube.com/watch?v=ylFdl7W3Srw

我做不到。我的动画显示了一个矩形区域而不是圆形 View 。

CABasicAnimation *cornerRadiusAction = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];    

cornerRadiusAction.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
cornerRadiusAction.duration = 5.0f;
cornerRadiusAction.toValue = [NSNumber numberWithFloat:self.view.bounds.size.height*2];
[self.view.layer addAnimation:cornerRadiusAction forKey:nil];

Answer 1

实际代码。

说明。

您无法通过简单地为 cornerRadius 设置动画来实现这样的效果。您需要使用 CALayer 的 mask 和圆形 mask 大小的动画变化。下面的代码做你想要的。动画 GIF 展示了它的实际效果。

@property (weak, nonatomic) IBOutlet UIView *customView;

- (IBAction)buttonTapped:(id)sender
{
    // Set up the shape of the circle.
    CGFloat maskDiameter = sqrtf(powf(CGRectGetWidth(_customView.bounds), 2)
                                 + powf(CGRectGetHeight(_customView.bounds), 2));

    CAShapeLayer *mask = [CAShapeLayer layer];

    // Make a circular shape.
    mask.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0.0f,
                                                                   0.0f,
                                                                   maskDiameter,
                                                                   maskDiameter)
                                           cornerRadius:maskDiameter/2.0f].CGPath;
    // Center the shape in the view.
    mask.position = CGPointMake((CGRectGetWidth(_customView.bounds) - maskDiameter)/2,
                                (CGRectGetHeight(_customView.bounds) - maskDiameter)/2);

    // Fill the circle.
    mask.fillColor = [UIColor blackColor].CGColor;

    // Add as a mask to the parent layer
    _customView.layer.mask = mask;

    // Animate.
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
    animation.duration = 5.0f;
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;

    // Create new path.
    CGPathRef newPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(maskDiameter/2.0f,
                                                                           maskDiameter/2.0f,
                                                                           0.0f,
                                                                           0.0f)
                                                   cornerRadius:0.0f].CGPath;
    // Set start and end values.
    animation.fromValue = (id)mask.path;
    animation.toValue = (__bridge id)newPath;

    // Start the animaiton.
    [mask addAnimation:animation forKey:@"path"];

}