動畫UIViewPropertyAnimator的fractionComplete模糊背景

Question

因此，當您在主屏幕上向下滾動並且模糊背景時，我使用新的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的唯一途徑。

任何想法？

Answer 1

看來fractionComplete有錯誤（我的＃2問題：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 */ 

這裏是一個操場片斷打轉轉：

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