如何为UIView的面具制作动画?

时间:2017-03-13 15:40:39

标签: ios swift animation uiview blur

我几天来一直在游乐场探索这些问题而没有找到任何解决方案。

我一直在设法在模糊的UIView中创建一个洞。现在我想知道如何为这个圆圈的半径设置动画,让动画模糊的视图的面具动画化。

到目前为止,这是我的代码:

import Foundation
import UIKit
import PlaygroundSupport

let contentRect = CGRect(x: 0, y: 0, width: 400, height: 400)
let contentView = UIView(frame: contentRect)
contentView.backgroundColor = .white

PlaygroundPage.current.liveView = contentView

let image = UIImage(named: "landscape.jpg")
let imageView = UIImageView(frame: contentRect, image: image)
imageView.contentMode = .scaleAspectFill

let blur = UIBlurEffect(style: .light)
let blurView = UIVisualEffectView(effect: blur)
blurView.frame = contentRect

let path = UIBezierPath(rect: contentRect)
let circle = UIBezierPath(ovalIn: CGRect(x: 50, y: 50, width: 300, height: 300))
path.append(circle)
path.usesEvenOddFillRule = true

let toPath = UIBezierPath(rect: contentRect)
let toCircle = UIBezierPath(ovalIn: CGRect(x: 150, y: 150, width: 100, height: 100))
toPath.append(toCircle)
toPath.usesEvenOddFillRule = true

let hole = CAShapeLayer()
hole.path = path.cgPath
hole.fillColor = UIColor.green.cgColor
hole.fillRule = kCAFillRuleEvenOdd

let mask = UIView(frame: contentRect)

contentView.addSubview(imageView)

contentView.addSubview(blurView)

mask.layer.addSublayer(hole)

blurView.mask = mask

我一直在尝试这个,没有成功:

let animation = CABasicAnimation(keyPath: "path")
animation.fromValue = hole.path
animation.toValue = toPath.cgPath
animation.duration = 2
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
hole.add(animation, forKey: nil)

CATransaction.begin()
CATransaction.disableActions()
hole.path = toPath.cgPath
CATransaction.commit()

还尝试UIView.animate(...或解压缩blurView.layer.sublayers将其添加到我的contentView,但它只会变得混乱。

另一种方法是使用我尝试的CGAffineTransform,但模糊被破坏。另外,当我感觉如此接近解决方案时,我无法使用解决方法。

任何帮助将不胜感激!谢谢!

0 个答案:

没有答案