鸿蒙特效教程05-鸿蒙很开门

fj520

鸿蒙特效教程05-鸿蒙很开门

本教程适合HarmonyOS初学者，通过简单到复杂的步骤，通过 Stack 层叠布局 + animation 动画，一步步实现这个"鸿蒙很开门"特效。

开发环境准备

DevEco Studio 5.0.3HarmonyOS Next API 15

下载代码仓库
最终效果预览

屏幕上有一个双开门，点击中间的按钮后，两侧门会向打开，露出开门后面的内容。当用户再次点击按钮时，门会关闭。

实现步骤

我们将通过以下步骤逐步构建这个效果：

用层叠布局搭建基础UI结构用层叠布局创建门的装饰实现开关门动画效果

步骤1：搭建基础UI结构

首先，我们需要创建一个基本的页面结构。在这个效果中，最关键的是使用 Stack组件来实现层叠效果。

1. @Entry
2. @Component
3. struct OpenTheDoor {
4.   build() {
5.     Stack() {
6.       // 背景层
7.       Column() {
8.         Text('鸿蒙很开门')
9.           .fontSize(28)
10.           .fontWeight(FontWeight.Bold)
11.           .fontColor(Color.White)
12.       }
13.       .width('100%')
14.       .height('100%')
15.       .backgroundColor('#1E2247')
17.       // 按钮
18.       Button({ type: ButtonType.Circle }) {
19.         Text('开')
20.           .fontSize(20)
21.           .fontColor(Color.White)
22.       }
23.       .width(60)
24.       .height(60)
25.       .backgroundColor('#4CAF50')
26.       .position({ x: '50%', y: '85%' })
27.       .translate({ x: '-50%', y: '-50%' })
28.     }
29.     .width('100%')
30.     .height('100%')
31.     .backgroundColor(Color.Black)
32.   }
33. }

复制代码

代码说明：

Stack组件是一个层叠布局容器，子组件会按照添加顺序从底到顶叠放。我们首先放置了一个背景层，它包含了将来门打开后要显示的内容。然后放置了一个圆形按钮，用于触发开门动作。使用 position和 translate组合定位按钮在屏幕底部中间。

此时，只有一个简单的背景和按钮，还没有门的效果。
步骤2：创建门的设计

接下来，我们在Stack层叠布局中添加左右两扇门：

1. @Entry
2. @Component
3. struct OpenTheDoor {
4.   build() {
5.     Stack() {
6.       // 背景层
7.       Column() {
8.         Text('鸿蒙很开门')
9.           .fontSize(28)
10.           .fontWeight(FontWeight.Bold)
11.           .fontColor(Color.White)
12.       }
13.       .width('100%')
14.       .height('100%')
15.       .backgroundColor('#1E2247')
17.       // 左门
18.       Stack() {
19.         // 门本体
20.         Column()
21.           .width('96%')
22.           .height('100%')
23.           .backgroundColor('#333333')
24.           .borderWidth({ right: 2 })
25.           .borderColor('#444444')
27.         // 门上装饰
28.         Column() {
29.           Circle()
30.             .width(40)
31.             .height(40)
32.             .fill('#666666')
34.           Rect()
35.             .width(120)
36.             .height(200)
37.             .radiusWidth(10)
38.             .stroke('#555555')
39.             .strokeWidth(2)
40.             .fill('none')
41.             .margin({ top: 40 })
42.         }
43.         .width('80%')
44.         .alignItems(HorizontalAlign.Center)
45.       }
46.       .width('50%')
47.       .height('100%')
49.       // 右门
50.       Stack() {
51.         // 门本体
52.         Column()
53.           .width('96%')
54.           .height('100%')
55.           .backgroundColor('#333333')
56.           .borderWidth({ left: 2 })
57.           .borderColor('#444444')
59.         // 门上装饰
60.         Column() {
61.           Circle()
62.             .width(40)
63.             .height(40)
64.             .fill('#666666')
66.           Rect()
67.             .width(120)
68.             .height(200)
69.             .radiusWidth(10)
70.             .stroke('#555555')
71.             .strokeWidth(2)
72.             .fill('none')
73.             .margin({ top: 40 })
74.         }
75.         .width('80%')
76.         .alignItems(HorizontalAlign.Center)
77.       }
78.       .width('50%')
79.       .height('100%')
81.       // 门框
82.       Column()
83.         .width('100%')
84.         .height('100%')
85.         .border({ width: 8, color: '#666' })
87.       // 按钮
88.       Button({ type: ButtonType.Circle }) {
89.         Text('开')
90.           .fontSize(20)
91.           .fontColor(Color.White)
92.       }
93.       .width(60)
94.       .height(60)
95.       .backgroundColor('#4CAF50')
96.       .position({ x: '50%', y: '85%' })
97.       .translate({ x: '-50%', y: '-50%' })
98.     }
99.     .width('100%')
100.     .height('100%')
101.     .backgroundColor(Color.Black)
102.   }
103. }

复制代码

代码说明：

我们添加了左右两扇门，每扇门占屏幕宽度的50%。每扇门自身是一个 Stack，包含门本体和装饰元素。门本体使用 Column组件，设置背景色和边框。装饰元素包括圆形"门把手"和矩形装饰。添加门框作为装饰元素，增强立体感。使用 zIndex控制层叠顺序（虽然代码中未显示，但在最终代码中会用到）。

此时我们有了一个静态的门的外观，但它还不能打开和关闭。
步骤3：实现开关门动画

现在我们需要添加状态变量和动画逻辑，使门能够打开和关闭：

1. @Entry
2. @Component
3. struct OpenTheDoor {
4.   // 门打开的最大位移（百分比）
5.   private doorOpenMaxOffset: number = 110
6.   // 当前门打开的位移
7.   @State doorOpenOffset: number = 0
8.   // 是否正在动画中
9.   @State isAnimating: boolean = false
11.   // 切换门的状态
12.   toggleDoor() {
13.     this.isAnimating = true
15.     if (this.doorOpenOffset  {
16.           this.isAnimating = false
17.         }
18.       }, () => {
19.         this.doorOpenOffset = this.doorOpenMaxOffset
20.       })
21.     } else {
22.       // 关门动画
23.       animateTo({
24.         duration: 1500,
25.         curve: Curve.EaseInOut,
26.         iterations: 1,
27.         playMode: PlayMode.Normal,
28.         onFinish: () => {
29.           this.isAnimating = false
30.         }
31.       }, () => {
32.         this.doorOpenOffset = 0
33.       })
34.     }
35.   }
37.   build() {
38.     Stack() {
39.       // 背景层（保持不变）
40.       ...
42.       // 左门
43.       Stack() {
44.         // 门本体和装饰（保持不变）
45.         ...
46.       }
47.       .width('50%')
48.       .height('100%')
49.       .translate({ x: this.doorOpenOffset  0 ? '#FF5252' : '#4CAF50')
50.       .position({ x: '50%', y: '85%' })
51.       .translate({ x: '-50%', y: '-50%' })
52.       .onClick(() => {
53.         if (!this.isAnimating) {
54.           this.toggleDoor()
55.         }
56.       })
57.     }
58.     .width('100%')
59.     .height('100%')
60.     .backgroundColor(Color.Black)
61.   }
62. }

复制代码

代码说明：

添加了状态变量：

doorOpenMaxOffset: 门打开的最大位移doorOpenOffset: 当前门的位移状态isAnimating: 标记动画是否正在进行

使用 translate属性绑定到 doorOpenOffset状态，实现门的移动效果：

左门向左移动：translate({ x: (-this.doorOpenOffset) + '%' })右门向右移动：translate({ x: this.doorOpenOffset + '%' })

实现 toggleDoor方法，使用 animateTo函数创建动画：

animateTo是HarmonyOS中用于创建显式动画的API设置动画时长1500毫秒使用 EaseInOut曲线使动画更加平滑通过改变 doorOpenOffset状态触发UI更新

按钮样式和文本随门的状态变化：

门关闭时显示"开"，背景绿色门打开时显示"关"，背景红色添加点击事件调用 toggleDoor方法使用 isAnimating防止动画进行中重复触发

此时，门可以通过动画打开和关闭，但门后的内容没有渐变效果。
步骤4：添加门后内容和渐变效果

现在我们为门后的内容添加渐变显示效果：

1. @Entry
2. @Component
3. struct OpenTheDoor {
4.   // 已有的状态变量
5.   private doorOpenMaxOffset: number = 110
6.   @State doorOpenOffset: number = 0
7.   @State isAnimating: boolean = false
8.   // 新增状态变量
9.   @State showContent: boolean = false
10.   @State backgroundOpacity: number = 0
12.   toggleDoor() {
13.     this.isAnimating = true
15.     if (this.doorOpenOffset  {
16.           this.isAnimating = false
17.           this.showContent = true
18.         }
19.       }, () => {
20.         this.doorOpenOffset = this.doorOpenMaxOffset
21.         this.backgroundOpacity = 1
22.       })
23.     } else {
24.       // 关门动画
25.       this.showContent = false
26.       animateTo({
27.         duration: 1500,
28.         curve: Curve.EaseInOut,
29.         iterations: 1,
30.         playMode: PlayMode.Normal,
31.         onFinish: () => {
32.           this.isAnimating = false
33.         }
34.       }, () => {
35.         this.doorOpenOffset = 0
36.         this.backgroundOpacity = 0
37.       })
38.     }
39.   }
41.   build() {
42.     Stack() {
43.       // 背景层 - 门后内容
44.       Column() {
45.         Text('鸿蒙很开门')
46.           .fontSize(28)
47.           .fontWeight(FontWeight.Bold)
48.           .fontColor(Color.White)
49.           .opacity(this.backgroundOpacity)
50.           .margin({ bottom: 20 })
52.         Image($r('app.media.startIcon'))
53.           .width(100)
54.           .height(100)
55.           .objectFit(ImageFit.Contain)
56.           .opacity(this.backgroundOpacity)
57.           .animation({
58.             duration: 800,
59.             curve: Curve.EaseOut,
60.             delay: 500,
61.             iterations: 1,
62.             playMode: PlayMode.Normal
63.           })
65.         Text('探索无限可能')
66.           .fontSize(20)
67.           .fontColor(Color.White)
68.           .opacity(this.backgroundOpacity)
69.           .margin({ top: 20 })
70.           .visibility(this.showContent ? Visibility.Visible : Visibility.Hidden)
71.           .animation({
72.             duration: 800,
73.             curve: Curve.EaseOut,
74.             delay: 100,
75.             iterations: 1,
76.             playMode: PlayMode.Normal
77.           })
78.       }
79.       .width('100%')
80.       .height('100%')
81.       .justifyContent(FlexAlign.Center)
82.       .alignItems(HorizontalAlign.Center)
83.       .backgroundColor('#1E2247')
85.       // 其他部分（左门、右门、按钮等）保持不变
86.       ...
87.     }
88.     .width('100%')
89.     .height('100%')
90.     .backgroundColor(Color.Black)
91.   }
92. }

复制代码

代码说明：

添加新的状态变量：

showContent: 控制额外内容的显示与隐藏backgroundOpacity: 控制背景内容的透明度

在 toggleDoor方法中同时控制门的位移和内容的透明度：

开门时，门位移增加到最大值，同时透明度从0变为1关门时，门位移减少到0，同时透明度从1变为0在开门动画完成后设置 showContent为true，显示额外内容

为内容元素添加动画效果：

使用 opacity属性绑定到 backgroundOpacity状态为图片添加 animation属性，设置渐入效果为第二段文本添加条件显示 visibility属性两个元素使用不同的延迟时间，创造错落有致的动画效果

这样，当门打开时，背景内容会平滑地渐入，创造更加连贯的用户体验。
步骤5：优化交互体验

最后，我们添加一些细节来增强交互体验：

1. @Entry
2. @Component
3. struct OpenTheDoor {
4.   // 状态变量保持不变
5.   private doorOpenMaxOffset: number = 110
6.   @State doorOpenOffset: number = 0
7.   @State isAnimating: boolean = false
8.   @State showContent: boolean = false
9.   @State backgroundOpacity: number = 0
11.   // toggleDoor方法保持不变
12.   ...
14.   build() {
15.     Stack() {
16.       // 背景层保持不变
17.       ...
19.       // 左门和右门保持不变，但添加zIndex
20.       Stack() { ... }
21.       .width('50%')
22.       .height('100%')
23.       .translate({ x: this.doorOpenOffset  0 ? '#FF5252' : '#4CAF50')
24.       .position({ x: '50%', y: '85%' })
25.       .translate({ x: '-50%', y: '-50%' })
26.       .zIndex(10)
27.       .onClick(() => {
28.         if (!this.isAnimating) {
29.           this.toggleDoor()
30.         }
31.       })
32.     }
33.     .width('100%')
34.     .height('100%')
35.     .backgroundColor(Color.Black)
36.     .expandSafeArea()
37.   }
38. }

复制代码

代码说明：

添加了 zIndex属性来控制组件的层叠顺序：

背景内容：默认层级最低左右门：zIndex为3门框：zIndex为5，确保在门的上层按钮：zIndex为10，确保始终在最上层

改进按钮状态反馈：

添加 stateEffect: true使按钮有按下效果在动画过程中显示 LoadingProgress加载指示器非动画状态下显示"开"或"关"文本

添加 expandSafeArea()以全屏显示效果，覆盖刘海屏、挖孔屏的安全区域

完整代码

以下是完整的实现代码：

1. @Entry
2. @Component
3. struct OpenTheDoor {
4.   // 门打开的位移
5.   private doorOpenMaxOffset: number = 110
6.   // 门打开的幅度
7.   @State doorOpenOffset: number = 0
8.   // 是否正在动画
9.   @State isAnimating: boolean = false
10.   // 是否显示内容
11.   @State showContent: boolean = false
12.   // 背景透明度
13.   @State backgroundOpacity: number = 0
15.   toggleDoor() {
16.     this.isAnimating = true
18.     if (this.doorOpenOffset  {
19.           this.isAnimating = false
20.           this.showContent = true
21.         }
22.       }, () => {
23.         this.doorOpenOffset = this.doorOpenMaxOffset
24.         this.backgroundOpacity = 1
25.       })
26.     } else {
27.       // 关门动画
28.       this.showContent = false
29.       animateTo({
30.         duration: 1500,
31.         curve: Curve.EaseInOut,
32.         iterations: 1,
33.         playMode: PlayMode.Normal,
34.         onFinish: () => {
35.           this.isAnimating = false
36.         }
37.       }, () => {
38.         this.doorOpenOffset = 0
39.         this.backgroundOpacity = 0
40.       })
41.     }
42.   }
44.   build() {
45.     // 层叠布局
46.     Stack() {
47.       // 背景层 - 门后内容
48.       Column() {
49.         Text('鸿蒙很开门')
50.           .fontSize(28)
51.           .fontWeight(FontWeight.Bold)
52.           .fontColor(Color.White)
53.           .opacity(this.backgroundOpacity)
54.           .margin({ bottom: 20 })
56.         // 图片
57.         Image($r('app.media.startIcon'))
58.           .width(100)
59.           .height(100)
60.           .objectFit(ImageFit.Contain)
61.           .opacity(this.backgroundOpacity)
62.           .animation({
63.             duration: 800,
64.             curve: Curve.EaseOut,
65.             delay: 500,
66.             iterations: 1,
67.             playMode: PlayMode.Normal
68.           })
70.         Text('探索无限可能')
71.           .fontSize(20)
72.           .fontColor(Color.White)
73.           .opacity(this.backgroundOpacity)
74.           .margin({ top: 20 })
75.           .visibility(this.showContent ? Visibility.Visible : Visibility.Hidden)
76.           .animation({
77.             duration: 800,
78.             curve: Curve.EaseOut,
79.             delay: 100,
80.             iterations: 1,
81.             playMode: PlayMode.Normal
82.           })
83.       }
84.       .width('100%')
85.       .height('100%')
86.       .justifyContent(FlexAlign.Center)
87.       .alignItems(HorizontalAlign.Center)
88.       .backgroundColor('#1E2247')
89.       .expandSafeArea()
91.       // 左门
92.       Stack() {
93.         // 门
94.         Column()
95.           .width('96%')
96.           .height('100%')
97.           .backgroundColor('#333333')
98.           .borderWidth({ right: 2 })
99.           .borderColor('#444444')
100.         // 装饰图案
101.         Column() {
102.           // 简单的门把手和几何图案设计
103.           Circle()
104.             .width(40)
105.             .height(40)
106.             .fill('#666666')
107.             .opacity(0.8)
109.           Rect()
110.             .width(120)
111.             .height(200)
112.             .radiusWidth(10)
113.             .stroke('#555555')
114.             .strokeWidth(2)
115.             .fill('none')
116.             .margin({ top: 40 })
118.           // 添加门上的小装饰
119.           Grid() {
120.             ForEach(Array.from({ length: 4 }), () => {
121.               GridItem() {
122.                 Circle()
123.                   .width(8)
124.                   .height(8)
125.                   .fill('#777777')
126.               }
127.             })
128.           }
129.           .columnsTemplate('1fr 1fr')
130.           .rowsTemplate('1fr 1fr')
131.           .width(60)
132.           .height(60)
133.           .margin({ top: 20 })
134.         }
135.         .width('80%')
136.         .alignItems(HorizontalAlign.Center)
137.       }
138.       .width('50%')
139.       .height('100%')
140.       .translate({ x: this.doorOpenOffset  {
141.               GridItem() {
142.                 Circle()
143.                   .width(8)
144.                   .height(8)
145.                   .fill('#777777')
146.               }
147.             })
148.           }
149.           .columnsTemplate('1fr 1fr')
150.           .rowsTemplate('1fr 1fr')
151.           .width(60)
152.           .height(60)
153.           .margin({ top: 20 })
154.         }
155.         .width('80%')
156.         .alignItems(HorizontalAlign.Center)
157.       }
158.       .width('50%')
159.       .height('100%')
160.       .translate({ x: this.doorOpenOffset  0 ? '关' : '开')
161.               .fontSize(20)
162.               .fontColor(Color.White)
163.               .fontWeight(FontWeight.Bold)
164.           } else {
165.             // 加载动效
166.             LoadingProgress()
167.               .width(30)
168.               .height(30)
169.               .color(Color.White)
170.           }
171.         }
172.       }
173.       .width(60)
174.       .height(60)
175.       .backgroundColor(this.doorOpenOffset > 0 ? '#FF5252' : '#4CAF50')
176.       .position({ x: '50%', y: '85%' })
177.       .translate({ x: '-50%', y: '-50%' })
178.       .zIndex(10) // 按钮位置在最上方
179.       .onClick(() => {
180.         // 防止多点
181.         if (!this.isAnimating) {
182.           this.toggleDoor()
183.         }
184.       })
185.     }
186.     .width('100%')
187.     .height('100%')
188.     .backgroundColor(Color.Black)
189.     .expandSafeArea()
190.   }
191. }

复制代码

总结与技术要点

涉及了以下HarmonyOS开发中的重要技术点：
1. Stack布局

Stack组件是实现这种叠加效果，允许子组件按照添加顺序从底到顶叠放。使用时有以下注意点：

使用 zIndex 属性控制层叠顺序使用 alignContent 参数控制子组件对齐

2. 动画系统

本教程中使用了两种动画机制：

animateTo：显式动画API，用于创建状态变化时的过渡效果

1.   animateTo({
2.     duration: 1500,
3.     curve: Curve.EaseInOut,
4.     iterations: 1,
5.     playMode: PlayMode.Normal,
6.     onFinish: () => { /* 动画完成回调 */ }
7.   }, () => {
8.     // 状态变化，触发动画
9.     this.doorOpenOffset = this.doorOpenMaxOffset
10.   })

复制代码

animation：属性动画，直接在组件上定义

1.   .animation({
2.     duration: 800,
3.     curve: Curve.EaseOut,
4.     delay: 500,
5.     iterations: 1,
6.     playMode: PlayMode.Normal
7.   })

复制代码

3. 状态管理

我们使用以下几个状态来控制整个效果：

doorOpenOffset：控制门的位移isAnimating：标记动画状态，防止重复触发backgroundOpacity：控制背景内容的透明度showContent：控制特定内容的显示与隐藏

4. translate 位移

使用 translate属性实现门的移动效果：
[code].translate({ x: this.doorOpenOffset