鸿蒙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企服之家，中国第一个企服评测及商务社交产业平台。