Better blur transitions
When first working on #Muzei
, one of the things I thought about was how to make the blur transition (the animation between focused and blurred states) as natural as possible.
The naïve and computationally cheap approach would be to simply crossfade the blurred and focused versions. But the digital displays in NYC that inspired the effect in the first place  did a much better job, animating the blur radius over time, just like what happens in the real world (i.e. the effect you see when a camera's depth of field changes).
Unfortunately, to achieve this effect in a UI, you'd need to blur the image on-the-fly, with a different radius for each animation frame. That's pretty computationally expensive.
However, if you create a handful of blurred 'keyframes' with different radii and crossfade between those keyframes during the animation, the transition is almost seamless—after testing this technique out for Muzei, it felt like the perfect tradeoff between visual integrity and resource usage.
Finally, you can gracefully degrade the effect for weaker devices by varying the number of keyframes on device RAM, processing power, etc. In Muzei, I use the ActivityManager.isLowRamDevice
method to decide the number of keyframes to keep in memory.
Check out some more details on this tip in the attached photos!#AndroidDev #AndroidDesign