iphone - 创建类似用户位置的动画 蓝色弹珠掉落

Question

你知道如何在 MKMapView 中创建像 Blue Marble drop User-Location 这样的动画吗？

Answer 1

虽然我不确定 Apple 如何实现这种效果的具体细节，但对我来说这是一个使用 CoreAnimation 和自定义动画属性的好机会。 This post提供了有关该主题的一些不错的背景。我假设您指的是以下序列的“Blue Marble drop”动画:

1. 浅蓝色大圆圈放大到框架中
2. 随着位置的变化，浅蓝色大圆圈在两个相对较大的半径之间摆动计算
3. 浅蓝色大圆圈在用户位置放大为深蓝色小圆圈

虽然这可能会稍微简化流程，但我认为这是一个很好的起点，并且可以相对轻松地添加更复杂/详细的功能(即，当较大的圆圈汇聚在其上时，小的黑圈会跳动。)

我们首先需要的是一个自定义 CALayer 子类，它带有一个自定义属性，用于我们的外部大浅蓝色圆圈半径:

#import <QuartzCore/QuartzCore.h>

@interface CustomLayer : CALayer
@property (nonatomic, assign) CGFloat circleRadius;
@end

和实现:

#import "CustomLayer.h"

@implementation CustomLayer
@dynamic circleRadius; // Linked post tells us to let CA implement our accessors for us.
                       // Whether this is necessary or not is unclear to me and one 
                       // commenter on the linked post claims success only when using
                       // @synthesize for the animatable property.

+ (BOOL)needsDisplayForKey:(NSString*)key {
    // Let our layer know it has to redraw when circleRadius is changed
    if ([key isEqualToString:@"circleRadius"]) {
        return YES;
    } else {
        return [super needsDisplayForKey:key];
    }
}

- (void)drawInContext:(CGContextRef)ctx {

    // This call is probably unnecessary as super's implementation does nothing
    [super drawInContext:ctx];

    CGRect rect = CGContextGetClipBoundingBox(ctx);

    // Fill the circle with a light blue
    CGContextSetRGBFillColor(ctx, 0, 0, 255, 0.1);
    // Stoke a dark blue border
    CGContextSetRGBStrokeColor(ctx, 0, 0, 255, 0.5);

    // Construct a CGMutablePath to draw the light blue circle
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddArc(path, NULL, rect.size.width / 2, 
                             rect.size.height / 2, 
                             self.circleRadius, 0, 2 * M_PI, NO);
    // Fill the circle
    CGContextAddPath(ctx, path);
    CGContextFillPath(ctx);

    // Stroke the circle's border
    CGContextAddPath(ctx, path);
    CGContextStrokePath(ctx);

    // Release the path
    CGPathRelease(path);

    // Set a dark blue color for the small inner circle
    CGContextSetRGBFillColor(ctx, 0, 0, 255, 1.0f);

    // Draw the center dot
    CGContextBeginPath (ctx);
    CGContextAddArc(ctx, rect.size.width / 2, 
                         rect.size.height / 2, 
                         5, 0, 2 * M_PI, NO);
    CGContextFillPath(ctx);
    CGContextStrokePath(ctx);

}

@end

有了这个基础设施，我们现在可以轻松地为外圆的半径设置动画 b/c CoreAnimation 将负责值插值和重绘调用。我们所要做的就是向图层添加动画。作为一个简单的概念证明，我选择了一个简单的 CAKeyframeAnimation 来完成 3 个阶段的动画:

// In some controller class...
- (void)addLayerAndAnimate {

    CustomLayer *customLayer = [[CustomLayer alloc] init];

    // Make layer big enough for the initial radius
    // EDIT: You may want to shrink the layer when it reacehes it's final size
    [customLayer setFrame:CGRectMake(0, 0, 205, 205)];
    [self.view.layer addSublayer:customLayer];


    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"circleRadius"];

    // Zoom in, oscillate a couple times, zoom in further
    animation.values = [NSArray arrayWithObjects:[NSNumber numberWithFloat:100], 
                                                 [NSNumber numberWithFloat:45], 
                                                 [NSNumber numberWithFloat:50], 
                                                 [NSNumber numberWithFloat:45], 
                                                 [NSNumber numberWithFloat:50], 
                                                 [NSNumber numberWithFloat:45], 
                                                 [NSNumber numberWithFloat:20], 
                                                  nil];
    // We want the radii to be 20 in the end
    customLayer.circleRadius = 20;

    // Rather arbitrary values.  I thought the cubic pacing w/ a 2.5 second pacing
    // looked decent enough but you'd probably want to play with them to get a more
    // accurate imitation of the Maps app.  You could also define a keyTimes array for 
    // a more discrete control of the times per step.
    animation.duration = 2.5;
    animation.calculationMode = kCAAnimationCubicPaced;

    [customLayer addAnimation:animation forKey:nil];

}

以上是一个相当“hacky”的概念证明，因为我不确定您打算使用此效果的具体方式。例如，如果您想在数据准备好之前摆动圆圈，上面的内容就没有多大意义，因为它总是会摆动两次。

一些结束语:

• 再次声明，我不确定您对这种效果的意图。如果，对于例如，您要将它添加到 MKMapView，上面可能需要进行一些调整以与 MapKit 集成。
• 链接的帖子表明上述方法需要 iOS 3.0+ 和 OS X 10.6+ 中的 CoreAnimation 版本
• 说到链接的帖子(就像我经常做的那样)，感谢 Ole Begemann，他写了 it并且出色地解释了 CoreAnimation 中的自定义属性。

编辑:此外，出于性能原因，您可能希望确保图层仅达到所需的大小。也就是说，在完成较大尺寸的动画后，您可能希望缩小尺寸，以便只使用/绘制必要的空间。一个很好的方法就是找到一种方法来为 bounds 设置动画(与 circleRadius 相对)并根据大小插值执行此动画，但我有一些难以实现(也许有人可以就该主题添加一些见解)。

希望对您有所帮助，山姆