在圆形路径中为 GMSMarker 设置动画答案

【问题标题】：Animating GMSMarker in a circular path在圆形路径中为 GMSMarker 设置动画
【发布时间】：2013-10-11 18:57:15
【问题描述】：

我了解如何根据这个 SO 问题在循环路径中正常动画其他 CALayers： iPhone - How to make a circle path for a CAKeyframeAnimation?

但是，GMSMarkerLayer 是 CALayers 的一个特殊子类，它似乎不响应“位置”键路径（按照该链接中的说明，我无法看到任何内容），而是响应“纬度”和“经度”键路径。

这是我尝试过的代码：

CAKeyframeAnimation *circlePathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
CGMutablePathRef circularPath = CGPathCreateMutable();
CGRect pathRect = CGRectMake(marker.position.latitude, marker.position.longitude, 0.001, 0.001);
CGPathAddEllipseInRect(circularPath, NULL, pathRect);
circlePathAnimation.path = circularPath;
circlePathAnimation.duration = 1.0f;
circlePathAnimation.repeatCount = HUGE_VALF;

[marker.layer addAnimation:circlePathAnimation forKey:[NSString stringWithFormat:@"circular-%@", marker.description]];
CGPathRelease(circularPath);

由于关键帧动画将使用“位置”关键路径，我如何将其转换为 2 个单独的关键路径（纬度和经度），以便我可以在地图上以圆圈为标记设置动画？

非常感谢任何帮助。

【问题讨论】：

问题，您对地球上的圆圈或屏幕上的圆圈感兴趣吗？如果您对在地球上制作类似测地线的动画感兴趣，那么手动插入一系列短线段是您前进的道路。如果您有兴趣在屏幕上为圆圈制作动画，请在code.google.com/p/gmaps-api-issues/issues/…@s 上提出为 offsets 制作动画的功能请求
嗨@Brett 谢谢你的问题。我想在地球表面的圆形路径中为标记设置动画。有趣的是，GMSMarkerLayer 不允许我使用“位置”键路径并将其直接转换为“纬度”和“经度”，因为这会立即解决我的问题。插入一系列短线段会起作用，但需要我使用它们各自的关键路径分别为 lat 和 lon 设置动画，您是否知道是否有更有效的方法来解决这个问题？
请随时通过code.google.com/p/gmaps-api-issues/issues/…提出功能请求

标签： core-animation google-maps-sdk-ios

【解决方案1】：

由于目前我无法使用“位置”键路径进行动画制作，因此我最终分别使用“纬度”和“经度”键路径对其进行动画处理。

首先计算点并将它们添加到 2 个单独的数组中，一个用于纬度值 (y)，一个用于经度 (x)，然后使用 CAKeyFrameAnimation 中的 values 属性进行动画处理。创建 2 个 CAKeyFrameAnimation 对象（每个轴 1 个）并使用 CAAnimationGroup 将它们组合在一起，并将它们动画在一起形成一个圆圈。

在我的方程式中，我改变了每个轴上的半径长度，这样我也可以生成椭圆路径。

    NSMutableArray *latitudes = [NSMutableArray arrayWithCapacity:21];
    NSMutableArray *longitudes = [NSMutableArray arrayWithCapacity:21];
    for (int i = 0; i <= 20; i++) {
        CGFloat radians = (float)i * ((2.0f * M_PI) / 20.0f);

        // Calculate the x,y coordinate using the angle
        CGFloat x = hDist * cosf(radians);
        CGFloat y = vDist * sinf(radians);

        // Calculate the real lat and lon using the
        // current lat and lon as center points.
        y = marker.position.latitude + y;
        x = marker.position.longitude + x;


        [longitudes addObject:[NSNumber numberWithFloat:x]];
        [latitudes addObject:[NSNumber numberWithFloat:y]];
    }

    CAKeyframeAnimation *horizontalAnimation = [CAKeyframeAnimation animationWithKeyPath:@"longitude"];
    horizontalAnimation.values = longitudes;
    horizontalAnimation.duration = duration;

    CAKeyframeAnimation *verticleAnimation = [CAKeyframeAnimation animationWithKeyPath:@"latitude"];
    verticleAnimation.values = latitudes;
    verticleAnimation.duration = duration;

    CAAnimationGroup *group = [[CAAnimationGroup alloc] init];
    group.animations = @[horizontalAnimation, verticleAnimation];
    group.duration = duration;
    group.repeatCount = HUGE_VALF;
    [marker.layer addAnimation:group forKey:[NSString stringWithFormat:@"circular-%@",marker.description]];

【讨论】：