zhangbo1_wd

首页下拉刷新,结束加动画缓慢收起

... ... @@ -11,14 +11,17 @@ export default struct CustomLayout {
static readonly REFRESH_HEIGHT: number = 90;
@ObjectLink @Watch('onOffsetChange') refreshBean: RefreshLayoutBean;
private mainRenderingSettings: RenderingContextSettings = new RenderingContextSettings(true)
private mainCanvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.mainRenderingSettings)
private mainCanvasRenderingContext: CanvasRenderingContext2D =
new CanvasRenderingContext2D(this.mainRenderingSettings)
private mainRenderingSettings2: RenderingContextSettings = new RenderingContextSettings(true)
private mainCanvasRenderingContext2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.mainRenderingSettings2)
private mainCanvasRenderingContext2: CanvasRenderingContext2D =
new CanvasRenderingContext2D(this.mainRenderingSettings2)
private animateItem: AnimationItem | null = null;
private animateItem2: AnimationItem | null = null;
private animateName: string = "refresh";
private animateName2: string = "refreshing";
@State private layoutHeight: number = 0;
@State private textVisible: boolean = false
build() {
Stack({ alignContent: Alignment.Center }) {
... ... @@ -58,8 +61,13 @@ export default struct CustomLayout {
.fontColor('#676767')
.backgroundColor('#f6f6f6')
.borderRadius(20)
.padding({ left: 19, right: 19, top: 10, bottom: 10 })
.visibility(this.refreshBean.loadStatus != LoadStatus.LOADED ? Visibility.Hidden : Visibility.Visible)
.padding({
left: 19,
right: 19,
top: 10,
bottom: 10
})
.visibility(this.textVisible ? Visibility.Visible : Visibility.Hidden)
}
.clip(true)
... ... @@ -130,15 +138,32 @@ export default struct CustomLayout {
let maxH = CustomLayout.REFRESH_HEIGHT
let tmpHeight = this.refreshBean.offset > maxH ? maxH : this.refreshBean.offset
if (this.refreshBean.loadStatus === LoadStatus.LOADED) {
this.textVisible = true
if (tmpHeight <= 0) {
setTimeout(() => {
// 延时设置0,让“已更新到最新”展示
this.layoutHeight = 0
}, 1500)
this.textVisible = false
this.setHeight0WithAnimation()
}, 800)
}
} else {
// 直接设置高度
this.layoutHeight = tmpHeight
}
}
/**
* 下拉刷新UI,高度慢慢变为0
*/
setHeight0WithAnimation() {
// this.layoutHeight = 0
animateTo({
duration: 500, // 动画时长
curve: Curve.Linear, // 动画曲线
iterations: 1, // 播放次数
playMode: PlayMode.Normal, // 动画模式
}, () => {
this.layoutHeight = 0
})
}
}
\ No newline at end of file
... ...
... ... @@ -24,7 +24,7 @@ export class RefreshConstants {
*/
static readonly RefreshConstant_DELAY_PULL_DOWN_REFRESH: number = 50;
static readonly RefreshConstant_CLOSE_PULL_DOWN_REFRESH_TIME: number = 150;
static readonly RefreshConstant_DELAY_SHRINK_ANIMATION_TIME: number = 500;
static readonly RefreshConstant_DELAY_SHRINK_ANIMATION_TIME: number = 1500;
/**
* The page size.
... ...