在圆形路径中对GMSMarker进行动画处理 [英] Animating GMSMarker in a circular path

问题描述

我了解如何根据此SO问题在循环路径中正常制作其他CALayers动画：
iPhone-如何为CAKeyframeAnimation制作圆周路径？

I understand how to normally animation other CALayers in a circular path based on this SO question: iPhone - How to make a circle path for a CAKeyframeAnimation?

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

However, the GMSMarkerLayer is a special subclass of CALayers that does not seem to respond to the "position" keypath (following instructions in that link does nothing that I can visibly see) but instead will respond to the "latitude" and "longitude" keypaths instead.

这是我尝试过的代码：

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个单独的关键路径（经度和纬度），这样我就可以在地图上的圆圈中为标记设置动画吗？

Since the keyframe animation will use the "position" keypath, how can I convert that into 2 separate keypaths (latitude and longitude) so I can animate the marker in a circle on the map?

任何帮助都将不胜感激。

Any help is greatly appreciated.

推荐答案

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

As currently I cannot use the "position" keypath for animating, I ended up animating it using the "latitude" and "longitude" keypaths separately.

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

First calculate the points and add them to 2 separate arrays, one for latitude value (y) and one for longitude (x) and then use the values property in CAKeyFrameAnimation to animate. Create 2 CAKeyFrameAnimation objects (1 for each axis) and group them together using CAAnimationGroup and animate them together to form a circle.

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

In my equation I vary the length of the radius on each axis so that I can also generate an oval path.

    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]];

这篇关于在圆形路径中对GMSMarker进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！