对UIViewPropertyAnimator的fractionComplete进行动画处理，以使背景模糊 [英] Animate the fractionComplete of UIViewPropertyAnimator for blurring the background

问题描述

因此，当您在主屏幕上向下滚动时，我将使用新的UIViewPropertyAnimator和UIVisualEffectView来实现与Spotlight搜索相同的功能，并且背景会变得模糊.

So I'm using the new UIViewPropertyAnimator and UIVisualEffectView to achieve the same thing as the Spotlight search when you scrolling down on the home screen and it blurs the background.

我正在使用fractionComplete属性设置在平移UIView时要模糊多少的百分比.

I'm using the fractionComplete property to set the procent of how much to blur when panning a UIView.

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

然后将模糊量更改为0.0-1.0之间的值.

And the amount of blurriness is changed with a value between 0.0 - 1.0.

        animator?.fractionComplete = blurValue

但是当我取消平移手势时，我希望模糊从动画的位置恢复为无模糊(例如〜-> 1.0)，持续时间约为0.4毫秒.

But when I cancel the pan gesture I want the blur to animate back from where it is to no blur (e.g ~ -> 1.0) with a duration of something like 0.4 milliseconds.

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

Right now I just set the fractionComplete to 1.0 when the pan gesture is cancelled. Instead I want to animate it.
I have tried the UIView.animate(withDuration.. but it doesn't affect the UIViewPropertyAnimators fractionComplete, and thats the only way to blur an UIVisualEffectView.

有什么想法吗?

推荐答案

fractionComplete似乎有一个错误(我对Stackoverflow的问题: rdar://30856746 .该属性仅将状态从inactive设置为active，但不会更新视图，因为(我认为)存在另一个不会触发的内部状态.

It seems that fractionComplete has a bug (my question on Stackoverflow: UIViewPropertyAnimator does not update the view when expected), rdar://30856746. The property only sets the state from inactive to active, but does not update the view, because (I assume) there is another internal state that does not trigger.

要解决此问题，您可以执行以下操作:

To workaround the problem you can do this:

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 */

这是一个游乐场玩耍的片段:

Here is a playground snippet to play around:

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

这篇关于对UIViewPropertyAnimator的fractionComplete进行动画处理，以使背景模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！