iphone-创建类似用户位置的动画蓝色大理石下降

您知道如何在MKMapView中创建类似蓝色大理石放置用户位置的动画吗

将其添加到地图对象：

myMap.showsUserLocation = TRUE;

---

虽然我不确定苹果是如何实现这种效果的，但我觉得这是一个使用CoreAnimation和自定义动画属性的绝佳机会。提供了一些关于这个主题的好背景。通过“蓝色大理石下落”动画，我假设您指的是以下序列：

大的浅蓝色圆圈放大到画面中

随着位置的变化，大的浅蓝色圆圈在两个相对较大的半径之间振荡 算计

大的浅蓝色圆圈在用户位置上放大为小的深蓝色圆圈

虽然这可能会稍微简化流程，但我认为这是一个很好的起点，可以相对轻松地添加更复杂/详细的功能（即，当较大的圆在其上会聚时，小的暗圆会脉冲）

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

#import <QuartzCore/QuartzCore.h>

@interface CustomLayer : CALayer
@property (nonatomic, assign) CGFloat circleRadius;
@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];

}

以上是一个相当“黑客”的概念证明，因为我不确定你打算以何种具体方式使用这种效果。例如，如果您希望在数据准备好之前振荡圆，那么上面的内容没有多大意义，因为它总是振荡两次

一些闭幕词：

• 再说一次，我不确定你的意图。如果，为了 例如，将其添加到

  MKMapView

  ，上述操作可能需要 进行了一些调整以与MapKit集成
• 链接帖子建议上述方法需要iOS 3.0+和OS X 10.6中的CoreAnimation版本+
• 说到链接帖子（就像我经常做的那样），我非常感谢奥勒·贝格曼，他写了一篇精彩的文章，解释了CoreAnimation中的自定义属性

编辑：此外，出于性能原因，您可能需要确保层的大小与需要的大小相同。也就是说，在完成较大尺寸的动画制作后，您可能希望缩小尺寸，以便只使用/绘制所需的空间。这样做的一个好方法就是找到一种方法来设置

边界的动画（与
circleRadius
相反），并基于大小插值执行此动画，但我在实现这一点上遇到了一些困难（也许有人可以在该主题上添加一些见解）

希望这有帮助，
山姆
你是说你想做一个类似的动画，或者你想让一个标准的位置指示器出现在一个地图视图中？我喜欢做一个类似的动画，谢谢。你的答案在帖子[进入链接描述这里] [1 ] [ 1 ]：中间的线条和蓝色圆圈看起来像素化，锯齿状。我能做些什么来修复它，让它变得平滑吗？我想出来了。。customLayer.ContentsCale=[UIScreen mainScreen]。缩放；
// 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];

}