我想添加一个标记周围的脉冲环动画作为iOS谷歌地图中的当前用户位置(如Uber)。我试图通过addAnimation
向标记层添加CABasicAnimation
。它不工作。围绕Google地图标记的脉冲环动画iOS
另外我尝试动画标记的比例,但规模变化没有发生。有人能帮助我解决这个问题吗?
我想添加一个标记周围的脉冲环动画作为iOS谷歌地图中的当前用户位置(如Uber)。我试图通过addAnimation
向标记层添加CABasicAnimation
。它不工作。围绕Google地图标记的脉冲环动画iOS
另外我尝试动画标记的比例,但规模变化没有发生。有人能帮助我解决这个问题吗?
不知何故它现在工作。我创建了一个自定义视图并将该视图设置为GMSMarkericonView。之后,添加到视图层的动画。
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(200, 200, 100, 100)];
view.backgroundColor = [UIColor redColor];
view.layer.cornerRadius = 50;
GMSMarker *m = [GMSMarker markerWithPosition:mapView_.myLocation.coordinate];
m.iconView = view;
m.map = mapView_;
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.duration = 1.5;
scaleAnimation.repeatCount = HUGE_VAL;
scaleAnimation.autoreverses = YES;
scaleAnimation.fromValue = [NSNumber numberWithFloat:0.1];
scaleAnimation.toValue = [NSNumber numberWithFloat:1.2];
[view.layer addAnimation:scaleAnimation forKey:@"scale"];
的另一种方法:
GMSMarker *m = [GMSMarker markerWithPosition:mapView_.myLocation.coordinate];
//custom marker image
UIImageView *pulseRingImg = [[UIImageView alloc] initWithFrame: CGRectMake(-30, -30, 78, 78)];
pulseRingImg.image = [UIImage imageNamed:@"Pulse"];
pulseRingImg.userInteractionEnabled = NO;
//transform scale animation
CABasicAnimation *theAnimation;
theAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.xy"];
theAnimation.duration = 3.5;
theAnimation.repeatCount = HUGE_VALF;
theAnimation.autoreverses = NO;
theAnimation.fromValue = [NSNumber numberWithFloat:0.0];
theAnimation.toValue = [NSNumber numberWithFloat:2.0];
//alpha Animation for the image
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
animation.duration = 3.5;
animation.repeatCount = HUGE_VALF;
animation.values = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:1.0],
[NSNumber numberWithFloat:0.5],
[NSNumber numberWithFloat:0.0], nil];
animation.keyTimes = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:1.2],
[NSNumber numberWithFloat:3.5], nil];
[pulseRingImg.layer addAnimation:animation forKey:@"opacity"];
[pulseRingImg.layer addAnimation:theAnimation forKey:@"pulse"];
pulseRingImg.userInteractionEnabled = NO;
m.iconView = pulseRingImg;
[m.layer addSublayer:pulseRingImg.layer];
m.map = mapView_;
m.groundAnchor = CGPointMake(0.5, 0.5);
另一种:
m = [GMSMarker markerWithPosition:mapView_.myLocation.coordinate];
//custom marker image
UIImageView *pulseRingImg = [[UIImageView alloc] initWithFrame: CGRectMake(-30, -30, 78, 78)];
pulseRingImg.image = [UIImage imageNamed:@"Pulse"];
pulseRingImg.userInteractionEnabled = NO;
[CATransaction begin];
[CATransaction setAnimationDuration:3.5];
//transform scale animation
CABasicAnimation *theAnimation;
theAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.xy"];
theAnimation.repeatCount = HUGE_VALF;
theAnimation.autoreverses = NO;
theAnimation.fromValue = [NSNumber numberWithFloat:0.0];
theAnimation.toValue = [NSNumber numberWithFloat:2.0];
[pulseRingImg.layer addAnimation:theAnimation forKey:@"pulse"];
pulseRingImg.userInteractionEnabled = NO;
[CATransaction setCompletionBlock:^{
//alpha Animation for the image
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
animation.duration = 3.8;
animation.repeatCount = HUGE_VALF;
animation.values = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:1.0],
[NSNumber numberWithFloat:0.0], nil];
[m.iconView.layer addAnimation:animation forKey:@"opacity"];
}];
[CATransaction commit];
m.iconView = pulseRingImg;
[m.layer addSublayer:pulseRingImg.layer];
m.map = mapView_;
m.groundAnchor = CGPointMake(0.5, 0.5);
夫特3.0代码如下 注:根据您的需要更改时间
let m = GMSMarker(position: camera.target)
//custom marker image
let pulseRingImg = UIImageView(frame: CGRect(x: -30, y: -30, width: 78, height: 78))
pulseRingImg.image = UIImage(named: "Pulse")
pulseRingImg.isUserInteractionEnabled = false
CATransaction.begin()
CATransaction.setAnimationDuration(3.5)
//transform scale animation
var theAnimation: CABasicAnimation?
theAnimation = CABasicAnimation(keyPath: "transform.scale.xy")
theAnimation?.repeatCount = Float.infinity
theAnimation?.autoreverses = false
theAnimation?.fromValue = Float(0.0)
theAnimation?.toValue = Float(2.0)
theAnimation?.isRemovedOnCompletion = false
pulseRingImg.layer.add(theAnimation!, forKey: "pulse")
pulseRingImg.isUserInteractionEnabled = false
CATransaction.setCompletionBlock({() -> Void in
//alpha Animation for the image
let animation = CAKeyframeAnimation(keyPath: "opacity")
animation.duration = 3.5
animation.repeatCount = Float.infinity
animation.values = [Float(2.0), Float(0.0)]
m.iconView?.layer.add(animation, forKey: "opacity")
})
CATransaction.commit()
m.iconView = pulseRingImg
m.layer.addSublayer(pulseRingImg.layer)
m.map = gmapView
m.groundAnchor = CGPoint(x: 0.5, y: 0.5)
我很高兴你找到了解决方案。为了让你的代码更加模块化,你可以考虑让你的脉冲视图成为GMSMarker的一个自定义子类。这将使它变得更加可重用。 (一旦系统允许你这样做,你应该接受你的答案。) –
@Duncan C,谢谢!是的,我必须以可重复使用的方式实施。如果你可以用示例代码来帮助我,那么大部分都是值得欢迎的。 –
你能把代码转换成swift 3吗? –
发表有关它的行为信息沿着你当前的代码。 “它不工作”是不是很丰富。 –
@DuncanC我更新了现在的答案。 谢谢! –