zoukankan      html  css  js  c++  java
  • 关于UIVisualEffects的介绍

    昨天设计同学问了个问题,iOS8下设计到底做了什么新的元素,猛然想了一下,没有想出什么合适的介绍方法,从网上找找看,却都是些“独家首发”,“技术实现幻灯片”之类的水货,全不对题,只好照着代码实例,对照实现效果依样把每种样子胡乱给设计介绍了一通。

    过后想想,应该怎么通俗移动的介绍iOS8的毛玻璃效果呢?既然是毛玻璃,还是从毛玻璃入手吧:)

    效果图地址在最下。

    Blur
    iOS8带来了应用可实现的毛玻璃效果,模糊效果有三种类型可以选择:
    Extra Light Blur(极亮)
    Light Blur (亮)
    Dark Blur (暗)

    想象三种效果实现置于同一张图片之上,Light Blur看起来的效果最接近于我们通过毛玻璃看和玻璃距离很近的物体,可以看到不同颜色的边界的,Extra Light Blur呢,更接近与通过毛玻璃看和玻璃距离远的物体,也就是更多看到的是毛玻璃的那种白色,置于图片呢,只能看到它的明暗边界了。
    Dark Blur其实和Extra效果相似,但是毛玻璃颜色是暗色的。

    UIVibrancyEffect
    这个效果可以这么想象小时候玩的一个,在毛玻璃上蘸水,可以是一部分地方变得更加透明。
    这里UIVibrancyEffect作用就是为了实现这种相近的效果,注意,这也就表示UIVibrancyEffect是专门面向Blur的渲染效果。

    对应三种不同的Blur,效果不禁相同。 Extra以及Light 本身实现的效果和那种毛玻璃蘸水是差不多的,Dark Blur本身不同,它的渲染效果是白色的。
    注意:Light系->透明 Dark->白色

    举几个简单例子:
    前置步骤
    1.首先我们创建好一个Blur View,这就有了基本的模糊效果。
    2.紧接着我们从Blur View上创建出对应的Vibrancy View。这里注意,你设置不了Vibrancy的Frame,因为他是和对应的Blur紧密结合在一起的,作用区域就是Blur的Frame区域。

    下面就是在Vibrancy上实现我们的效果啦,它使用了Mask(遮罩)得概念来帮助我们实现对应的效果。
    1.加入Text,颜色深的文字部分会对应的变透明/白。
    2.加入图片,色深部分对应变透明/白。

    拓展:基本的实现已经有了,那么设计同学是否满意呢?
    对应的三种Blur效果还是透明度还是不够?
    没关系,可以在Vibrancy 上给全区域计入遮罩,这样子会全部透明起来:)(可以看看效果图的Status Bar部分的实现效果)

    那么几个Mask叠压效果有如何呢,看看效果图吧,你一眼就可以看出来。

    对应的效果图:
    https://github.com/ide/UIVisualEffects/tree/master/Screenshots

  • 相关阅读:
    hbase存储优化
    cloudera manager下phoenix的安装
    Cloudera manager的服务安装以及spark升级到2.2
    redis学习总结
    kylin基础概念和基础性能优化
    mycat使用注意事项
    kylin2.0环境搭建
    ETL实践--kettle转到hive
    集成 SOLR 到 TOMCAT 中(傻瓜教程)
    局域网ip扫描
  • 原文地址:https://www.cnblogs.com/junwang/p/3924097.html
Copyright © 2011-2022 走看看