ios - IOS 动画脉冲圆圈，如地图上的蓝色球

Question

我想知道如何在地图中使用当前位置的脉动环来实现蓝色球，但没有地图视图。

基本上，我想知道当用户触摸屏幕时，在普通 UIView（或我的自定义视图）上拥有一个带有脉动环的蓝色球的最佳方式，该触摸是蓝色球的中心。

我有两个想法，首先我可以实现一个动画，我无法做到，但这可能是可能的。其次，我可以获得一系列图像，例如 gif，并在用户触摸的任何地方显示它。

哪一个是最好的选择？还是有更好的选择？

谢谢你。

Answer 1

试试这个：

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(200, 200, 100, 100)];
view.backgroundColor = [UIColor blueColor];
view.layer.cornerRadius = 50;

[self.view addSubview:view];

CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.duration = 0.2;
scaleAnimation.repeatCount = HUGE_VAL;
scaleAnimation.autoreverses = YES;
scaleAnimation.fromValue = [NSNumber numberWithFloat:1.2];
scaleAnimation.toValue = [NSNumber numberWithFloat:0.8];

[view.layer addAnimation:scaleAnimation forKey:@"scale"];

随意设置参数，修改效果。

编辑：

您必须添加QuartzCore框架，并包含<QuartzCore/QuartzCore.h>它才能工作。

Answer 2

为 SWIFT 试试这个

let view:UIView = UIView(frame: CGRectMake(200, 200, 100, 100))
view.layer.cornerRadius = 50
view.backgroundColor = UIColor.blueColor()

self.view.addSubview(view)

let scaleAnimation:CABasicAnimation = CABasicAnimation(keyPath: "transform.scale")

scaleAnimation.duration = 0.5
scaleAnimation.repeatCount = 30.0
scaleAnimation.autoreverses = true
scaleAnimation.fromValue = 1.2;
scaleAnimation.toValue = 0.8;

view.layer.addAnimation(scaleAnimation, forKey: "scale")

Answer 3

以编程方式而不是使用图像序列来制作动画是更好的方法（Apple 也是这样做的）。它有许多优点，尤其是性能要好得多（您的图像序列动画不太可能以 60FPS 运行！）。

您可以通过多种方式实现此动画：最简单的可能是在图像编辑器中创建您的环形图形，然后创建一个UIImageView来保存它。然后，您可以简单地为视图的比例、alpha 和框架属性设置动画（确保您的图像视图设置为按比例调整图像大小）。为了确保您的脉动动画无限重复，您可以设置 UIView 动画重复属性。您的中央“蓝球”可以单独UIImageView覆盖在顶部。

UIView动画相当简单，Apple 有很多示例代码可以帮助您进行。您只需将要在动画块中设置动画的属性以及动画参数（持续时间、重复次数等）包含在其中，其余的工作将由 iOS 完成。在 StackOverflow 上搜索“UIView 动画”会给你很多可能有帮助的问题。

Answer 4

这是 Swift 5.3+ 版本。

斯威夫特 5.5

let view = UIView(frame: CGRect(x:200, y:200, width:100, height:100))
view.layer.cornerRadius = 50
view.backgroundColor = .blue
self.view.addSubview(view)

let scaleAnimation = CABasicAnimation(keyPath: "transform.scale")
scaleAnimation.duration = 1.33
scaleAnimation.repeatCount = Float.infinity
scaleAnimation.autoreverses = true
scaleAnimation.fromValue = 1.5;
scaleAnimation.toValue = 0.75;
view.layer.add(scaleAnimation, forKey: "scale")

最好的。