企业官网建设流程全解析

• 示例工程

导读

本文以《跟老卫学HarmonyOS开发》开源仓库中的 GiveThumbsUp 示例为切入点，完整讲解如何在 HarmonyOS ArkUI 中实现"点赞翻牌"交互动效：点击"点赞"按钮，美女图片以绕 Y 轴旋转 360°、放大并降低透明度的方式完成"翻牌"效果；点击"更换"按钮则切换图片并复位状态。文章将逐行拆解 Index.ets 的动画参数与状态驱动逻辑，并结合数据模型、工程配置与测试代码，帮助读者掌握 ArkUI 声明式动画（rotate/scale/opacity组合）的实战写法。

效果演示与项目结构

GiveThumbsUp 是仓库中面向 ArkUI 动画实战的完整示例工程，其实现效果（点赞后图片翻牌、更换后图片轮换）可通过工程内的演示动图直观查看：

从工程目录结构（见 GiveThumbsUp）可以看到，这是一个标准的 Stage 模型 ArkTS 工程，核心代码集中在两个文件中：

• entry/src/main/ets/pages/Index.ets：页面主入口，包含完整的翻牌动效实现；
• entry/src/main/ets/model/ImageData.ets：图片数据模型，维护图片资源与名称。

工程还内置了 ohosTest 单元测试与测试专用 Ability，说明该示例同时兼顾了可运行的演示代码与基础测试覆盖。

翻牌动效的数据模型：ImageData

翻牌动效需要在一组图片之间轮换展示，因此示例先定义一个轻量数据模型来封装图片信息。ImageData.ets 中定义了三个字段：

export class ImageData { id: string // 图片唯一标识 img: Resource // 图片资源 name: string // 图片名称 }

其中img的类型是Resource，即 ArkUI 中通过$r('app.media.xxx')引用的资源对象，而不是普通字符串路径。这种写法可以保证资源随包发布、在资源变更时自动适配，是 ArkUI 引用媒体资源的推荐方式。

在页面底部，initializeImageData()函数负责初始化三张候选图片：

export function initializeImageData(): Array<ImageData> { let imageDataArray: Array<ImageData> = [ { "id": "0", "img": $r('app.media.pic01'), "name": '女1' }, { "id": "1", "img": $r('app.media.pic02'), "name": '女2' }, { "id": "2", "img": $r('app.media.pic03'), "name": '女3' }, ] return imageDataArray }

这里$r('app.media.pic01')等资源 ID 对应entry/src/main/resources下的媒体资源，实际开发中替换为自己的图片资源即可。

页面整体布局：图片展示区与操作按钮区

Index.ets 使用两个Row组件将页面划分为上下两个区域：

• 上方图片展示区：高度占比93%，居中展示当前选中的图片，并附加了 1px 边框用于可视化分区；
• 下方操作按钮区：高度占比7%，内部再以两个宽度30%的Row容纳"点赞"与"更换"两个按钮。

按钮统一使用ButtonType.Normal类型、圆角 8、背景色0x317aff、宽度 90，风格一致。两个按钮分别通过onClick事件绑定不同的状态逻辑，构成整个动效的交互入口。

翻牌动效核心：rotate、scale、opacity 三属性联动

点赞翻牌效果的关键在于图片组件上同时挂载的三个属性：

Image(this.imageSrc[this.imageIndex].img) .rotate({ x: 0, y: 1, z: 0, angle: this.itemClicked ? 360 : 0 }) .scale( this.itemClicked ? { x: 1.4, y: 1.4 } : { x: 1, y: 1 } ) .opacity(this.itemClicked ? 0.6 : 1) .animation({ delay: 10, duration: 1000, iterations: 1, curve: Curve.Smooth, playMode: PlayMode.Normal });

各属性含义如下：

• rotate（绕 Y 轴翻牌）：x: 0, y: 1, z: 0表示旋转轴为 Y 轴（垂直轴），angle在 0 与 360 之间切换。点赞后图片绕 Y 轴旋转一整圈，视觉上形成"翻牌"效果。这里的旋转轴向量是归一化的方向向量，例如y: 1即绕竖直轴旋转，这也是"翻牌"区别于普通平面旋转的关键；
• scale（放大强调）：点赞后x、y同时放大到 1.4 倍，突出"被选中/被点赞"的视觉反馈，未点赞时回到 1；
• opacity（半透明反馈）：点赞后透明度降至 0.6，与放大、旋转共同营造"翻牌瞬间的卡片质感"；
• animation（动画编排）：duration: 1000指定动画持续 1 秒，delay: 10设置极短延迟，iterations: 1表示单次执行，curve: Curve.Smooth采用平滑缓动曲线，playMode: PlayMode.Normal按正常方向播放。

需要特别强调的是：ArkUI 的.animation()不是命令式动画，而是隐式动画（属性动画）——只要绑定的状态变量发生变化，系统就会自动按照animation中配置的参数，把属性从旧值平滑过渡到新值，开发者无需手动调用 start/stop。这正是本示例"点击按钮→修改itemClicked状态→属性自动动起来"的实现原理。

状态驱动：两个布尔量/索引量撑起整套交互

页面中定义了两个状态变量：

@State imageIndex: number = 0; // 当前展示的图片下标 @State itemClicked: boolean = false; // 是否处于"已点赞"状态

• 点赞按钮：onClick中执行this.itemClicked = !this.itemClicked;，翻转点赞状态。状态一旦变化，rotate/scale/opacity三个属性的目标值随之切换，触发动画播放。再次点击则动画反向，实现"取消点赞/再次点赞"的往复效果；
• 更换按钮：onClick中先将imageIndex自增，越界时回绕到 0，实现三张图片的循环轮换；同时将itemClicked复位为false，保证切换后的新图片回到未点赞的初始状态：

this.imageIndex ++; if (this.imageIndex >= this.imageSrc.length) { this.imageIndex = 0; } this.itemClicked = false;

由于Image的src绑定的是this.imageSrc[this.imageIndex].img，图片下标变化后组件会自动刷新为新资源，并配合复位后的动画属性重新播放初始状态。整套逻辑完全由@State驱动，符合 ArkUI "状态驱动 UI" 的声明式开发范式，无需任何手动 DOM 操作。

工程配置与运行方式

从 AppScope/app.json5 可以看到该应用的包名为com.waylau.hmos.givethumbsup，版本1.0.0，设备类型限定为手机（见 module.json5 中deviceTypes: ["phone"]）。页面由 EntryAbility.ts 通过windowStage.loadContent('pages/Index', ...)加载。

运行该示例需要以下环境与步骤：

1. 准备 DevEco Studio（支持 HarmonyOS 应用开发的 IDE）并完成 HarmonyOS SDK 配置；
2. 在 IDE 中打开仓库根目录下的samples/GiveThumbsUp工程；
3. 使用 DevEco Studio 内置的 Hvigor 构建工具（工程根目录 hvigorfile.ts 与 entry 模块 hvigorfile.ts 为默认构建脚本）完成同步与编译；
4. 连接真机或启动模拟器后点击 Run 运行，即可在手机端体验点赞翻牌与更换图片的完整动效。

工程内还包含 Ability.test.ets 等测试文件，采用@ohos/hypium测试框架，可在 DevEco Studio 中执行 ohosTest 测试套件验证工程基础运行能力。

小结

GiveThumbsUp 示例用极简的代码量展示了 ArkUI 隐式动画的精髓：通过@State状态变量驱动rotate、scale、opacity三个属性协同变化，再用.animation()统一编排时长、曲线与播放方式，即可实现"点赞翻牌"这类富交互动效。开发者可以在此基础上自由调整旋转轴（如改为 X 轴实现水平翻转）、放大倍数、透明度与缓动曲线，快速衍生出卡片翻转、选中高亮、轮播切换等更多动效场景。该示例源码位于 samples/GiveThumbsUp，可作为 ArkUI 动画开发的直接参考模板。

• 示例工程