在iOS中为UIImageView的圆形蒙版设置动画

Question

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

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

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

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

感谢您的指导，

-e

Answer 1

马特有正确的想法。

您要做的是使用Core Animation和CAShapeLayer。图层具有可选的蒙版属性，该属性控制图层中可见的部分。您可以添加CAShapeLayer作为另一个图层的蒙版。

如果您在形状图层上安装了一个圆圈的CGPath，那么使用CABasicAnimation在不同的圆圈中制作动画，Core Animation会为更改设置动画。

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

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

在该项目中，面具动画会创建一个＆＃34;时钟擦除＆＃34;过渡：

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

我有一个Youtube视频，显示我创建的不同过渡。 ＆＃34; Iris Circle＆＃34;在视频中大约55秒的过渡非常接近您之后的情况：

Transitions video

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")
}

Answer 3

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