filter

介绍

filter 属性可以将模糊或颜色偏移等图形效果应用于元件

常见问题

在 Android & iOS 平台上，该属性只作用于 view 上，如果 image 组件需要使用 blur 效果，可以直接使用 image 的 blur-radius

目前只支持 blur、grayscale、brightness、contrast 和 saturate函数。

如果使用 opacity 可以直接给 view 设置属性，相关链接

在 Android 上添加了 grayscale 属性的 view 会创建 GPU 上的离屏缓存，大量的离屏缓存会导致渲染性能下降。在不需要 grayscale 时建议将 filter: grayscale(0) 替换为 filter: none 来移除离屏缓存。

Android blur 说明（OS 版本 < 12）

在使用的时候可以给节点添加 blur-sampling 属性（int 值）设置降采样比例，会提升性能

设置 blur 的区域如果一直更新内容可能会产生性能问题

为了更高的 blur 效率建议 blur-radius 实际大小不超过 25，即最大写 25ppx 或者 25/density 的 px

使用示例

语法

filter: grayscale(100%);
filter: blur(5px);
filter: brightness(0.6);
filter: contrast(0.7);
filter: saturate(0.8);

形式定义

初始值	none
适用元素	all elements
是否支持继承	no
是否支持动画	yes

形式语法

filter = <filter-function>

<filter-function> =
  <blur()>         |
  <grayscale()>    |
  <brightness()>   |
  <contrast()>     |
  <saturate()>

<blur()> =
  blur( <length>? )

<grayscale()> =
  grayscale( [ <percentage> ]? )

<brightness()> =
  brightness( [ <number> | <percentage> ]? )

<contrast()> =
  contrast( [ <number> | <percentage> ]? )

<saturate()> =
  saturate( [ <number> | <percentage> ]? )

与 Web 的区别

在一个声明中只能使用一个函数
只支持 blur、grayscale、brightness、contrast 和 saturate函数

兼容性

LCD tables only load in the browser

#filter

#介绍

#使用示例

#语法

#形式定义

#形式语法

#与 Web 的区别

#兼容性

filter

介绍

使用示例

语法

形式定义

形式语法

与 Web 的区别

兼容性