一种快速毛玻璃虚化效果实现
gxas6814
8年前
<p style="text-align:center"><img src="https://simg.open-open.com/show/41e6cfd9b9ea922fdf9fd7506bed0445.jpg"></p> <p>在iOS设备上我们随处可见毛玻璃效果，而且最近越来越多的场合应用到了这种美观的虚化效果，包括本人的一个开源项目BlureImageView也是受此启发。所以，恰到好处的虚化效果能很好的改善用户体验，而且也能让你的app显得更加优雅。</p> <p>不过，我们目前在android上很少见到毛玻璃效果，我认为很重要的原因是性能问题，虚化一张图片所需要的时间会因设备而异，如果为了虚化使得用户需要刻意等待，那么就是弊大于利。另外，Google官方提供的renderScript一般只是做一些小幅度的虚化，很难达到毛玻璃这类深度虚化效果。</p> <p>所以本文的角度是能够在android设备上快速实现毛玻璃效果。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/5695d5a8b182e47fa130cf0746f0606e.jpg"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/965b0600b4dcc5ac5c81b44ef25e8c0b.jpg"></p> <p>StackBlur</p> <p>首先，为了实现毛玻璃效果，本文采用的是StackBlur模糊算法，这种算法应用非常广泛，能得到非常良好的毛玻璃效果。在这里，我们使用的是它的Java实现代码FastBlur.java。</p> <pre> <code class="language-java">public static Bitmap doBlur(Bitmap sentBitmap, int radius, boolean canReuseInBitmap) </code></pre> <p>可以看出，使用方法非常简单，传入待虚化的bitmap、虚化程序(一般为8)、和是否重用flag。</p> <p>然后，如果要对上面这张图片进行虚化，我们可以通过把它转化成bitmap传入虚化，看起来很简单就解决了，但事实并非如此。</p> <p>OOM</p> <p>如果直接把一张大图传入，很容易就会发生OOM内存溢出</p> <pre> <code class="language-java">03-11 21:02:02.014 16727-16742/com.wingjay.jayandroid I/art: Clamp target GC heap from 109MB to 96MB 03-11 21:02:02.026 16727-16727/com.wingjay.jayandroid I/art: Clamp target GC heap from 109MB to 96MB 03-11 21:02:02.030 16727-16727/com.wingjay.jayandroid I/art: Clamp target GC heap from 109MB to 96MB 03-11 21:02:02.031 16727-16727/com.wingjay.jayandroid I/art: Forcing collection of SoftReferences for 30MB allocation 03-11 21:02:02.035 16727-16727/com.wingjay.jayandroid I/art: Clamp target GC heap from 109MB to 96MB 03-11 21:02:02.036 16727-16727/com.wingjay.jayandroid E/art: Throwing OutOfMemoryError "Failed to allocate a 32175012 byte allocation with 2648672 free bytes and 2MB until OOM" 03-11 21:02:02.036 16727-16727/com.wingjay.jayandroid D/AndroidRuntime: Shutting down VM </code></pre> <p>这是我直接对原图进行虚化得到的log信息。可以看出当虚化开始时，虚拟机开始不断进行内存回收，包括把所有软引用的内存回收。然而，仍然导致了内存溢出。</p> <p>那就意味着我只能虚化小图，这样才能防止内存溢出。但是我并不想换其他图，那么，我们就应该把这张图缩放。</p> <p>ReScale</p> <pre> <code class="language-java">public static Bitmap createScaledBitmap(Bitmap src, int dstWidth, int dstHeight, boolean filter) {} </code></pre> <p>我们可以利用这个function来进行bitmap的缩放。其中前三个参数很明显，其中宽高我们可以选择为原图尺寸的1/10;第四个filter是指缩放的效果，filter为true则会得到一个边缘平滑的bitmap，反之，则会得到边缘锯齿、pixelrelated的bitmap。这里我们要对缩放的图片进行虚化，所以无所谓边缘效果，filter=false。</p> <p>所以，我们要使用</p> <pre> <code class="language-java">int scaleRatio = 10; int blurRadius = 8; Bitmap scaledBitmap = Bitmap.createScaledBitmap(originBitmap, originBitmap.getWidth() / scaleRatio, originBitmap.getHeight() / scaleRatio, false); Bitmap blurBitmap = FastBlur.doBlur(scaledBitmap, blurRadius, true); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); imageView.setImageBitmap(blurBitmap); </code></pre> <p>可以得到如下效果:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/ca2771499264386fdb19c58969af4315.jpg"></p> <p>从图中可以看出，首先可以确定思路是对的;然后，可以看出毛玻璃效果还不是特别的明显。为了得到如iOS那样的虚化效果，我们有两种方法：</p> <ul> <li>增大scaleRatio缩放比，使用一样更小的bitmap去虚化可以得到更好的模糊效果，而且有利于占用内存的减小;</li> <li>增大blurRadius，可以得到更高程度的虚化，不过会导致CPU更加intensive</li> </ul> <p>这里本人通过增大缩放比来实验。</p> <ul> <li>scaleRatio = 20 </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/3b88bbca241b2d2da6331ce410016072.jpg"></p> <ul> <li>scaleRatio = 35 </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/48640f7e09292b0ce4f8545a1cf98309.jpg"></p> <ul> <li>scaleRatio = 50 </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/aea1314f9868817be6af966b0f1188ca.jpg"></p> <ul> <li>scaleRatio = 100 </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/bcce22203e56831b2fa1cc5d8e0bc522.jpg"></p> <p>通过上面对比图我们可以找出最适合自己的虚化效果。</p> <p>Performance analysis</p> <p>那么，要实现这样的效果，是否具有损害用户体验的风险呢?下面，我们从消耗时间和占据内存的角度来进行分析。</p> <p>Time Consuming</p> <p>为了分析虚化一张图片所消耗的时间，本文通过同时虚化100来获取平均消耗时间。以期对虚化耗时和不同缩放比对耗时的影响得到一定的认识。</p> <pre> <code class="language-java">long start = System.currentTimeMillis(); Bitmap scaledBitmap, blurBitmap; int scaleRatio = 10; int loopCount = 100 for (int i=0; i </code></pre> <ul> <li>scaleRatio = 10: 耗时887ms，平均耗时8.87ms;</li> <li>scaleRatio = 20: 耗时224ms，平均耗时2.24ms;</li> <li>scaleRatio = 35: 耗时99ms，平均耗时0.99ms;</li> <li>scaleRatio = 50: 耗时55ms，平均耗时0.55ms;</li> <li>scaleRatio = 100: 耗时29ms，平均耗时0.29ms;</li> </ul> <p>为了方便读者了解效果，我通过多组数据拟合了下面的曲线：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/c4a5873a91a39044aa16b03481f0a817.jpg"></p> <p>从该模拟图可以看出时间随着缩放比的增大而不断减小，当缩放比达到30以上时所消耗的时间不到1ms，因此，我认为应该是完全不会产生时延破坏用户体验的。</p> <p>Memory Consuming</p> <p>既然时间没问题，那么，主要问题：内存占用就来了，所以我们需要考察生成一张虚化图片所占用的内存。</p> <p>为了测试对一张图片进行虚化所占用内存的变化，我们改变虚化次数，即修改上面的loopCount并观察对内存的变化。其中scaleRatio = 10，以获得相对较大的内存消耗。</p> <ul> <li>loopCount = 1 </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/36a13c09e437ed74ed51bd09456e1c68.png"></p> <ul> <li>loopCount = 10 </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/611abd30a03884cce638698e6216944e.png"></p> <ul> <li>loopCount = 20 </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/c0ad4a8e6b01490412c08948b129f86f.png"></p> <ul> <li>loopCount = 50 </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/b7fe33eeb231c5a8581dccfa20d7dee5.png"></p> <ul> <li>loopCount = 100 </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/8d00453e82c9ed2ba9c5acf22fdeab48.png"></p> <ul> <li>loopCount = 300 </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/170c331321a2a3c039922d1b28f26c43.png"></p> <p>从上面的内存消耗图，可以看出虚化的确会占用一定内存，如果大量的虚化同时发生，则会由于UI线程突然加载很多bitmap而导致内存抖动。</p> <p>Conclusion</p> <p>希望大家如果有其他测试方法或者意见多多留言，从而继续改进性能。</p> <p>附上本文所采用的</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/af72346db60749863e530ed61ff56fea.jpg"></p> <p> </p> <p>来自：http://mobile.51cto.com/android-531098.htm</p> <p> </p>