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|  | 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````
