添加loading 动画

fix web跳转
This commit is contained in:
DevWiki 2024-05-31 14:05:54 +08:00
parent e55bf2535c
commit 172581dff7
2 changed files with 21 additions and 11 deletions

View File

@ -6,27 +6,35 @@ import { curves } from '@kit.ArkUI';
@Component
export struct LoadingPage {
@State animate: boolean = false;
// 第一步: 声明相关状态变量
@State rotateValue: number = 0; // 组件一旋转角度
@State rotateValue: number = 0;
@Prop @Watch('onVisibleChanged')visible: boolean = false;
onVisibleChanged() {
if (this.visible) {
this.animate = true;
// 组件一的rotate属性发生变化所以会给组件一添加rotate旋转动画
this.rotateValue = this.animate ? 360 : 0;
}else {
this.animate = false;
}
}
build() {
Column() {
Image(CommonRes.getImage('ic_loading'))
.rotate({ angle: this.rotateValue })
.width(32)
.height(32)
.fillColor('#2196F3')
.width(32).height(32).fillColor('#2196F3')
.animation({
curve: curves.initCurve(Curve.Linear),
playMode: PlayMode.Normal,
iterations: -1,
})
.onAppear(() => {
this.animate = !this.animate;
// 组件一的rotate属性发生变化所以会给组件一添加rotate旋转动画
this.rotateValue = this.animate ? 360 : 0;
})
duration: 1000
}).visibility(this.visible ? Visibility.Visible : Visibility.None)
Button('change').width('60%').height(36).onClick(() =>{
this.visible = !this.visible;
}).margin({top: 24})
}.width('100%').height('100%').justifyContent(FlexAlign.Center)
}
}

View File

@ -22,6 +22,8 @@ export struct SchemePage {
openScheme() {
let context = getContext(this) as common.UIAbilityContext;
let wantInfo: Want = {
action: 'ohos.want.action.viewData',
entities: ['entity.system.browsable'],
uri: 'https://devwiki.net'
}
context.startAbility(wantInfo);