为 UIViewPropertyAnimator 的fractionComplete 设置动画，用于模糊背景答案

【问题标题】：Animate the fractionComplete of UIViewPropertyAnimator for blurring the background为 UIViewPropertyAnimator 的fractionComplete 设置动画，用于模糊背景
【发布时间】：2017-05-02 13:37:45
【问题描述】：

所以我使用新的 UIViewPropertyAnimator 和 UIVisualEffectView 来实现与在主屏幕上向下滚动并且背景模糊时的 Spotlight 搜索相同的功能。

我正在使用 fractionComplete 属性来设置平移 UIView 时模糊程度的百分比。

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

并且模糊量随 0.0 - 1.0 之间的值变化。

        animator?.fractionComplete = blurValue

但是当我取消平移手势时，我希望模糊从原来的位置动画回到没有模糊的位置（例如 ~ -> 1.0），持续时间大约为 0.4 毫秒。

现在我只是在取消平移手势时将 fractionComplete 设置为 1.0。相反，我想为它制作动画。
我已经尝试过 UIView.animate(withDuration.. 但它不会影响 UIViewPropertyAnimators fractionComplete，这是模糊 UIVisualEffectView 的唯一方法。

有什么想法吗？

【问题讨论】：

我也遇到过同样的错误，此时我认为这可能是与清除效果相关的 Apple 错误，而不是可以在 0 和 1 之间转换的值。请确保向 Apple 提交雷达。
只是为了确认，当您开始平移时，动画开始模糊背景。当您停止平移时，您希望它恢复到原始状态吗？

标签： swift blur uivisualeffectview uiviewpropertyanimator

【解决方案1】：

fractionComplete 似乎有一个错误（我在 Stackoverflow 上的问题：UIViewPropertyAnimator does not update the view when expected），rdar://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 */

这是一个可以玩的游乐场 sn-p：

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

【讨论】：

像魅力一样工作！希望在不久的将来会有一个修复。
谢谢！欺骗了这个错误。当你不跳startAnimation()-pauseAnimation() 舞蹈时，似乎还有更多问题，例如呼叫continueAnimation() 没有一点延迟。
@Klaas 现在我什至不确定这是一个真正的错误还是有意的。在 WWDC17 中，Apple 工程师总是使用pauseAnimation()，甚至没有调用startAnimation()，这似乎也能解决问题。 :/ 也可能是他们也在解决这个错误。 :D
@DevAndArtist 我创建了一个小示例项目来说明我遇到的问题：github.com/klaas/RadarSample_UIViewPropertyAnimatorBug（这是一个 Xcode 模板，仅更改了 ViewController.swift）。
@Klaas 我在原始帖子中做了与flag_useWorkaround2 相同的观察，但改用fractionComplete：stackoverflow.com/questions/42607833/…

【解决方案2】：

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

【讨论】：

【解决方案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)
    }

【讨论】：