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

基础动画案例

js 复制代码

@Entry
@Component
struct Index {
  @State
  btnWidth:number = 200 // 按钮的宽度
  @State
  btnHeight:number = 100 // 按钮的高度

  build() {
   Row(){
     Column(){
       Button("测试")
         .width(this.btnWidth)
         .height(this.btnHeight)

       // 按钮: 用来启动动画
       Button("动画开始")
         .onClick(()=>{
           // 写动画
           animateTo({duration:1000},()=>{
             this.btnWidth=100
             this.btnHeight=50
           })
         })
     }.width("100%")
   }.height("100%")
  }
}

动画的播放次数

js 复制代码

@Entry
@Component
struct Index {
  @State
  btnWidth:number = 200 // 按钮的宽度
  @State
  btnHeight:number = 100 // 按钮的高度

  build() {
   Row(){
     Column(){
       Button("测试")
         .width(this.btnWidth)
         .height(this.btnHeight)

       // 按钮: 用来启动动画
       Button("动画开始")
         .onClick(()=>{
           // 写动画
           // iterations: -1 表示永久, 其他表示固定次数
           animateTo({duration:1000, iterations: 3},()=>{
             this.btnWidth=100
             this.btnHeight=50
           })
         })
     }.width("100%")
   }.height("100%")
  }
}

动画的播放模式

js 复制代码

@Entry
@Component
struct Index {
  @State
  btnWidth:number = 200 // 按钮的宽度
  @State
  btnHeight: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=100
             this.btnHeight=50
           })
         })
     }.width("100%")
   }.height("100%")
  }
}

animation动画

js 复制代码

@Entry
@Component
struct Index {
  @State
  btnWidth:number = 200 // 按钮的宽度
  @State
  btnHeight:number = 100 // 按钮的高度

  build() {
   Row(){
     Column(){
       Button("测试")
         .width(this.btnWidth)
         .height(this.btnHeight)
         .animation({
           duration:1000,
           iterations: -1,
           playMode:PlayMode.Alternate
         })

       // 按钮: 用来启动动画
       Button("动画开始")
         .onClick(()=>{
             this.btnWidth=100
             this.btnHeight=50
         })
     }.width("100%")
   }.height("100%")
  }
}

scale缩放动画

js 复制代码

@Entry
@Component
struct Index {
  @State
  btnWidth:number = 200 // 按钮的宽度
  @State
  btnHeight:number = 100 // 按钮的高度
  @State
  btnScale: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%")
  }
}

显示隐藏动画

js 复制代码

@Entry
@Component
struct Index {
  @State
  message:string = "你好, 张大鹏!"
  @State
  isShowMessage:boolean = true

  build() {
   Row(){
     Column(){
       // 固定高度的Column
       Column(){
         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%")
  }
}

弹出模态框

js 复制代码

@Entry
@Component
struct Index {
  @State
  isShowDialog:boolean = false

  // 模态框内容
  @Builder
  getContent(){
    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, // 绑定模态框
    )
  }
}

弹出倒计时广告

js 复制代码

@Entry
@Component
struct Index {
  @State
  isShowDialog: boolean = false
  @State
  timerCount: 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) // 防止定时器没有及时清理
  }

  // 模态框内容
  @Builder
  getContent() {
    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, // 取消模态框动画
      }
    )
  }
}