如何在UIView中制作可扩展的环形动画(类似于潜艇声纳)？

Question

我想知道如何制作像潜水艇中的声纳一样的动画:从中心扩展的厚环,当alpha降到0时变得更大并消失; 我讲了一些关于CABasicAnimation的例子,但是我不知道如何做这个动画片.

Answer 1

使用a CAShapeLayer和动画显示基本动画的路径.要同时为alpha设置动画,最好在动画组中同时使用这两个动画,以确保它们保持同步.

@implementation SonarView

+ (Class)layerClass
{
    // We want the base layer of this class to be a CAShapeLayer.
    return [CAShapeLayer class];
}

// There are various methods where you could set the animation up.
// I've chosen layoutSubviews since it's called when the view size
// changes as a side-effect.
- (void)layoutSubviews
{
    CGRect rect1;
    CGRect rect2;
    UIBezierPath *path1;
    UIBezierPath *path2;
    CAShapeLayer *shapeLayer;
    CAAnimationGroup *group;
    CABasicAnimation *pathAnimation;
    CABasicAnimation *alphaAnimation;

    [super layoutSubviews];

    // The circle/oval in its largest size.
    rect1 = self.bounds;
    path1 = [UIBezierPath bezierPathWithOvalInRect:rect1];

    // Shrink it down to a 2x2 circle.
    rect2 = CGRectInset(rect1, (rect1.size.width / 2) - 1, (rect1.size.height / 2) - 1);
    path2 = [UIBezierPath bezierPathWithOvalInRect:rect2];

    // Configure the layer.
    shapeLayer = (CAShapeLayer *)self.layer;
    shapeLayer.lineWidth = 1;
    shapeLayer.strokeColor = [[UIColor redColor] CGColor];
    shapeLayer.fillColor = [[UIColor clearColor] CGColor];
    // This is the path that's visible when there'd be no animation.
    shapeLayer.path = [path1 CGPath];

    // Animate the path.
    pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
    pathAnimation.fromValue = (id)[path2 CGPath];
    pathAnimation.toValue = (id)[path1 CGPath];

    // Animate the alpha value.
    alphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    alphaAnimation.fromValue = @(1);
    alphaAnimation.toValue = @(0);

    // We want both animations to run together perfectly, so we
    // put them into an animation group.
    group = [CAAnimationGroup animation];
    group.animations = @[ pathAnimation, alphaAnimation ];
    group.duration = 1;
    group.repeatCount = HUGE_VALF;

    // Add the animation to the layer.
    [shapeLayer addAnimation:group forKey:@"sonar"];
}

@end