UIVisualEffectView transition

[felix-dumit]

I added a UIVisualEffectView to the MusicPlayer example to simulate this issue.
It breaks during the transition and also after the transition is complete it's still not the way it should be.

Hero off

Hero on

Console outputs this warning:

[Warning] <UIVisualEffectView 0x7fa50e80b830> is being asked to animate its opacity. This will cause the effect to appear broken until opacity returns to 1.

Code used is available here: https://github.com/felix-dumit/Hero/tree/visual-effect-snapshot

Any ideas? Maybe take a snapshot of the window at the effectView (final) bounds?

I played around with this idea here: 7d9f0f1

Still needs some work but here is an initial result:

It still breaks once the animation is complete, though.

This is probably an unrelated question, but in the above scenario, how could I make it so the effectView frame doesn't animate (i.e it already starts with the the final frame)?

[fruitcoder]

I haven't looked at the exact code that peforms the animations, but is it possible to check for the views that are animated (traversing the view hierarchy)? Then every VisualEffectView's effect would be set to nil and reset in an animation block. That way it could be animated

[lkzhao]

With the new .overFullScreen support. This should be possible. We just have to figure out how to animation UIVisualEffectView, since it doesn't support opacity animation.

[fruitcoder]

As I said UIVisualEffectView can animate its blur by setting the effect from nil to a blur effect in an animation block so you might have to make a special case if a view is a UIVisualEffectView and the opacity is to be animated

[lkzhao]

Yes, but that doesn't allow interactive scrubbing or reversing the animation.

[fruitcoder]

For that you have to set the blur with a UIViewPropertyAnimator and then scrub by setting it's progress

[fruitcoder]

But that's iOS 10+

[lkzhao]

I tried implementing the UIViewPropertyAnimator. I modify to menu example to have a blur background.

http://lkzhao.com/video/?path=%5Cpublic%5Cposts%5Chero%5Cmenu.mov

It doesn't works when it is interactive though. Whenever, I set the .fractionComplete, the blur effect immediately jumps to the end.

[felix-dumit]

Maybe if it's interactive you have to take a snapshot of the view and animate its alpha similar to the way I tried to do it?

[felix-dumit]

@lkzhao Actually the way you tried should work, check out this example project: https://github.com/fichek/AnimateBlurRadius/

[felix-dumit]

I think the problem is here: https://github.com/lkzhao/Hero/blob/master/Sources/HeroViewPropertyViewContext.swift#L59
Since it already starts the animation immediately, if it is interactive it shouldn't do that and only rely on the fractionComplete.

[jegnux]

If you set the UIVisualEffectView as your's UIViewController.view in loadView(), then the transition is automatically handled by UIKit. Maybe it'll solve your issue.