鸿蒙HarmonyOS NEXT实战开发：地址交换动画实现案例

前端_王华QAQ

于 2024-08-08 22:06:20 发布

阅读量372

点赞数 5

分类专栏：鸿蒙next实战鸿蒙文章标签：鸿蒙鸿蒙系统 android 驱动开发嵌入式硬件 harmonyos 华为od

本文链接：https://blog.youkuaiyun.com/wanghuaQAQ/article/details/141037318

版权

介绍

本示例介绍使用显式动画 animateTo 实现左右地址交换动画。该场景多用于机票、火车票购买等出行类订票软件中。

效果预览图

address_exchange

使用说明

加载完成后显示地址交换动画页面，点击中间的图标，左右两边地址交换。

实现思路

创建左右两边Text组件显示地址。设置初始偏移量以及文本对齐方式。

Row() {
  Text($r('app.string.address_exchange_address_left'))
    .translate({ x: this.translateX })
    .width($r('app.string.address_exchange_address_width'))
    .textAlign(this.swap ? TextAlign.End : TextAlign.Start)
  ...
  Text($r('app.string.address_exchange_address_right'))
    .translate({ x: -this.translateX })
    .width($r('app.string.address_exchange_address_width'))
    .textAlign(this.swap ? TextAlign.Start : TextAlign.End)
  ...
}