围绕Google地图标记iOS的脉冲环动画 [英] Pulse ring animation around a Google Maps marker iOS
本文介绍了围绕Google地图标记iOS的脉冲环动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想添加一个脉冲环动画作为iOS谷歌地图中的当前用户位置（如Uber）。我尝试通过 addAnimation 向标记图层添加 CABasicAnimation 。它不工作。
另外，我尝试使标记的比例变大，但比例变化没有发生。任何人都可以帮助我解决这个问题吗？
解决方案
不知何故，它现在正在工作。我创建了一个自定义视图，并将该视图设置为 GMSMarker iconView 。
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];
//定制标记图像
UIImageView * pulseRingImg = [[UIImageView alloc] initWithFrame：CGRectMake（-30，-30，78，78）];
pulseRingImg.image = [UIImage imageNamed：@Pulse];
pulseRingImg.userInteractionEnabled = NO;
//变换比例尺动画
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动画图像
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];
//定制标记图像
UIImageView * pulseRingImg = [[UIImageView alloc] initWithFrame：CGRectMake（-30，-30，78，78）];
pulseRingImg.image = [UIImage imageNamed：@Pulse];
pulseRingImg.userInteractionEnabled = NO;
[CATransaction开始];
[CATransaction setAnimationDuration：3.5];
//变换比例尺动画
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动画图像
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）;
Swift 3.0 代码低于
注意： 根据您的要求更改持续时间
let m = GMSMarker（position： camera.target）
//定制标记图像
let pulseRingImg = UIImageView（frame：CGRect（x：-30，y：-30，width：78，height：78））
pulseRingImg.image = UIImage（命名为：Pulse）
pulseRingImg.isUserInteractionEnabled = false
CATransaction.begin（）
CATransaction.setAnimationDuration（3.5）
//变换比例尺动画
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（{（） - >无效
// alpha动画图像
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（动画，forKey：opacity）
}）
CATransac tion.commit（）
m.iconView = pulseRingImg
m.layer.addSublayer（pulseRingImg.layer）
m.map = gmapView
m.groundAnchor = CGPoint（x：0.5 ，y：0.5）
脉冲图片：
I want to add a pulse ring animation around a marker as a current user location in iOS google maps (like Uber). I tried with adding CABasicAnimation to marker layer by addAnimation. It is not working.
Also I tried animate the scale of the marker but the scale change did not happen. Can anybody help me with this thing?
解决方案
somehow it is working now. I created a custom view and set that view into GMSMarker iconView. After that added animation into view layer.
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"];
Another method:
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);
Another one:
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);
Swift 3.0 code is below NOTE: Change the duration based on your requirement
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)
pulse Image:
这篇关于围绕Google地图标记iOS的脉冲环动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
