OpenHarmony开发实战：自定义下拉刷新动画（ArkTS，HarmonyOS鸿蒙界面开发技术

Django知识点

于 2024-04-10 03:43:04 发布

阅读量785

点赞数 27

分类专栏： 2024年程序员学习文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/m0_61943758/article/details/137576395

版权

2024年程序员学习专栏收录该内容

270 篇文章 1 订阅

订阅专栏

}
})

头部样式设置

本Codelab提供了DEFAULT默认刷新样式和CLOUD云朵动画刷新样式设置，在RefreshComponent组件初始化时，判断当前刷新样式进行渲染。

// RefreshComponent.ets
if (this.headerStyle === RefreshHeaderStyle.DEFAULT) {
RefreshDefaultHeader().height(RefreshConstants.REFRESH_HEADER_HEIGHT)
} else if (this.headerStyle === RefreshHeaderStyle.CLOUD) {
RefreshAnimHeader().height(RefreshConstants.REFRESH_HEADER_HEIGHT)
}

刷新部件样式

刷新部件样式itemLayout为嵌入RefreshComponent组件中的元素，通过@BuilderParam装饰符定义，可根据具体业务需求，当前为默认的Image组件样式。

// FileManagerIndex.ets
@Builder ContentBody() {
Image( $r('app.media.bg_content')) .width(CommonConstants.FULL_LENGTH) .height(DimensionUtil.getVp($ r(‘app.float.content_height’)))
.objectFit(ImageFit.Fill)
}

刷新回调方法设置

刷新回调方法是RefreshComponent提供的当下拉一定范围距离松手后，调用页面刷新的方法。实现步骤是：

1.设置RefreshComponent刷新组件state状态的更新。

// RefreshComponent.ets
@Consume(RefreshConstants.REFRESH_STATE_TAG) @Watch(‘onStateChanged’) state: RefreshState;
@BuilderParam itemLayout: () => void;

private onStateChanged() {
switch (this.state) {
case RefreshState.REFRESHING:
if (this.onRefresh) {
this.onRefresh();
}
break;
…
}
}

2.监听RefreshComponent组件的触摸事件，当手指松开且List组件下拉距离超出可刷新距离时，修改当前状态为REFRESHING，回调“onStateChanged”方法触发外部传入的onRefresh事件。

// RefreshComponent.ets
case TouchType.Move:
if (this.state === RefreshState.DRAGGING
&& this.listController.currentOffset().yOffset <= -RefreshConstants.REFRESH_EFFECTIVE_HEIGHT) {
this.state = RefreshState.DRAGGING_REFRESHABLE;
}
break;
case TouchType.Up:
if (this.state === RefreshState.DRAGGING_REFRESHABLE) {
this.headerOffset = 0;
this.state = RefreshState.REFRESHING;
}
break;

3.本Codelab中onRefresh事件没有做相关刷新动作，只做了模拟延时操作，开发者可以自行加入真实网络加载动作。

// RefreshComponent.ets
onRefresh: () => {
setTimeout(() => {
this.state = RefreshState.COMPLETE;
}, CommonConstants.REFRESH_DEFAULT_TIMEOUT);
}

自定义刷新动画

本Codelab中自定义刷新是5个图片的组合动画效果。

每个Image通过iconItem参数分别设置各自的x轴偏移量和延时播放的属性动画效果。

// RefreshAnimHeader.ets
@Builder AttrAnimIcons(iconItem: ClassifyModel) {
Image(iconItem.imgRes)
.width(px2vp(DimensionUtil.adaptDimension(this.iconWidth)))
.position({ x: iconItem.posX })
.objectFit(ImageFit.Contain)
.animation({
duration: CommonConstants.REFRESH_HEADER_ITEM_ANIM_DURATION,
tempo: CommonConstants.REFRESH_HEADER_ITEM_ANIM_TEMPO,
delay: iconItem.delay,
curve: Curve.Linear,
playMode: PlayMode.Alternate,
iterations: CommonConstants.REFRESH_HEADER_ITEM_ANIM_ITERATIONS
})
}

监听RefreshComponent刷新组件state状态的变化，当前状态为REFRESHING状态时，启动动画效果。

// RefreshAnimHeader.ets
@Consume(RefreshConstants.REFRESH_STATE_TAG) @Watch(‘onStateCheck’) state: RefreshState;
@State iconWidth: number = CommonConstants.REFRESH_HEADER_ITEM_DEFAULT_WIDTH;

private onStateCheck() {
if (this.state === RefreshState.REFRESHING) {
this.iconWidth = CommonConstants.REFRESH_HEADER_ITEM_SCALE_WIDTH;
} else {
this.iconWidth = CommonConstants.REFRESH_HEADER_ITEM_DEFAULT_WIDTH;
}
}

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）**技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料****