阅读时长约 18 分钟 | 难度★★★★☆ | 篇章第 5 篇 · 周易易学模块 对应源码entry/src/main/ets/pages/yijing/CastDivinationPage.ets前言玄象项目起卦页在模拟三变时用animateTo显式动画驱动“铜钱“的旋转与翻转模拟传统掷钱起卦的物理感。动画通过Curve.FastOutSlowIn缓动曲线实现“加速抛出→减速落地“的视觉反馈。本篇将深入剖析玄象项目掷钱动画的实现从animateTo显式动画、Curve缓动曲线选择、平移动画与旋转动画的组合到动画完成回调。掌握这套动画模拟方法论您就能为任何 HarmonyOS 应用打造物理感的交互反馈。提示animateTo是 ArkUI 的显式动画 API比animation修饰器更灵活支持动画完成回调。一、animateTo 显式动画1.1 animateTo 基本用法animateTo({ duration: 500, curve: Curve.FastOutSlowIn }, () { this.coinY 200; // 铜钱向下移动 this.coinRotation 360; // 铜钱旋转 });二、掷钱动画实现2.1 状态变量State coinY: number -100; State coinX: number 0; State coinRotation: number 0; State coinOpacity: number 0;2.2 掷钱动画private throwCoin(): void { // 重置位置 this.coinY -100; this.coinRotation 0; this.coinOpacity 1; // 掷钱动画 animateTo( { duration: 800, curve: Curve.FastOutSlowIn }, () { this.coinY 200; this.coinRotation 720; } ); }三、UI 绑定3.1 铜钱渲染Text() .fontSize(40) .position({ x: this.coinX, y: this.coinY }) .rotate({ angle: this.coinRotation }) .opacity(this.coinOpacity) .animation({ duration: 800, curve: Curve.FastOutSlowIn })四、缓动曲线选择4.1 曲线对比曲线效果适用场景FastOutSlowIn加速抛出→减速落地掷钱动画EaseOut先快后慢元素出现EaseIn先慢后快元素消失Linear匀速持续旋转五、掷钱动画设计总结5.1 动画流程用户点击开始起卦 ↓ 重置铜钱位置上方不可见 ↓ animateTo 动画 ↓ 铜钱下落 旋转800ms ↓ 动画完成显示卦象总结本篇以玄象项目掷钱动画为蓝本深入剖析了animateTo显式动画的使用从animateTo基本用法、Curve.FastOutSlowIn缓动曲线、平移动画与旋转动画的组合到动画完成回调。掌握这套动画模拟方法论您就能为任何 HarmonyOS 应用打造物理感的交互反馈。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源HarmonyOS 官方文档animateTo开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net
