OpenHarmony动画支持哪些特效

OpenHarmony动画支持的特效分类及具体效果

一、基础属性动画特效

基础属性动画是OpenHarmony动画体系的核心，通过对组件位置、尺寸、透明度等属性的动态修改实现平滑过渡，主要包括以下类型：

• 平移动画：通过translate属性控制组件在X/Y轴上的位移，例如从屏幕左侧平移至右侧的效果，可通过@keyframes定义起始与结束位置。
• 旋转动画：支持绕X/Y/Z轴旋转，通过rotate属性设置旋转角度（如0°→360°），可实现顺时针/逆时针旋转效果，常用于图标或元素的动态展示。
• 缩放动画：通过scale属性调整组件尺寸（如0→1.2倍），可实现从小到大或从大到小的缩放效果，适用于强调重点内容的场景。
• 透明度动画：通过opacity属性改变组件透明度（如0→1），可实现淡入淡出效果，常用于组件出现/消失的平滑过渡。

二、转场动画特效

转场动画用于组件或页面之间的平滑衔接，支持多种预设及自定义效果：

• 页面间转场：通过pageTransition方法配置，包括底部滑入（SlideEffect.Bottom）、淡入放大（opacity(0.2)→1 + scale(0)→1）、旋转滑入（rotate(90°) + scale(0)→1）等效果，适用于页面跳转的场景。
• 组件内转场：通过TransitionEffect组合实现，支持透明度变化（OPACITY）、缩放（scale）、旋转（rotate）、平移（translate）、非对称转场（asymmetric，如一边缩放一边旋转）等效果，可通过combine方法叠加多个效果，适用于组件内部的动态变化。
• 共享元素转场：通过给两个页面的相同组件设置同一sharedTransition ID，实现转场时该组件的平滑过渡（如位置、尺寸的联动变化），增强界面的连贯性。

三、弹性动画特效

弹性动画通过弹簧曲线模拟物理弹性效果，使动效更具自然感，主要包括：

• 弹簧曲线：OpenHarmony提供curves.springCurve、curves.springMotion、curves.responsiveSpringMotion等曲线，适用于拖拽、点击反馈等场景（如按钮按下时的弹性形变、拖拽元素时的回弹效果）。

四、特殊效果

除了基础动画外，OpenHarmony还支持以下特殊效果，用于增强界面的视觉表现力：

• 渐变模糊：通过模糊材质能力实现组件的渐变模糊效果，提升层次感。
• 边缘像素扩展：通过边缘像素扩展技术，防止组件边缘出现锯齿或模糊，保持图像清晰度。
• 渐亮效果：通过调整组件亮度属性，实现从暗到亮的渐变效果，常用于焦点元素的突出显示。
• Lottie动画：通过加载JSON格式的Lottie动画文件（需第三方库支持），实现复杂的矢量动画效果（如卡通人物动作、场景过渡），提升界面的趣味性。
• GIF动图播放：通过image组件原生支持或ohos-gif-drawable三方库，实现GIF动图的播放、暂停等控制，适用于动态图标或装饰性动画。
• 逐帧动画：通过translate()、setInterval()等方法，将连续动作拆分为多帧静态图像，在固定时间间隔内逐帧显示（如风车转动、行走的小人），实现简单的动态效果。