动画化fractionComplete of UIViewPropertyAnimator以模糊背景

Question

因此，我使用新的UIViewPropertyAnimator和UIVisualEffectView来实现与聚光灯搜索相同的功能，当你在主屏幕上滚动时，它会模糊背景。

我使用fractionComplete属性来设置当摇摄UIView时要模糊多少内容的过程。

    animator = UIViewPropertyAnimator(duration: 1, curve: .linear) {
        self.blurEffectView.effect = nil
    }

模糊度的变化范围为0.0 ~ 1.0。

        animator?.fractionComplete = blurValue

但是，当我取消pan手势时，我希望模糊状态从原来的位置恢复到无模糊状态(例如，-> 1.0)，持续时间大约为0.4毫秒。

现在，当pan手势被取消时，我只是将fractionComplete设置为1.0。相反，我想把它动画化。

我试过UIView.animate(withDuration..。但它不会影响UIViewPropertyAnimators fractionComplete，这是模糊UIVisualEffectView的唯一方法。

有什么想法吗？

Answer 1

fractionComplete似乎有一个bug (我在Stackoverflow上的问题：UIViewPropertyAnimator不会在预期的情况下更新视图)，雷达://30856746。该属性只将状态从inactive设置为active，但不更新视图，因为(我假设)还有另一个不触发的内部状态。

要解决这个问题，您可以这样做：

animator.startAnimation() // This will change the `state` from inactive to active
animator.pauseAnimation() // This will change `isRunning` back to false, but the `state` will remain as active

// Now any call of `fractionComplete` should update your view correctly!
animator.fractionComplete = /* your value here */

这里有一个游乐场片段可供游玩：

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

PlaygroundPage.current.needsIndefiniteExecution = true
PlaygroundPage.current.liveView = liveView

let square = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
square.backgroundColor = .red

liveView.addSubview(square)

let animator = UIViewPropertyAnimator.init(duration: 5, curve: .linear)

animator.addAnimations {

    square.frame.origin.x = 350
}

let blurView = UIVisualEffectView(effect: UIBlurEffect(style: .dark))
blurView.frame = liveView.bounds

liveView.addSubview(blurView)

animator.addAnimations {

    blurView.effect = nil
}

// If you want to restore the blur after it was animated, you have to 
// safe a reference to the effect which is manipulated
let effect = blurView.effect

animator.addCompletion {
    // In case you want to restore the blur effect
    if $0 == .start { blurView.effect = effect }
}

animator.startAnimation()
animator.pauseAnimation()

DispatchQueue.main.asyncAfter(deadline: .now() + 2) {

    animator.fractionComplete = 0.5
}

DispatchQueue.main.asyncAfter(deadline: .now() + 4) {

    // decide the direction you want your animation to go.
    // animator.isReversed = true
    animator.startAnimation()
}

Answer 2

如果您仍然在寻找一种不使用滑块或手势来实际实现fractionComplete动画的方法，我对使用CADisplayLink的结果非常满意。您可以在这里看到我的结果：https://gist.github.com/vegather/07993d15c83ffcd5182c8c27f1aa600b

Answer 3

我使用延迟循环来减少"fractionComplete“

func resetAnimator(){
        
        let duration = 1.0 / 60.0
        
        if self.animator.fractionComplete > 0 {
            self.animator.fractionComplete -= 0.06
            delay(duration, closure: {
                self.resetAnimator()
            })
        }
    }

func delay(_ delay:Double, closure:@escaping ()->()) {
        DispatchQueue.main.asyncAfter(
            deadline: DispatchTime.now() + Double(Int64(delay * Double(NSEC_PER_SEC))) / Double(NSEC_PER_SEC), execute: closure)
    }