CALayer圈子面具动画不正确的行为+ Swift

时间:2016-11-25 02:25:35

标签: ios swift animation calayer

我一直在尝试做这个动画几天。我试图动画我的面具的大小,基本上采取一个大圆圈(面具)并缩小它。

@IBOutlet weak var myView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        animateMask()
    }

    func presentMaskScreenWithAnimation () {

        //Setup Mask Layer
        let bounds = myView.bounds
        let maskLayer = CAShapeLayer()
        maskLayer.frame = bounds
        maskLayer.fillColor = UIColor.brown.cgColor

        //CropCircle Out of mask Layer
        let initialCircle = CGRect(x: 10, y: 10, width: 300, height: 300)
        let path = UIBezierPath(roundedRect: initialCircle, cornerRadius: initialCircle.size.width/2)

        path.append(UIBezierPath(rect: bounds))
        maskLayer.path = path.cgPath
        maskLayer.fillRule = kCAFillRuleEvenOdd

        myView.layer.mask = maskLayer

        //Define new circle path
        let circlePath2 = CGRect(x: 50, y: 50, width: 100, height: 100)
        let path2 = UIBezierPath(roundedRect: circlePath2, cornerRadius: circlePath2.size.width/2)


        //Create animation
        let anim = CABasicAnimation(keyPath: "path")



            anim.fromValue = path.cgPath
            anim.toValue = path2.cgPath
            anim.duration = 3.0
            anim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)

            maskLayer.add(anim, forKey: nil)
    }

此代码设置蒙版并开始为其设置动画,但是它会反转整个maskLayer,我试图只是为圆的路径设置动画,大 - >小

开始 enter image description here

完成 enter image description here

1 个答案:

答案 0 :(得分:2)

path2.append(UIBezierPath(rect: bounds))之后添加let path2 = UIBezierPath(roundedRect: circlePath2, cornerRadius: circlePath2.size.width/2)。如果你想在动画之后保留缩小的蒙版,也不要忘记在最后做maskLayer.path = path2.cgPath