介绍

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

效果预览图

使用说明

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

实现思路

  1. 创建左右两边Text组件显示地址。设置初始偏移量以及文本对齐方式。源码参考AddressExchangeView.ets
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)
...
}
  1. 点击中间的图标时,修改是否切换的状态变量值和通过animateTo修改偏移量的值,来实现动态更新左右两边地址的显示,完成动画效果。源码参考AddressExchangeView.ets
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 // 视图层-地址交换动画页面

模块依赖

utils

参考资料

显式动画

学习鸿蒙开发势在必行。鸿蒙开发可参考学习文档:https://qr21.cn/FV7h05

HarmonyOS NEXT应用开发案例——行程地址交换动画的更多相关文章

  1. 基于JWT的Token开发案例

    代码地址如下:http://www.demodashi.com/demo/12531.html 0.准备工作 0-1运行环境 jdk1.8 maven 一个能支持以上两者的代码编辑器,作者使用的是ID ...

  2. 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享

    http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五  模块(菜单)管理源码分享    在上四篇文章 ...

  3. 使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之二 用户管理源码分享   在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享 ...

  4. 【推荐】使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享   在开始讲解之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery的U ...

  5. 使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享

    使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...

  6. 使用Jquery+EasyUI 进行框架项目开发案例解说之二---用户管理源代码分享

    使用Jquery+EasyUI 进行框架项目开发案例解说之二 用户管理源代码分享  在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享> ...

  7. 使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享

    使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享 使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享    在开始讲解之前,我们先来看一下什 ...

  8. 知识图谱实战开发案例剖析-番外篇(1)- Neo4j是否支持按照边权重加粗和大数量展示

    一.前言 本文是<知识图谱实战开发案例完全剖析>系列文章和网易云视频课程的番外篇,主要记录学员在知识图谱等相关内容的学习 过程中,提出的共性问题进行展开讨论.该部分内容原始内容记录在网易云 ...

  9. AllJoyn+Android开发案例-android跨设备调用方法

    AllJoyn+Android开发案例-android跨设备调用方法 项目须要涉及AllJoyn开源物联网框架.前面主要了解了一些AllJoyn主要的概念.像总线,总线附件,总线对象,总线接口这种概念 ...

  10. 大数据技术之_09_Flume学习_Flume概述+Flume快速入门+Flume企业开发案例+Flume监控之Ganglia+Flume高级之自定义MySQLSource+Flume企业真实面试题(重点)

    第1章 Flume概述1.1 Flume定义1.2 Flume组成架构1.2.1 Agent1.2.2 Source1.2.3 Channel1.2.4 Sink1.2.5 Event1.3 Flum ...

随机推荐

  1. 【数据结构】哈夫曼树与哈夫曼编码(Huffman Encoding)

    一.背景 编码是信息处理的基础(重新表示信息). 普通的编码是等长编码,例如7位的ASCIL编码,对出现频率不同的字符都使用相同的编码长度.但其在传输和存储等情况下编码效率不高. 可使用不等长编码,来 ...

  2. jenkins批量复制view中所有job

    需要将jenkins中某一个view中的所有job都复制到另外一个view中,一个一个复制有点蛋疼,所以查询了一下资料,使用groovy scripts 来实现这个功能 新建view 打开系统管理 - ...

  3. python基础十一(异常)

    1.什么是异常异常是程序发生错误的信号,程序一旦出错就会抛出异常,程序的运行随即终止1)异常处理的三个特征异常的追踪信息异常的类型异常的内容2.为何处理异常为了增强程序的健壮性,即便是程序运行过程中出 ...

  4. 【干货】Java开发者快速上手.NET指南

    前言 前几天有小伙伴在技术群里发了一个微软官方出的:适用于Java开发人员的.NET快速入门免费电子书,今天大姚来分享一下Java开发者想要快速上手.NET有哪些教程和优质资料. 微软适用于Java开 ...

  5. matlab学习系列

    matlab系列学习 1.学习缘由 本来已经学习过这个软件,了解了包括电路仿真在内的诸多功能,能够比较熟练地编写m文件和函数. 但是,在最近的依次练习中发现之前的许多操作都忘记了.有一些基本的语法都不 ...

  6. redis安装启动脚本

    #!/bin/bash # sudo yum install -y gcc # sudo yum install -y ruby build-essential BASE=/usr/local ps ...

  7. kubeadm init cannot find network namespace 错误

    使用 kubeadm 安装好 weave 网络插件之后,查看 kubelet 输出信息发现如下错误: 4月 25 13:51:48 k8s-master kubelet[1232730]: I0425 ...

  8. 【非插件实现】wordpress网站页脚添加,网站总访问数/今日访客数

    1 /** 2 * 统计全站总访问量/今日总访问量/当前是第几个访客 3 * @return [type] [description] 4 */ 5 function wb_site_count_us ...

  9. 突然连不上Github或者连接超时的解决办法

    问题描述当进行仓库pull或者push时,报错如下(连接失败/被拒绝/超时等): Failed to connect to github.com port 443: Connection refuse ...

  10. #Multi-SG#BZOJ 2940 [POI2000] 条纹

    题目 有\(n\)个格子,可以选择三种长度的线段覆盖,不能重叠, 无法覆盖者为负,问先手是否必胜,\(n\leq 10^3\) 分析 考虑选择一个位置覆盖则该局面分成两个局面, 直接求出SG函数不为0 ...