iOS中UIImageView的动画圆形遮罩答案

【问题标题】：Animate circular mask of UIImageView in iOSiOS中UIImageView的动画圆形遮罩
【发布时间】：2014-07-20 20:47:44
【问题描述】：

我想知道如何为 uiimageview 上的蒙版比例设置动画。附上示例图片。灰色框是我的 uiviewcontroller 的图像背景，不是问题的一部分。

我假设创建了一个传递图像、半径和中心点的 uiview 子类。然后（？）创建一个蒙版，然后来回设置动画？

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

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

谢谢你的指导，

-e

【问题讨论】：

标签： ios objective-c uiimageview mask

【解决方案1】：

马特的想法是正确的。

您想要做的是使用核心动画和 CAShapeLayer。图层有一个可选的蒙版属性，它控制图层的可见部分。您可以添加一个 CAShapeLayer 作为另一个图层的蒙版。

如果您在形状图层上安装了一个圆形的 CGPath，然后使用 CABasicAnimation 在更大的圆形的不同路径中设置动画，Core Animation 将为更改设置动画。

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

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

在该项目中，蒙版动画创建了“时钟擦除”过渡：

...但是您应该能够使用基本结构来获得您想要的效果。如果您无法获得想要的效果，请查看并告诉我。

我有一个 Youtube 视频，展示了我创建的不同过渡。视频大约 55 秒处的“虹膜圈”过渡非常接近您所追求的：

Transitions video

【讨论】：

这个例子帮助了我——非常感谢。在测试时，我创建了第二个形状图层并使用它在小圆圈和大圆圈之间进行切换。这可以吗 - 还是我应该定义。使用路径？
视情况而定。如果您希望圆扩大或缩小，您可能需要更改路径（从完整圆弧到具有不同半径的动画应该可以正常工作。

【解决方案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")
}

【讨论】：

【解决方案3】：

一种可能是使用 CAShapeLayer 绘制蒙版。原因是 CAShapeLayer 的路径是可动画的。

【讨论】：