鸿蒙(HarmonyOS)应用开发实战——地址交换动画

CTrup

于 2024-09-29 21:00:23 发布

阅读量656

点赞数 15

分类专栏： HarmonyOS 鸿蒙开发移动开发文章标签： harmonyos 华为 ArkWeb 移动开发鸿蒙开发 ArkUI 组件化

本文链接：https://blog.csdn.net/CTrup/article/details/142643627

版权

鸿蒙开发同时被 3 个专栏收录

223 篇文章 0 订阅

订阅专栏

移动开发

223 篇文章 1 订阅

订阅专栏

HarmonyOS

185 篇文章 0 订阅

订阅专栏

往期知识点整理

介绍

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

效果预览图

使用说明

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

实现思路

创建左右两边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)
  ...
}

点击中间的图标时，修改是否切换的状态变量值和通过animateTo修改偏移量的值，来实现动态更新左右两边地址的显示，完成动画效果。

Stack() {
  Image($r('app.media.address_exchange_airplane'))
    .size({
        height: $r('app.integer.address_exchange_airplane_size'),
        width: $r('app.integer.address_exchange_airplane_size')
    })
  Image($r('app.media.address_exchange_recycle'))
    .size({
        height: $r('app.integer.address_exchange_recycle_size'),
        width: $r('app.integer.address_exchange_recycle_size')
    })
    .rotate({ angle: this.rotateAngle })
    .animation({
        curve: Curve.EaseOut,
        playMode: PlayMode.Normal,
    })
}
  .width($r('app.string.address_exchange_image_width'))
  .onClick(() => {
    this.swap = !this.swap
    animateTo({ curve: curves.springMotion() }, () => {
        if (this.swap) {
            this.translateX = this.distance;
        } else {
            this.translateX = this.zeroTranslate;
        }
    })
    this.rotateAngle += this.rotateAddAngle;
  })

工程结构&模块类型

   addressexchange                                            // har类型
   |---view
   |   |---AddressExchangeView.ets                            // 视图层-地址交换动画页面