鸿蒙OS开发之动画相关示例分享, 关于弹出倒计时动画的实战案例源码分享

基础动画案例

@Entry
@Component
struct Index {@StatebtnWidth:number = 200 // 按钮的宽度@StatebtnHeight:number = 100 // 按钮的高度build() {Row(){Column(){Button("测试").width(this.btnWidth).height(this.btnHeight)// 按钮: 用来启动动画Button("动画开始").onClick(()=>{// 写动画animateTo({duration:1000},()=>{this.btnWidth=100this.btnHeight=50})})}.width("100%")}.height("100%")}
}

动画的播放次数

@Entry
@Component
struct Index {@StatebtnWidth:number = 200 // 按钮的宽度@StatebtnHeight:number = 100 // 按钮的高度build() {Row(){Column(){Button("测试").width(this.btnWidth).height(this.btnHeight)// 按钮: 用来启动动画Button("动画开始").onClick(()=>{// 写动画// iterations: -1 表示永久, 其他表示固定次数animateTo({duration:1000, iterations: 3},()=>{this.btnWidth=100this.btnHeight=50})})}.width("100%")}.height("100%")}
}

动画的播放模式

@Entry
@Component
struct Index {@StatebtnWidth:number = 200 // 按钮的宽度@StatebtnHeight:number = 100 // 按钮的高度build() {Row(){Column(){Button("测试").width(this.btnWidth).height(this.btnHeight)// 按钮: 用来启动动画Button("动画开始").onClick(()=>{// 写动画// iterations: -1 表示永久, 其他表示固定次数// playMode: Reverse 反向 Alternate反复animateTo({duration:1000, iterations: -1, playMode:PlayMode.Alternate},()=>{this.btnWidth=100this.btnHeight=50})})}.width("100%")}.height("100%")}
}

animation动画

@Entry
@Component
struct Index {@StatebtnWidth:number = 200 // 按钮的宽度@StatebtnHeight:number = 100 // 按钮的高度build() {Row(){Column(){Button("测试").width(this.btnWidth).height(this.btnHeight).animation({duration:1000,iterations: -1,playMode:PlayMode.Alternate})// 按钮: 用来启动动画Button("动画开始").onClick(()=>{this.btnWidth=100this.btnHeight=50})}.width("100%")}.height("100%")}
}

scale缩放动画

@Entry
@Component
struct Index {@StatebtnWidth:number = 200 // 按钮的宽度@StatebtnHeight:number = 100 // 按钮的高度@StatebtnScale:number = 1; // 缩放build() {Row(){Column(){Button("测试").width(this.btnWidth).height(this.btnHeight).scale({x: this.btnScale,y: this.btnScale,}).animation({duration:1000,iterations: -1,playMode:PlayMode.Alternate})// 按钮: 用来启动动画Button("动画开始").onClick(()=>{this.btnScale *= 2})}.width("100%")}.height("100%")}
}

显示隐藏动画

@Entry
@Component
struct Index {@Statemessage:string = "你好, 张大鹏!"@StateisShowMessage:boolean = truebuild() {Row(){Column(){// 固定高度的ColumnColumn(){if(this.isShowMessage){Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}}.height(50)// 按钮, 控制Button("显示/隐藏").onClick(()=>{animateTo({duration:1000},()=>{this.isShowMessage=!this.isShowMessage})})}.width("100%")}.height("100%")}
}

弹出模态框

@Entry
@Component
struct Index {@StateisShowDialog:boolean = false// 模态框内容@BuildergetContent(){Column(){Text("测试").fontColor(Color.White)}.justifyContent(FlexAlign.Center).backgroundColor(Color.Blue).width("100%").height("100%")}build() {Row(){Button("显示/隐藏").onClick(()=>{this.isShowDialog=!this.isShowDialog})}.height("100%").bindContentCover($$this.isShowDialog, // 模态框弹出条件this.getContent, // 绑定模态框)}
}

弹出倒计时广告

@Entry
@Component
struct Index {@StateisShowDialog: boolean = false@StatetimerCount: number = 5 // 默认5秒倒计时关闭广告timer: number = -1 // 定时器// 开始倒计时beginTimerCount() {this.timer = setInterval(() => {if (this.timerCount === 0) {clearInterval(this.timer)this.timerCount = 5 // 重置计时器this.isShowDialog = false // 关闭模态框}this.timerCount--}, 1000)}// 生命周期方法: 页面消失之前aboutToDisappear(): void {clearInterval(this.timer) // 防止定时器没有及时清理}// 模态框内容@BuildergetContent() {Column() {// 右上角Row() {Text(`还剩${this.timerCount}秒`).fontColor(Color.White)}.width("100%").justifyContent(FlexAlign.End).padding(10)}.backgroundColor(Color.Blue).width("100%").height("100%")}build() {Row() {Button("显示").onClick(() => {this.isShowDialog = true // 显示模态框this.beginTimerCount() // 开始倒计时})}.height("100%").bindContentCover($$this.isShowDialog, // 模态框弹出条件this.getContent, // 绑定模态框{modalTransition: ModalTransition.NONE, // 取消模态框动画})}
}