大前端产品哀悼日变灰的整套方案

目前主流产品的前端展示，不外乎h5 pcweb 移动web，Android原生、iOS原生、flutter 等跨平台技术。 上次默哀日的时候我还是一个app开发者，也写过类似文章，就不多赘述。

 

整体思路

无论是什么前端应用，如果项目有好的层次，组件复用的基础组件是相同的，那么这种一夜变灰是特别简单的。 web 和 Flutter 的设计与生俱来，由于层层结构可以统一更改样式。

iOS 和Android 如果自己定义了基础组件，那么也可以是相同原理。

 

H5 页面

h5 是最简单的，所有的样式都根html 样式下，所以更改html 样式即可。

css 有一个过滤属性filter 只要要设置下灰色 grayscale(100%)

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

 

Flutter

Flutter 也是在根Wiget 上包裹 ColorFiltered 组件就可以。

@override
Widget build(BuildContext context) {
  return ColorFiltered(
    colorFilter: ColorFilter.mode(Colors.grey, BlendMode.color),
    child: MaterialApp(
      title: 'Flutter 灰色,
      theme: ThemeData(
          primaryColor: Colors.white,
          accentColor: Color(0xFF5DC782),
          backgroundColor: Color(0xFFF2F2F2)),
      routes: Routes.routes,
      initialRoute: Routes.home_page,
      debugShowCheckedModeBanner: false,
    ),
  );
}

 

Android

一般都会有 BaseActivity ，在 onCreate 声明周期里设置一层灰色滤镜。

Paint paint = new Paint();
ColorMatrix cm = new ColorMatrix();
cm.setSaturation(0);//灰度效果
paint.setColorFilter(new ColorMatrixColorFilter(cm));
getWindow().getDecorView().setLayerType(View.LAYER_TYPE_HARDWARE,paint);

 

iOS

方案一：

作为iOS 开发，我没有找到顶层搞过滤的的根组件，如果一个一个搞，UIImageView ， Button ， Text 太多颜色需要变化。

只能通过runtime 方法替换进行更改，这个就不多介绍了。

大体思路：

1. 挂几个钩子，在设置背景色，设置字体颜色等需要替换颜色的地方
2. 如果是图片需要改一下 imageWithRenderingMode

方案二：

方案二适用于所有的，一位前同事交流获取。

思路：

1. 加蒙层
2. 蒙层事件屏蔽掉

蒙层创建：

利用hittest 屏蔽事件：

 

总结反思

一个良好的工程结构能为你以后迭代的需求省下不少的时间