1# ArkUI使用动效组件指南文档示例 2 3### 介绍 4 5本示例通过使用[ArkUI指南文档](https://gitee.com/openharmony/docs/tree/master/zh-cn/application-dev/ui)中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接： 6 71. [显示动画（animateTo）](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-explicit-animation.md)。 82. [属性动画（animation）](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-animatorproperty.md)。 93. [动画衔接](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-animation-smoothing.md)。 104. [关键帧动画](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-keyframeAnimateTo.md)。 115. [页面间转场](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-page-transition-animation.md)。 126. [组件内转场](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-transition-animation-component.md)。 137. [共享元素转场](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-transition-animation-shared-elements.md)。 148. [路径动画](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-motion-path-animation.md)。 159. [粒子动画](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-particle-animation.md)。 1610. [帧动画](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-animator.md)。 1711. [显式动画立即下发](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-explicit-animatetoimmediately.md)。 1812. [旋转屏动画](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-rotation-transition-animation.md)。 19 20 21### 效果预览 22 23| 首页 | 24|------------------------------------| 25|  | 26 27### 使用说明 28 291. 在主界面，可以点击对应卡片，选择需要参考的组件示例。 30 312. 在组件目录选择详细的示例参考。 32 333. 进入示例界面，查看参考示例。 34 354. 通过自动测试框架可进行测试及维护。 36 37### 工程目录 38``` 39entry/src/main/ets/ 40|---entryability 41|---pages 42| |---animateTo // 显示动画（animateTo） 43| | |---template1 44| | | |---Index.ets // 示例1（在组件出现时创建动画） 45| | |---template2 46| | | |---Index.ets // 示例2（动画执行结束后组件消失） 47| | |---template3 48| | | |---Index.ets // 示例3（在状态管理V2中使用animateTo） 49| |---animateToImmediately // 显式动画立即下发 50| | |---template1 51| | | |---Index.ets 52| |---animation // 属性动画（animation） 53| | |---template1 54| | | |---Index.ets 55| | |---template2 56| | | |---Index.ets // 示例2（使用animateTo产生属性动画） 57| | |---template3 58| | | |---Index.ets // 示例3（使用animation产生属性动画） 59| | |---template4 60| | | |---Index.ets // 示例4（使用keyframeAnimateTo产生属性动画） 61| |---animator // 帧动画 62| | |---template1 // 示例1（基于ArkTS扩展的声明式开发范式） 63| | | |---Index.ets 64| | |---template2 // 示例2（位移动画示例） 65| | | |---Index.ets 66| | |---template3 // 示例3（使用帧动画实现小球抛物运动） 67| | | |---Index.ets 68| |---cohesion // 动画衔接 69| | |---template1 70| | | |---Index.ets 71| | |---template2 72| | | |---Index.ets 73| |---compTransition // 组件内转场 74| | |---template1 75| | | |---Index.ets // 示例1（使用同一接口实现图片出现消失） 76| | |---template2 77| | | |---Index.ets // 示例2（使用不同接口实现图片出现消失） 78| | |---template3 79| | | |---Index.ets // 示例3（设置父子组件为transition） 80| | |---template4 81| | | |---Index.ets // 示例4（出现/消失转场） 82| | |---template5 83| | | |---Index.ets // 示例5（多个组件渐次出现消失） 84| |---keyframeAnimateTo // 关键帧动画 85| | |---template1 86| | | |---Index.ets 87| |---motionPath // 路径动画 88| | |---template1 89| | | |---Index.ets 90| |---pageTransition // 页面间转场 91| | |---template1 92| | | |---Index.ets // 示例1（设置退入场动画） 93| | |---template2 94| | | |---Index.ets // 示例2（设置退入场平移效果） 95| | |---template3 96| | | |---Index.ets // 示例3（不推荐)（利用pushUrl跳转能力） 97| | |---template4 98| | | |---Index.ets // 示例4（不推荐)（type为None的页面转场） 99| |---particle // 粒子动画 100| | |---template1 101| | | |---Index.ets // 示例1（圆形初始化粒子） 102| | |---template2 103| | | |---Index.ets // 示例2（图片初始化粒子） 104| | |---template3 105| | | |---Index.ets // 示例3（粒子扰动场的干扰下运动轨迹发生变化） 106| | |---template4 107| | | |---Index.ets // 示例4（调整粒子发射器位置） 108| | |---template5 109| | | |---Index.ets // 示例5（环形发射器创建） 110| | |---template6 111| | | |---Index.ets // 示例6（环形发射器更新） 112| |---rotation // 旋转屏动画 113| | |---template1 114| | | |---Index.ets 115| | |---template2 116| | | |---Index.ets 117| |---shareTransition // 共享元素转场 118| | |---template1 119| | | |---Index.ets 120|---pages 121| |---Index.ets // 应用主页面 122entry/src/ohosTest/ 123|---ets 124| |---test 125| | |---AnimateTo.test.ets // 显示动画（animateTo）示例代码测试代码 126| | |---AnimateToImmediately.test.ets // 显式动画立即下发示例代码测试代码 127| | |---Animation.test.ets // 属性动画（animation）示例代码测试代码 128| | |---Animator.test.ets // 帧动画示例代码测试代码 129| | |---Cohesion.test.ets // 动画衔接示例代码测试代码 130| | |---ComponentTransition.test.ets // 组件内转场示例代码测试代码 131| | |---KeyFrameAnimateTo.test.ets // 关键帧动画示例代码测试代码 132| | |---MotionPath.test.ets // 路径动画示例代码测试代码 133| | |---PageTransition.test.ets // 页面间转场示例代码测试代码 134| | |---Particle.test.ets // 粒子动画示例代码测试代码 135| | |---Rotation.test.ets // 旋转屏动画示例代码测试代码 136| | |---ShareTransition.test.ets // 共享元素转场示例代码测试代码 137``` 138 139### 相关权限 140 141不涉及。 142 143### 依赖 144 145不涉及。 146 147### 约束与限制 148 1491.本示例仅支持标准系统上运行, 支持设备：RK3568。 150 1512.本示例为Stage模型，支持API20版本SDK，版本号：6.0.0.33，镜像版本号：OpenHarmony_6.0.0.33。 152 1533.本示例需要使用DevEco Studio 6.0.0 Canary1 (Build Version: 6.0.0.270， built on May 9, 2025)及以上版本才可编译运行。 154 155### 下载 156 157如需单独下载本工程，执行如下命令： 158 159```` 160git init 161git config core.sparsecheckout true 162echo code/DocsSample/ArkUIDocSample/Animation > .git/info/sparse-checkout 163git remote add origin https://gitee.com/openharmony/applications_app_samples.git 164git pull origin master 165````
