企业官网建设流程全解析

阅读时长：约 18 分钟 | 难度：★★★★☆ | 篇章：第 5 篇 · 周易易学模块
对应源码：entry/src/main/ets/pages/yijing/CastDivinationPage.ets

前言

玄象项目起卦页在用户 18 次三变完成后，会触发卦象绘制的动画反馈——六爻从下到上逐爻出现，动爻高亮闪烁。这一动画效果通过@Watch装饰器监听@State卦象数据变化实现。本篇将深入剖析玄象项目@Watch监听卦象变化触发动画的实现：从@Watch装饰器原理、@State与@Watch的协作、动画触发时机，到逐爻动画与动爻闪烁。掌握这套@Watch监听动画触发机制，您就能为任何 HarmonyOS 应用实现数据驱动的动画反馈。

提示：@Watch是 ArkUI 的"观察者"装饰器，在@State变量变化时自动调用回调函数。

一、@Watch 装饰器

1.1 @Watch 基本用法

@State@Watch('onHexagramChanged')yaos:number[]=[];privateonHexagramChanged():void{this.animateHexagram();}

二、逐爻动画

2.1 逐爻出现

@StatevisibleYaoCount:number=0;privateanimateHexagram():void{this.visibleYaoCount=0;constinterval=setInterval(()=>{this.visibleYaoCount++;if(this.visibleYaoCount>=6){clearInterval(interval);}},300);}

三、UI 绑定

3.1 条件渲染

ForEach(this.yaos.slice(0,this.visibleYaoCount),(yao:number,index:number)=>{// 渲染爻if(yao===7||yao===9){this.drawYangYao(canvas,x,y+index*10,width,6);}else{this.drawYinYao(canvas,x,y+index*10,width,6);}})

四、@Watch 设计总结

4.1 数据流

用户点击"开始起卦" ↓ castHexagram() 生成 6 爻 ↓ @State yaos 更新 ↓ @Watch('onHexagramChanged') 触发 ↓ animateHexagram() 启动逐爻动画 ↓ visibleYaoCount 逐步增加 ↓ Canvas 逐爻绘制 ↓ 动画完成

总结

本篇以玄象项目起卦页动画反馈为蓝本，深入剖析了@Watch装饰器的使用：从@Watch原理、@State与@Watch的协作、动画触发时机，到逐爻动画与动爻闪烁。掌握这套@Watch监听动画触发机制，您就能为任何 HarmonyOS 应用实现数据驱动的动画反馈。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• HarmonyOS 官方文档：@Watch 装饰器
• 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net