ToB企服应用市场:ToB评测及商务社交产业平台

标题: 鸿蒙OS开发之动画相干示例分享, 关于弹出倒计时动画的实战案例源码分享 [打印本页]
作者: 农妇山泉一亩田    时间: 2024-10-3 09:13
标题: 鸿蒙OS开发之动画相干示例分享, 关于弹出倒计时动画的实战案例源码分享
底子动画案例

  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State
  5.   btnWidth:number = 200 // 按钮的宽度
  6.   @State
  7.   btnHeight:number = 100 // 按钮的高度
  9.   build() {
  10.    Row(){
  11.      Column(){
  12.        Button("测试")
  13.          .width(this.btnWidth)
  14.          .height(this.btnHeight)
  16.        // 按钮: 用来启动动画
  17.        Button("动画开始")
  18.          .onClick(()=>{
  19.            // 写动画
  20.            animateTo({duration:1000},()=>{
  21.              this.btnWidth=100
  22.              this.btnHeight=50
  23.            })
  24.          })
  25.      }.width("100%")
  26.    }.height("100%")
  27.   }
  28. }
复制代码
动画的播放次数

  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State
  5.   btnWidth:number = 200 // 按钮的宽度
  6.   @State
  7.   btnHeight:number = 100 // 按钮的高度
  9.   build() {
  10.    Row(){
  11.      Column(){
  12.        Button("测试")
  13.          .width(this.btnWidth)
  14.          .height(this.btnHeight)
  16.        // 按钮: 用来启动动画
  17.        Button("动画开始")
  18.          .onClick(()=>{
  19.            // 写动画
  20.            // iterations: -1 表示永久, 其他表示固定次数
  21.            animateTo({duration:1000, iterations: 3},()=>{
  22.              this.btnWidth=100
  23.              this.btnHeight=50
  24.            })
  25.          })
  26.      }.width("100%")
  27.    }.height("100%")
  28.   }
  29. }
复制代码
动画的播放模式

  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State
  5.   btnWidth:number = 200 // 按钮的宽度
  6.   @State
  7.   btnHeight:number = 100 // 按钮的高度
  9.   build() {
  10.    Row(){
  11.      Column(){
  12.        Button("测试")
  13.          .width(this.btnWidth)
  14.          .height(this.btnHeight)
  16.        // 按钮: 用来启动动画
  17.        Button("动画开始")
  18.          .onClick(()=>{
  19.            // 写动画
  20.            // iterations: -1 表示永久, 其他表示固定次数
  21.            // playMode: Reverse 反向 Alternate反复
  22.            animateTo({duration:1000, iterations: -1, playMode:PlayMode.Alternate},()=>{
  23.              this.btnWidth=100
  24.              this.btnHeight=50
  25.            })
  26.          })
  27.      }.width("100%")
  28.    }.height("100%")
  29.   }
  30. }
复制代码
animation动画

  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State
  5.   btnWidth:number = 200 // 按钮的宽度
  6.   @State
  7.   btnHeight:number = 100 // 按钮的高度
  9.   build() {
  10.    Row(){
  11.      Column(){
  12.        Button("测试")
  13.          .width(this.btnWidth)
  14.          .height(this.btnHeight)
  15.          .animation({
  16.            duration:1000,
  17.            iterations: -1,
  18.            playMode:PlayMode.Alternate
  19.          })
  21.        // 按钮: 用来启动动画
  22.        Button("动画开始")
  23.          .onClick(()=>{
  24.              this.btnWidth=100
  25.              this.btnHeight=50
  26.          })
  27.      }.width("100%")
  28.    }.height("100%")
  29.   }
  30. }
复制代码
scale缩放动画

  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State
  5.   btnWidth:number = 200 // 按钮的宽度
  6.   @State
  7.   btnHeight:number = 100 // 按钮的高度
  8.   @State
  9.   btnScale:number = 1; // 缩放
  11.   build() {
  12.    Row(){
  13.      Column(){
  14.        Button("测试")
  15.          .width(this.btnWidth)
  16.          .height(this.btnHeight)
  17.          .scale({
  18.            x: this.btnScale,
  19.            y: this.btnScale,
  20.          })
  21.          .animation({
  22.            duration:1000,
  23.            iterations: -1,
  24.            playMode:PlayMode.Alternate
  25.          })
  27.        // 按钮: 用来启动动画
  28.        Button("动画开始")
  29.          .onClick(()=>{
  30.              this.btnScale *= 2
  31.          })
  32.      }.width("100%")
  33.    }.height("100%")
  34.   }
  35. }
复制代码
显示隐蔽动画

  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State
  5.   message:string = "你好, 张大鹏!"
  6.   @State
  7.   isShowMessage:boolean = true
  9.   build() {
  10.    Row(){
  11.      Column(){
  12.        // 固定高度的Column
  13.        Column(){
  14.          if(this.isShowMessage){
  15.            Text(this.message)
  16.              .fontSize(50)
  17.              .fontWeight(FontWeight.Bold)
  18.          }
  19.        }.height(50)
  21.        // 按钮, 控制
  22.        Button("显示/隐藏")
  23.          .onClick(()=>{
  24.            animateTo({duration:1000},()=>{
  25.              this.isShowMessage=!this.isShowMessage
  26.            })
  27.          })
  28.      }.width("100%")
  29.    }.height("100%")
  30.   }
  31. }
复制代码
弹出模态框

  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State
  5.   isShowDialog:boolean = false
  7.   // 模态框内容
  8.   @Builder
  9.   getContent(){
  10.     Column(){
  11.       Text("测试")
  12.         .fontColor(Color.White)
  13.     }
  14.     .justifyContent(FlexAlign.Center)
  15.     .backgroundColor(Color.Blue)
  16.     .width("100%")
  17.     .height("100%")
  18.   }
  20.   build() {
  21.    Row(){
  22.      Button("显示/隐藏")
  23.        .onClick(()=>{
  24.          this.isShowDialog=!this.isShowDialog
  25.        })
  26.    }.height("100%")
  27.     .bindContentCover(
  28.       $$this.isShowDialog, // 模态框弹出条件
  29.       this.getContent, // 绑定模态框
  30.     )
  31.   }
  32. }
复制代码
弹出倒计时广告

  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State
  5.   isShowDialog: boolean = false
  6.   @State
  7.   timerCount: number = 5 // 默认5秒倒计时关闭广告
  8.   timer: number = -1 // 定时器
  10.   // 开始倒计时
  11.   beginTimerCount() {
  12.     this.timer = setInterval(() => {
  13.       if (this.timerCount === 0) {
  14.         clearInterval(this.timer)
  15.         this.timerCount = 5 // 重置计时器
  16.         this.isShowDialog = false // 关闭模态框
  17.       }
  18.       this.timerCount--
  19.     }, 1000)
  20.   }
  22.   // 生命周期方法: 页面消失之前
  23.   aboutToDisappear(): void {
  24.     clearInterval(this.timer) // 防止定时器没有及时清理
  25.   }
  27.   // 模态框内容
  28.   @Builder
  29.   getContent() {
  30.     Column() {
  31.       // 右上角
  32.       Row() {
  33.         Text(`还剩${this.timerCount}秒`)
  34.           .fontColor(Color.White)
  35.       }
  36.       .width("100%")
  37.       .justifyContent(FlexAlign.End)
  38.       .padding(10)
  39.     }
  40.     .backgroundColor(Color.Blue)
  41.     .width("100%")
  42.     .height("100%")
  43.   }
  45.   build() {
  46.     Row() {
  47.       Button("显示")
  48.         .onClick(() => {
  49.           this.isShowDialog = true // 显示模态框
  50.           this.beginTimerCount() // 开始倒计时
  51.         })
  52.     }.height("100%")
  53.     .bindContentCover(
  54.       $$this.isShowDialog, // 模态框弹出条件
  55.       this.getContent, // 绑定模态框
  56.       {
  57.         modalTransition: ModalTransition.NONE, // 取消模态框动画
  58.       }
  59.     )
  60.   }
  61. }
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4