Question

我正在我的应用程序内创建此自定义视图，用户可以通过拖动将其扩展，并具有案例的所有动画。为了清楚起见，我想复制与IOS控制中心几乎相同的动画。到目前为止，我设法获得了几乎所有东西，从手指拖动视图扩展的动画到使拐角变圆的可能性。

现在，事实是，除了可以拖动视图之外，我还想在用户在扩展之间移开手指时实现动画，以使视图恢复到其原始高度或完成该操作。扩张。为此，我使用了用户停止拖动时视图的位置。

当我尝试制作UIView.layer.mask的动画时，问题就开始了。通过互联网上的一些研究，我发现了CABasicAnimation类，并在一个函数中实现了它：

func animateExpandableView(withDuration duration: Double) {

    CATransaction.begin()
    CATransaction.setAnimationDuration(duration)
    CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: .easeInEaseOut))

    let maskAnimation = CABasicAnimation(keyPath: "mask")
    maskAnimation.fromValue = profileView.layer.mask

    let bounds = profileView.frame
    let maskPath = UIBezierPath(roundedRect: bounds, byRoundingCorners: [.bottomLeft, .bottomRight], cornerRadii: CGSize(width: 8.0, height: 8.0))
    let maskLayer = CAShapeLayer()
    maskLayer.frame = bounds
    maskLayer.path = maskPath.cgPath

    maskAnimation.toValue = maskLayer
    maskAnimation.duration = duration

    profileView.layer.mask = maskLayer
    profileView.layer.add(maskAnimation, forKey: "mask")

    CATransaction.commit()


}

此操作不起作用，并且遮罩的更改未设置动画。我在实施中哪里出错了？

有人建议我检查另一个问题的链接；我觉得它不是很有用，因为尽管它不适用于我的情况，但答案是用C编写的，而不是用Swift编写的。

Animating a CALayer's mask size change

Answer 1

我发现了以下解决方法：无法使用计时器重新创建动画，无法对mask属性进行动画处理。基本上，我将animationDuration除以100，并将结果设置为计时器的间隔。然后，我对finalHeight和initalHeight之间的差异进行除以100，然后将其分配给animationStep。完成所有这些设置后，我只需要运行计时器100个周期，就可以在每个周期中将animationStep添加到maskHeight属性中。这是我班上的所有代码：

class ExpandableView: UIView {
    //Timer to animate view's mask
    private var animationTimer: Timer? = nil

    //the height of each step for the mask's animation
    private var animationStep: CGFloat? = nil
    private var currentStep: Double = 0

    //Variable responsable to return and set self.mask height.
    private var maskCornerRadii: CGSize? = nil
    private var maskRoundingCorners: UIRectCorner? = nil

    //Variable responsable to return and set self.mask height. it's nil if there isn't any mask
    private var maskHeight: CGFloat? {
        get {return self.layer.mask?.bounds.height}
        set {
            if newValue != nil && maskRoundingCorners != nil && maskCornerRadii != nil {
                let frame = self.bounds
                let bounds = CGRect(x: frame.origin.x, y: frame.origin.y, width: frame.width, height: newValue!)
                let maskPath = UIBezierPath(roundedRect: bounds, byRoundingCorners: maskRoundingCorners!, cornerRadii: maskCornerRadii!)
                let maskLayer = CAShapeLayer()
                maskLayer.frame = bounds
                maskLayer.path = maskPath.cgPath

                self.layer.mask = maskLayer
            }
        }
    }


    //Animation function
    func animateMask(from initialHeight: CGFloat, to finalHeight: CGFloat, withDuration duration: Double) {
        let timerInterval = duration * 0.01
        animationStep = (finalHeight - initialHeight) * 0.01
        animationTimer = Timer.scheduledTimer(withTimeInterval: timerInterval, repeats: true, block: { (timer) in

            if self.currentStep <= 100 {
                guard self.animationStep != nil else {
                    fatalError("animationStep is nil")
                }

                guard self.maskHeight != nil else {
                    fatalError("Mask is nil")
                }

                self.maskHeight! += self.animationStep!
                self.currentStep += 1

            } else {
                self.animationTimer!.invalidate()
                self.currentStep = 0
            }
        })
    }
}

为layer.mask设置动画的方式

1 个答案: