示例工程【免费下载链接】harmonyos-tutorialHarmonyOS Tutorial. 《跟老卫学HarmonyOS开发》项目地址https://gitcode.com/GitHub_Trending/ha/harmonyos-tutorial点击查看免费下载导读本文以《跟老卫学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(): ArrayImageData { let imageDataArray: ArrayImageData [ { 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 倍突出被选中/被点赞的视觉反馈未点赞时回到 1opacity半透明反馈点赞后透明度降至 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, ...)加载。运行该示例需要以下环境与步骤准备 DevEco Studio支持 HarmonyOS 应用开发的 IDE并完成 HarmonyOS SDK 配置在 IDE 中打开仓库根目录下的samples/GiveThumbsUp工程使用 DevEco Studio 内置的 Hvigor 构建工具工程根目录 hvigorfile.ts 与 entry 模块 hvigorfile.ts 为默认构建脚本完成同步与编译连接真机或启动模拟器后点击 Run 运行即可在手机端体验点赞翻牌与更换图片的完整动效。工程内还包含 Ability.test.ets 等测试文件采用ohos/hypium测试框架可在 DevEco Studio 中执行 ohosTest 测试套件验证工程基础运行能力。小结GiveThumbsUp 示例用极简的代码量展示了 ArkUI 隐式动画的精髓通过State状态变量驱动rotate、scale、opacity三个属性协同变化再用.animation()统一编排时长、曲线与播放方式即可实现点赞翻牌这类富交互动效。开发者可以在此基础上自由调整旋转轴如改为 X 轴实现水平翻转、放大倍数、透明度与缓动曲线快速衍生出卡片翻转、选中高亮、轮播切换等更多动效场景。该示例源码位于 samples/GiveThumbsUp可作为 ArkUI 动画开发的直接参考模板。赞分享示例工程【免费下载链接】harmonyos-tutorialHarmonyOS Tutorial. 《跟老卫学HarmonyOS开发》项目地址https://gitcode.com/GitHub_Trending/ha/harmonyos-tutorial点击查看免费下载相关推荐antd Steps 步骤切换实战基于 current 状态与按钮驱动多步流程antd Steps 步骤切换实战基于 current 状态与按钮驱动多步流程 导读 在 Ant Design 的 Steps 步骤条组件中步骤切换s前端UI组件设计系统如何实现Android超炫点赞动画Twitter风格点赞按钮完整指南如何实现Android超炫点赞动画Twitter风格点赞按钮完整指南 LikeAnimation是一款专为Android平台设计的点赞动画库它能帮助开发者轻YouTube.js ToggleButtonView 解析从点赞/点踩到订阅的可切换按钮节点原理与实战YouTube.js ToggleButtonView 解析从点赞/点踩到订阅的可切换按钮节点原理与实战 ToggleButtonView 是 YouTube后端上一篇ViGEmBus虚拟控制器完整使用指南快速解决多平台游戏兼容问题下一篇YOLOv5中文车牌识别支持12种车牌类型的智能检测方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考