鸿蒙5.0开发进阶：舆图大头针选择位置并显示弹窗组件实现案例
往期鸿蒙全套实战文章必看：（文中附带鸿蒙全栈学习资料）[*] 鸿蒙开发核心知识点，看这篇文章就够了
[*] 最新版！鸿蒙HarmonyOS Next应用开发实战学习门路
[*] 鸿蒙HarmonyOS NEXT开发技能最全学习门路指南
[*] 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
介绍
本示例提供了大头针选择位置并显示弹窗组件的办理方案。该大头针组件分为三个状态，分别是静止态（舆图移动过程中，大头针无动画）、加载态（舆图制止移动，等待获取所在信息，大头针展示波纹动画表示数据加载中）、显示态（数据加载完成，弹窗显示所在相干信息）。开发者可根据需要直接引入该组件，根据具体使用场景，传入差别的数据，组件根据传入数据的环境显示差别的状态。由于使用场景中，大头针动画需要随时制止，因此选用@ohos.animator实现大头针的波纹和跳动动画。
结果预览图
https://img-blog.csdnimg.cn/img_convert/14ad8149589b9ad5b66d5d0bdcd37fe5.gif
使用说明
该大头针选择位置并显示弹窗组件入参详细说明如下：
[*]thumbTackState：用于设置大头针状态，ThumbTackState.EMPTY、ThumbTackState.LOADING、ThumbTackState.SHOWING。
[*]address：组件处于ThumbTackState.SHOWING状态时，需要显示的所在文本；组件处于其他状态时，需设置为null。
[*]tip：组件处于ThumbTackState.SHOWING状态时，需要显示的当前所在的一些提示，组件处于其他状态或无提示文本时，需设置为null。
[*]tipBackgroundColor：组件处于ThumbTackState.SHOWING状态时，提示文本的背景色。
[*]addrImage：组件处于ThumbTackState.SHOWING状态时，要展示的所在实景图，组件处于其他状态或无实景图时，需设置为null。
[*]onImageClickCallback：实景图被点击时回调
[*]onAddrClickCallback：所在被点击时回调
[*]thumbTackWidth：用于设置大头针的宽度
[*]animationFinishCallback：大头针跳动动画结束时回调
实现思路
场景：大头针选择位置并显示弹窗组件
[*]通过原生组件组合实现大头针图标。
RelativeContainer() {
Column()
...
.zIndex(0)
.alignRules({
bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
.id('invisiblePost')
Column()
...
.alignRules({
bottom: { anchor: 'invisiblePost', align: VerticalAlign.Top },
middle: { anchor: 'invisiblePost', align: HorizontalAlign.Center }
})
.id('tackPost')
Button()
...
.alignRules({
center: { anchor: 'tackPost', align: VerticalAlign.Top },
middle: { anchor: 'tackPost', align: HorizontalAlign.Center }
})
if ((this.thumbTackState === ThumbTackState.LOADING)) {
Button()
...
.id('little1Circle')
.zIndex(this.whiteHatZIdx)
.alignRules({
center: { anchor: 'tackPost', align: VerticalAlign.Top },
middle: { anchor: 'tackPost', align: HorizontalAlign.Center }
})
}
}
[*]通过@ohos.animator控制大头针的波纹动画及跳动动画。
// 跳动动画
createVerticalPostAnimation() {
this.postOffsetAnimator = animator.create({
// 100, 大头针针尖位置偏移动画持续时间100ms
duration: 100,
easing: 'fast-out-slow-in',
// 200, 动画延时200ms执行
delay: 200,
fill: 'forwards',
direction: 'alternate',
iterations: 2,
begin: 0,
end: this.thumbTackWidth * ThumbTackCommonConstants.TACK_POST_ANIMATION_OFFSET_RATIO
})
...
this.postOffsetAnimator.onFrame = (value) => {
this.tackPostOffset = value;
}
this.postHeightAnimator = animator.create({
// 大头针针柄长度动画持续200ms
duration: 200,
easing: 'fast-out-slow-in',
delay: 0,
fill: 'forwards',
direction: 'alternate',
iterations: 2,
begin: this.thumbTackWidth * ThumbTackCommonConstants.TACK_POST_HEIGHT_RATIO,
end: this.thumbTackWidth * ThumbTackCommonConstants.TACK_POST_ANIMATION_HEIGHT_RATIO
})
...
this.postHeightAnimator.onFrame = (value) => {
this.tackPostHeight = value;
}
}
[*]通过Path实现所在提示地区的不规则边框。
// this.pathCmd = 'M0 0 C' + vp2px(2.5) + ' ' + vp2px(0) + ' ' + vp2px(5.6) + ' ' + vp2px(2.4) + ' '
//+ vp2px(6.2) + ' ' + vp2px(4.9) + ' L' + vp2px(10) + ' ' + vp2px(20) + ' L0 ' + vp2px(20) + 'Z';
Path({
width: AddressPopupCommonConstants.TIP_AREA_HEIGHT,
height: AddressPopupCommonConstants.TIP_AREA_HEIGHT,
commands: this.pathCmd
})
.fill(this.addressTipBackgroundColor)
.strokeOpacity(0) 高性能知识点
不涉及
工程结构&模块类型
mapthumbtack // har类型
|---src/main/ets/components
| |---LocationAndPopupComponent.ets // 视图层-大头针选择位置并显示弹窗组件
| |---AddressPopUpComponent.ets // 视图层-依赖的地址显示组件
| |---ThumbTackComponent.ets // 视图层-依赖的大头针组件
|---src/main/ets/model
| |---CommonConstants.ets // 模型层-通用常量 https://i-blog.csdnimg.cn/direct/212f113f9d1044c59789fee1fea75c17.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]