网站和app 等前端产品如何变成灰色
2023-06-13 09:16:09 时间
目前主流产品的前端展示,不外乎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 方法替换进行更改,这个就不多介绍了。
大体思路:
- 挂几个钩子,在设置背景色,设置字体颜色等需要替换颜色的地方
- 如果是图片需要改一下 imageWithRenderingMode
方案二:
方案二适用于所有的,一位前同事交流获取。
思路:
- 加蒙层
- 蒙层事件屏蔽掉
蒙层创建:
利用hittest 屏蔽事件:
总结反思
一个良好的工程结构能为你以后迭代的需求省下不少的时间
相关文章
- uni-app 103退出和解散群聊(一)
- 什么是快应用?与原生APP相比优势在哪里?
- App消息推送的原理
- uni-app引入sortable列表拖拽,兼容App和H5
- 苹果商店上架流程_App上架苹果流程及注意事项
- App Cleaner & Uninstaller for mac(最佳卸载程序和清洁助手) 中文
- 技术实操| 自有App如何引入小游戏(Android篇)
- Hbuilder用自有证书打包 ios App上架AppStore流程
- 《一步步了解iOS APP上架流程,让你的APP顺利进入App Store的大门》
- Application Loader及Transporter App上传ipa外、可以在Windows上架iOS APP工具
- Fusion App--所有网页都是客户端
- App在苹果上架难吗
- 最新Hbuilder打包成苹果IOS-App的详解
- 最新版iOS及APP Store上架
- Soul App创始人突破社交局限,助力品牌深度连接用户
- 制作网站或者 App 在样机上的截图:MockUPhone
- Oracle 视图 DBA_APP_ERRORS 官方解释,作用,如何使用详细说明
- vue main.js中app绑定的是index.html还是App.vue中详解编程语言
- [推荐]六一节 帮您找寻童趣的5个必装实用App
- 安卓APP配合MSSQL强势发力,创新移动应用体验(安卓app mssql)
- 基于MSSQL的手机APP编程实践(mssql编程app)
- 拓展业务用App组合MySQL实现跨平台数据共享(app组合mysql)
- App无缝连接MySQL一种全新的解放方式(app直连mysql)
- APP直接访问MySQL快速便捷的解决方案(app直接mysql)
- 数据库利用App制作读取MySQL数据库的简单方法(app制作读取mysql)
- App企业使用MySQL实现信息管理梦想(app企业用mysql)
- 实现安卓App快速定制Redis整合安卓实战(安卓整合redis实战)
- App与Oracle融合,拥抱数据驱动未来(app与oracle)