iOS中UIImageView的圆形遮罩动画

Question

我想知道如何在uiimageview上动画缩放遮罩。所附示例图片中，灰色框是我的uiviewcontroller的图像背景，不是问题的一部分。

我假设创建一个uiview子类，将其中传递一个图像、半径和中心点。然后 (?) 创建一个遮罩，再对其前后进行动画处理？

有谁能指点我正确的方向吗？圆圈可以放置在任何位置、任何大小，但要显示的图像始终为全屏。

最终我会添加一个方法来缩小圆圈。但是一步一步来。

感谢您给我提供的指导信息，

-e

- malaki1974

Answer 1

Matt有正确的想法。

您需要使用核心动画和CAShapeLayer。图层具有可选的遮罩属性，控制图层的可见部分。您可以将CAShapeLayer添加为另一图层的遮罩。

如果在形状层上安装一个圆形的CGPath，然后使用CABasicAnimation来动画显示不同的路径，即更大的圆形，核心动画将会执行该变化。

动画形状层中路径的关键是使起始路径和结束路径具有相同数量的控制点。在您的情况下，您应该能够使用CGPathAddEllipseInRect创建起始和结束椭圆形，具有不同的边界矩形。

我在github上有一个项目，其中包括使用路径动画来动画显示图像视图层上的蒙版。该项目称为“iOS CAAnimation group demo”，您可以在此链接https://github.com/DuncanMC/iOS-CAAnimation-group-demo下载它。该项目的主要部分是使用核心动画动画组来应用一系列动画，但它还包括蒙版动画。

在该项目中，掩码动画创建了一个“时钟擦拭”过渡效果：

...但您应该能够使用基本结构来获得所需的效果。查看一下，如果您在获得所需的效果方面遇到困难，请告诉我。

我有一个Youtube视频展示了我创建的不同转换效果。视频中大约在55秒处的"Iris Circle"转换非常接近您想要的效果：

转换视频

- Duncan C

---

这个例子帮了我很多 - 非常感谢。在测试时，我创建了第二个形状图层，并使用它来在小圆和大圆之间进行切换。这样可以吗 - 还是应该一定要使用路径？ - malaki1974

取决于情况。如果你想让圆形变大或缩小，你可能需要改变路径（从完整的圆弧动画到具有不同半径的圆弧应该可以正常工作）。 - Duncan C

Answer 2

这对我来说是在地图视图上实现圆形遮罩动画的方法，你应该可以将地图视图替换为图像视图。遮罩是一个椭圆形，围绕边界并在原始尺寸和重复缩小5个点之间动画：

func setupMapMask() {
    let largeCirclePath = UIBezierPath(ovalInRect: mapView.bounds).CGPath

    let mask = CAShapeLayer()
    mask.path = largeCirclePath
    mask.backgroundColor = UIColor.blackColor().CGColor

    mapView.layer.mask = mask

    let smallCirclePath = UIBezierPath(ovalInRect: CGRectInset(mapView.bounds, 5.0, 5.0)).CGPath

    let anim = CABasicAnimation(keyPath: "path")
    anim.toValue = smallCirclePath
    anim.duration = 0.5
    anim.repeatCount = Float.infinity
    anim.autoreverses = true
    mask.addAnimation(anim, forKey: "path")
}

- marchinram

Answer 3

一种可能的方法是使用CAShapeLayer绘制遮罩。原因是CAShapeLayer的路径是可动画的。

- matt