HarmonyOS NEXT应用开发案例——行程地址交换动画
介绍
本示例介绍使用显式动画 animateTo 实现左右地址交换动画。该场景多用于机票、火车票购买等出行类订票软件中。
效果预览图
使用说明
- 加载完成后显示地址交换动画页面,点击中间的图标,左右两边地址交换。
实现思路
- 创建左右两边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)
...
}
- 点击中间的图标时,修改是否切换的状态变量值和通过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 // 视图层-地址交换动画页面
模块依赖
参考资料
学习鸿蒙开发势在必行。鸿蒙开发可参考学习文档:https://qr21.cn/FV7h05
HarmonyOS NEXT应用开发案例——行程地址交换动画的更多相关文章
- 基于JWT的Token开发案例
代码地址如下:http://www.demodashi.com/demo/12531.html 0.准备工作 0-1运行环境 jdk1.8 maven 一个能支持以上两者的代码编辑器,作者使用的是ID ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享
http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享 在上四篇文章 ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之二 用户管理源码分享 在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享 ...
- 【推荐】使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享 在开始讲解之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery的U ...
- 使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享
使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...
- 使用Jquery+EasyUI 进行框架项目开发案例解说之二---用户管理源代码分享
使用Jquery+EasyUI 进行框架项目开发案例解说之二 用户管理源代码分享 在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享> ...
- 使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享
使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享 使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享 在开始讲解之前,我们先来看一下什 ...
- 知识图谱实战开发案例剖析-番外篇(1)- Neo4j是否支持按照边权重加粗和大数量展示
一.前言 本文是<知识图谱实战开发案例完全剖析>系列文章和网易云视频课程的番外篇,主要记录学员在知识图谱等相关内容的学习 过程中,提出的共性问题进行展开讨论.该部分内容原始内容记录在网易云 ...
- AllJoyn+Android开发案例-android跨设备调用方法
AllJoyn+Android开发案例-android跨设备调用方法 项目须要涉及AllJoyn开源物联网框架.前面主要了解了一些AllJoyn主要的概念.像总线,总线附件,总线对象,总线接口这种概念 ...
- 大数据技术之_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 ...
随机推荐
- 【数据结构】哈夫曼树与哈夫曼编码(Huffman Encoding)
一.背景 编码是信息处理的基础(重新表示信息). 普通的编码是等长编码,例如7位的ASCIL编码,对出现频率不同的字符都使用相同的编码长度.但其在传输和存储等情况下编码效率不高. 可使用不等长编码,来 ...
- jenkins批量复制view中所有job
需要将jenkins中某一个view中的所有job都复制到另外一个view中,一个一个复制有点蛋疼,所以查询了一下资料,使用groovy scripts 来实现这个功能 新建view 打开系统管理 - ...
- python基础十一(异常)
1.什么是异常异常是程序发生错误的信号,程序一旦出错就会抛出异常,程序的运行随即终止1)异常处理的三个特征异常的追踪信息异常的类型异常的内容2.为何处理异常为了增强程序的健壮性,即便是程序运行过程中出 ...
- 【干货】Java开发者快速上手.NET指南
前言 前几天有小伙伴在技术群里发了一个微软官方出的:适用于Java开发人员的.NET快速入门免费电子书,今天大姚来分享一下Java开发者想要快速上手.NET有哪些教程和优质资料. 微软适用于Java开 ...
- matlab学习系列
matlab系列学习 1.学习缘由 本来已经学习过这个软件,了解了包括电路仿真在内的诸多功能,能够比较熟练地编写m文件和函数. 但是,在最近的依次练习中发现之前的许多操作都忘记了.有一些基本的语法都不 ...
- redis安装启动脚本
#!/bin/bash # sudo yum install -y gcc # sudo yum install -y ruby build-essential BASE=/usr/local ps ...
- kubeadm init cannot find network namespace 错误
使用 kubeadm 安装好 weave 网络插件之后,查看 kubelet 输出信息发现如下错误: 4月 25 13:51:48 k8s-master kubelet[1232730]: I0425 ...
- 【非插件实现】wordpress网站页脚添加,网站总访问数/今日访客数
1 /** 2 * 统计全站总访问量/今日总访问量/当前是第几个访客 3 * @return [type] [description] 4 */ 5 function wb_site_count_us ...
- 突然连不上Github或者连接超时的解决办法
问题描述当进行仓库pull或者push时,报错如下(连接失败/被拒绝/超时等): Failed to connect to github.com port 443: Connection refuse ...
- #Multi-SG#BZOJ 2940 [POI2000] 条纹
题目 有\(n\)个格子,可以选择三种长度的线段覆盖,不能重叠, 无法覆盖者为负,问先手是否必胜,\(n\leq 10^3\) 分析 考虑选择一个位置覆盖则该局面分成两个局面, 直接求出SG函数不为0 ...