• Home
Name Date Size #Lines LOC

..--

AppScope/22-Oct-2025-4139

entry/22-Oct-2025-4,5514,252

hvigor/22-Oct-2025-3736

screenshots/device/22-Oct-2025-

.gitignoreD22-Oct-2025133 1212

README_zh.mdD22-Oct-20258.2 KiB185161

build-profile.json5D22-Oct-20251.3 KiB5757

code-linter.json5D22-Oct-20251.4 KiB4646

hvigorfile.tsD22-Oct-2025842 215

oh-package.json5D22-Oct-2025808 2524

ohosTest.mdD22-Oct-20252.8 KiB2219

README_zh.md

1# ArkUI使用视效组件指南文档示例
2
3### 介绍
4
5本示例通过使用[ArkUI指南文档](https://gitee.com/openharmony/docs/tree/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接：
6
71. [图形变换](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-transformation.md)。
82. [透明度设置](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-opacity.md)。
93. [形状裁剪](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-sharp-clipping.md)。
104. [图像效果](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-image-effect.md)
115. [背景设置](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-background.md)
126. [组件内容模糊](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-foreground-blur-style.md)
137. [前景色设置](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-foreground-color.md)
148. [点击回弹效果](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-click-effect.md)
159. [特效绘制合并](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-use-effect.md)
1610. [组件内容填充方式](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-renderfit.md)
1711. [外描边设置](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-outline.md)
1812. [运动模糊](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-motionBlur.md)
1913. [颜色渐变](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-gradient-color.md)
2014. [前景属性设置](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-foreground-effect.md)
2115. [视效设置](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-filter-effect.md)
22
23
24### 效果预览
25
26| 首页                                 |
27|------------------------------------|
28| ![](screenshots/device/image1.png) |
29
30### 使用说明
31
321. 在主界面，可以点击对应卡片，选择需要参考的组件示例。
33
342. 在组件目录选择详细的示例参考。
35
363. 进入示例界面，查看参考示例。
37
384. 通过自动测试框架可进行测试及维护。
39
40### 工程目录
41```
42entry/src/main/ets/
43|---entryability
44|---pages
45|   |---background                       // 背景设置
46|   |   |---template1
47|   |   |   |---Index.ets
48|   |   |---template2
49|   |   |   |---Index.ets
50|   |   |---template3
51|   |   |   |---Index.ets
52|   |   |---template4
53|   |   |   |---Index.ets
54|   |   |---template5
55|   |   |   |---Index.ets
56|   |   |---template6
57|   |   |   |---Index.ets
58|   |   |---template7
59|   |   |   |---Index.ets
60|   |---clickEffect                      // 点击回弹效果
61|   |   |---template1
62|   |   |   |---Index.ets
63|   |---clip                             // 形状裁剪
64|   |   |---template1
65|   |   |   |---Index.ets
66|   |   |---template2
67|   |   |   |---Index.ets
68|   |---foregroundBlurStyle              // 组件内容模糊
69|   |   |---template1
70|   |   |   |---Index.ets
71|   |---foregroundColor                  // 前景色设置
72|   |   |---template1
73|   |   |   |---Index.ets
74|   |   |---template2
75|   |   |   |---Index.ets
76|   |   |---template3
77|   |   |   |---Index.ets
78|   |---foregroundEffect                 // 前景属性设置
79|   |   |---template1
80|   |   |   |---Index.ets
81|   |---imageEffect                      // 图像效果
82|   |   |---template1
83|   |   |   |---Index.ets
84|   |   |---template2
85|   |   |   |---Index.ets
86|   |   |---template3
87|   |   |   |---Index.ets
88|   |   |---template4
89|   |   |   |---Index.ets
90|   |   |---template5
91|   |   |   |---Index.ets
92|   |   |---template6
93|   |   |   |---Index.ets
94|   |   |---template7
95|   |   |   |---Index.ets
96|   |   |---template8
97|   |   |   |---Index.ets
98|   |   |---template9
99|   |   |   |---Index.ets
100|   |   |---template10
101|   |   |   |---Index.ets
102|   |---linearGradient                   // 颜色渐变
103|   |   |---template1
104|   |   |   |---Index.ets
105|   |   |---template2
106|   |   |   |---Index.ets
107|   |   |---template3
108|   |   |   |---Index.ets
109|   |---motionBlur                       // 运动模糊
110|   |   |---template1
111|   |   |   |---Index.ets
112|   |---opacity                          // 透明度设置
113|   |   |---template1
114|   |   |   |---Index.ets
115|   |---outline                          // 外描边设置
116|   |   |---template1
117|   |   |   |---Index.ets
118|   |   |---template2
119|   |   |   |---Index.ets
120|   |---renderFit                        // 组件内容填充方式
121|   |   |---template1
122|   |   |   |---Index.ets
123|   |---transform                        // 图形变换
124|   |   |---template1
125|   |   |   |---Index.ets
126|   |   |---template2
127|   |   |   |---Index.ets
128|   |   |---template3
129|   |   |   |---Index.ets
130|   |---useEffect                        // 特效绘制合并
131|   |   |---template1
132|   |   |   |---Index.ets
133|   |---visualEffect                     // 视效设置
134|   |   |---template1
135|   |   |   |---Index.ets
136|---pages
137|   |---Index.ets                       // 应用主页面
138entry/src/ohosTest/
139|---ets
140|   |---test
141|   |   |---Background.test.ets                      // 背景设置示例代码测试代码
142|   |   |---ClickEffect.test.ets                     // 点击回弹效果示例代码测试代码
143|   |   |---Clip.test.ets                            // 形状裁剪示例代码测试代码
144|   |   |---ForegroundBlurStyle.test.ets             // 组件内容模糊示例代码测试代码
145|   |   |---ForegroundColor.test.ets                 // 前景色设置示例代码测试代码
146|   |   |---ForegroundEffect.test.ets                // 前景属性设置示例代码测试代码
147|   |   |---ImageEffect.test.ets                     // 图像效果示例代码测试代码
148|   |   |---LinearGradient.test.ets                  // 颜色渐变示例代码测试代码
149|   |   |---MotionBlur.test.ets                      // 运动模糊示例代码测试代码
150|   |   |---Opacity.test.ets                         // 透明度设置示例代码测试代码
151|   |   |---OutLine.test.ets                         // 外描边设置示例代码测试代码
152|   |   |---RenderFit.test.ets                       // 组件内容填充方式示例代码测试代码
153|   |   |---Transform.test.ets                       // 图形变换示例代码测试代码
154|   |   |---UseEffect.test.ets                       // 特效绘制合并示例代码测试代码
155|   |   |---VisualEffect.test.ets                    // 视效设置示例代码测试代码
156```
157
158### 相关权限
159
160不涉及。
161
162### 依赖
163
164不涉及。
165
166### 约束与限制
167
1681.本示例仅支持标准系统上运行, 支持设备：RK3568。
169
1702.本示例为Stage模型，支持API18版本SDK，版本号：5.1.0.56，镜像版本号：OpenHarmony_5.1.0.56。
171
1723.本示例需要使用DevEco Studio 6.0.0 Canary1 (Build Version: 6.0.0.270， built on May 9, 2025)及以上版本才可编译运行。
173
174
175### 下载
176
177如需单独下载本工程，执行如下命令：
178
179````
180git init
181git config core.sparsecheckout true
182echo code/DocsSample/ArkUIDocSample/VisionEffect > .git/info/sparse-checkout
183git remote add origin https://gitee.com/openharmony/applications_app_samples.git
184git pull origin master
185````