企业官网建设流程全解析

前言

ArkUI 有两种动画模式：声明式动画（.animation()）和显式动画（animateTo）。前者适合"状态变化自动过渡"的场景，后者适合"在特定时刻触发动画"的场景。今天聊animateTo的基础用法，用透明度和位移两个属性来入门。

基础概念

animateTo vs .animation()

animateTo的函数签名：

animateTo({duration:500,curve:Curve.EaseInOut},()=>{// 在这里修改状态变量，修改会走动画})

第一个参数是动画配置，第二个是回调函数。回调里修改的状态变量会以动画方式过渡到新值。

从简到繁

透明度动画

Button('淡出').onClick(()=>{animateTo({duration:500,curve:Curve.EaseInOut},()=>{this.opacityValue=0.2})})Button('淡入').onClick(()=>{animateTo({duration:500,curve:Curve.EaseInOut},()=>{this.opacityValue=1})})

点击"淡出"时，opacityValue从 1 渐变到 0.2，持续 500ms，使用EaseInOut曲线（先慢后快再慢）。

位移动画

Button('右移').onClick(()=>{animateTo({duration:600,curve:Curve.EaseOut},()=>{this.offsetX=60})})

方块向右平移 60vp，EaseOut曲线让运动"先快后慢"，有减速感。

组合复位

Button('复位').onClick(()=>{animateTo({duration:500,curve:Curve.FastOutLinearIn},()=>{this.opacityValue=1this.offsetX=0})})

一个animateTo调用里同时修改多个状态变量，透明度和位移会同时做过渡动画。FastOutLinearIn曲线快速开始然后线性减速。

代码详解

完整状态管理

@Entry@Componentstruct BasicPropertyAnimation{@StateopacityValue:number=1@StateoffsetX:number=0// ...}

只需要两个状态变量，一个控制透明度，一个控制水平偏移。

动画目标组件

Column().width(80).height(80).backgroundColor('#6BCB77').borderRadius(12).opacity(this.opacityValue).translate({x:this.offsetX})

.opacity()和.translate()都是可动画属性——框架知道怎么在两个值之间做插值。

按钮控制面板

Row({space:12}){Button('淡出').onClick(()=>{/* ... */})Button('淡入').onClick(()=>{/* ... */})Button('右移').onClick(()=>{/* ... */})Button('复位').onClick(()=>{/* ... */})}.width('100%').justifyContent(FlexAlign.SpaceEvenly).margin({top:12})

四个按钮一字排开，用Row({ space: 12 })设置间距，SpaceEvenly均匀分布。

实时数值显示

Text(`当前透明度:${this.opacityValue.toFixed(1)}| 偏移:${this.offsetX}vp`).fontSize(12).fontColor('#999999').margin({top:12})

动画过程中，数值是连续变化的。toFixed(1)保留一位小数，显示更整洁。

Curve 曲线对比

这个案例用到了三种曲线，对比一下：

选曲线的原则：

• 入场/出现：用EaseOut（快速出现，慢慢停稳）
• 出场/消失：用EaseIn（慢慢开始，快速消失）
• 状态切换：用EaseInOut（平滑过渡）

常见问题

Q：animateTo 的回调里能写异步操作吗？

不能。回调里只应该写状态变量的赋值操作。异步操作放在animateTo外面。

Q：动画还没结束又触发了新动画？

新动画会"打断"旧动画，从当前值开始过渡到新目标值。不会叠加。

Q：怎么知道动画结束了？

animateTo的第一个参数支持onFinish回调：

animateTo({duration:500,curve:Curve.EaseInOut,onFinish:()=>{console.info('动画完成')}},()=>{this.opacityValue=0.2})

animateTo的回调函数里不要写非状态修改的代码（比如网络请求、日志打印）。它的作用是"告诉框架哪些状态变量需要做动画"，不是通用的回调。

进阶技巧

1. 链式动画：在onFinish里触发下一个animateTo，形成动画序列。

2. 不同属性不同时长：如果需要透明度和位移用不同的动画时长，可以分两次animateTo调用。

3. 延迟启动：用setTimeout包裹animateTo实现延迟动画，或者用animateTo的delay参数。

写在最后

animateTo是 ArkUI 动画系统的"手动模式"，给你精确的触发控制。配合Curve曲线和duration时长，能做出各种节奏感不同的动画效果。今天用透明度和位移入了门，后面的文章会在这个基础上扩展到缩放、旋转、颜色变化等更多属性。