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

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

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

开发环境准备

• DevEco Studio 5.0.3
  
• HarmonyOS 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')
16.       
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')
16.       
17.       // 左门
18.       Stack() {
19.         // 门本体
20.         Column()
21.           .width('96%')
22.           .height('100%')
23.           .backgroundColor('#333333')
24.           .borderWidth({ right: 2 })
25.           .borderColor('#444444')
26.          
27.         // 门上装饰
28.         Column() {
29.           Circle()
30.             .width(40)
31.             .height(40)
32.             .fill('#666666')
33.             
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%')
48.       
49.       // 右门
50.       Stack() {
51.         // 门本体
52.         Column()
53.           .width('96%')
54.           .height('100%')
55.           .backgroundColor('#333333')
56.           .borderWidth({ left: 2 })
57.           .borderColor('#444444')
58.          
59.         // 门上装饰
60.         Column() {
61.           Circle()
62.             .width(40)
63.             .height(40)
64.             .fill('#666666')
65.             
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%')
80.       
81.       // 门框
82.       Column()
83.         .width('100%')
84.         .height('100%')
85.         .border({ width: 8, color: '#666' })
86.       
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
10.   
11.   // 切换门的状态
12.   toggleDoor() {
13.     this.isAnimating = true
14.    
15.     if (this.doorOpenOffset <= 0) {
16.       // 开门动画
17.       animateTo({
18.         duration: 1500,
19.         curve: Curve.EaseInOut,
20.         iterations: 1,
21.         playMode: PlayMode.Normal,
22.         onFinish: () => {
23.           this.isAnimating = false
24.         }
25.       }, () => {
26.         this.doorOpenOffset = this.doorOpenMaxOffset
27.       })
28.     } else {
29.       // 关门动画
30.       animateTo({
31.         duration: 1500,
32.         curve: Curve.EaseInOut,
33.         iterations: 1,
34.         playMode: PlayMode.Normal,
35.         onFinish: () => {
36.           this.isAnimating = false
37.         }
38.       }, () => {
39.         this.doorOpenOffset = 0
40.       })
41.     }
42.   }
43.   
44.   build() {
45.     Stack() {
46.       // 背景层（保持不变）
47.       ...
48.       
49.       // 左门
50.       Stack() {
51.         // 门本体和装饰（保持不变）
52.         ...
53.       }
54.       .width('50%')
55.       .height('100%')
56.       .translate({ x: this.doorOpenOffset <= 0 ? '0%' : (-this.doorOpenOffset) + '%' })
57.       
58.       // 右门
59.       Stack() {
60.         // 门本体和装饰（保持不变）
61.         ...
62.       }
63.       .width('50%')
64.       .height('100%')
65.       .translate({ x: this.doorOpenOffset <= 0 ? '0%' : this.doorOpenOffset + '%' })
66.       
67.       // 门框（保持不变）
68.       ...
69.       
70.       // 按钮
71.       Button({ type: ButtonType.Circle }) {
72.         Text(this.doorOpenOffset > 0 ? '关' : '开')
73.           .fontSize(20)
74.           .fontColor(Color.White)
75.       }
76.       .width(60)
77.       .height(60)
78.       .backgroundColor(this.doorOpenOffset > 0 ? '#FF5252' : '#4CAF50')
79.       .position({ x: '50%', y: '85%' })
80.       .translate({ x: '-50%', y: '-50%' })
81.       .onClick(() => {
82.         if (!this.isAnimating) {
83.           this.toggleDoor()
84.         }
85.       })
86.     }
87.     .width('100%')
88.     .height('100%')
89.     .backgroundColor(Color.Black)
90.   }
91. }

复制代码

代码说明：

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

复制代码

代码说明：

• 添加新的状态变量：
  
  
  
  • 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
10.   
11.   // toggleDoor方法保持不变
12.   ...
13.   
14.   build() {
15.     Stack() {
16.       // 背景层保持不变
17.       ...
18.       
19.       // 左门和右门保持不变，但添加zIndex
20.       Stack() { ... }
21.       .width('50%')
22.       .height('100%')
23.       .translate({ x: this.doorOpenOffset <= 0 ? '0%' : (-this.doorOpenOffset) + '%' })
24.       .zIndex(3)
25.       
26.       Stack() { ... }
27.       .width('50%')
28.       .height('100%')
29.       .translate({ x: this.doorOpenOffset <= 0 ? '0%' : this.doorOpenOffset + '%' })
30.       .zIndex(3)
31.       
32.       // 门框
33.       Column()
34.         .width('100%')
35.         .height('100%')
36.         .zIndex(5)
37.         .opacity(0.7)
38.         .border({ width: 8, color: '#666' })
39.       
40.       // 按钮
41.       Button({ type: ButtonType.Circle, stateEffect: true }) {
42.         Stack() {
43.           Circle()
44.             .width(60)
45.             .height(60)
46.             .fill('#00000060')
47.          
48.           if (!this.isAnimating) {
49.             // 用文本替代图片
50.             Text(this.doorOpenOffset > 0 ? '关' : '开')
51.               .fontSize(20)
52.               .fontColor(Color.White)
53.               .fontWeight(FontWeight.Bold)
54.           } else {
55.             // 加载动效
56.             LoadingProgress()
57.               .width(30)
58.               .height(30)
59.               .color(Color.White)
60.           }
61.         }
62.       }
63.       .width(60)
64.       .height(60)
65.       .backgroundColor(this.doorOpenOffset > 0 ? '#FF5252' : '#4CAF50')
66.       .position({ x: '50%', y: '85%' })
67.       .translate({ x: '-50%', y: '-50%' })
68.       .zIndex(10)
69.       .onClick(() => {
70.         if (!this.isAnimating) {
71.           this.toggleDoor()
72.         }
73.       })
74.     }
75.     .width('100%')
76.     .height('100%')
77.     .backgroundColor(Color.Black)
78.     .expandSafeArea()
79.   }
80. }

复制代码

代码说明：

• 添加了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 <= 0) {
19.       // 开门动画
20.       animateTo({
21.         duration: 1500,
22.         curve: Curve.EaseInOut,
23.         iterations: 1,
24.         playMode: PlayMode.Normal,
25.         onFinish: () => {
26.           this.isAnimating = false
27.           this.showContent = true
28.         }
29.       }, () => {
30.         this.doorOpenOffset = this.doorOpenMaxOffset
31.         this.backgroundOpacity = 1
32.       })
33.     } else {
34.       // 关门动画
35.       this.showContent = false
36.       animateTo({
37.         duration: 1500,
38.         curve: Curve.EaseInOut,
39.         iterations: 1,
40.         playMode: PlayMode.Normal,
41.         onFinish: () => {
42.           this.isAnimating = false
43.         }
44.       }, () => {
45.         this.doorOpenOffset = 0
46.         this.backgroundOpacity = 0
47.       })
48.     }
49.   }
51.   build() {
52.     // 层叠布局
53.     Stack() {
54.       // 背景层 - 门后内容
55.       Column() {
56.         Text('鸿蒙很开门')
57.           .fontSize(28)
58.           .fontWeight(FontWeight.Bold)
59.           .fontColor(Color.White)
60.           .opacity(this.backgroundOpacity)
61.           .margin({ bottom: 20 })
63.         // 图片
64.         Image($r('app.media.startIcon'))
65.           .width(100)
66.           .height(100)
67.           .objectFit(ImageFit.Contain)
68.           .opacity(this.backgroundOpacity)
69.           .animation({
70.             duration: 800,
71.             curve: Curve.EaseOut,
72.             delay: 500,
73.             iterations: 1,
74.             playMode: PlayMode.Normal
75.           })
77.         Text('探索无限可能')
78.           .fontSize(20)
79.           .fontColor(Color.White)
80.           .opacity(this.backgroundOpacity)
81.           .margin({ top: 20 })
82.           .visibility(this.showContent ? Visibility.Visible : Visibility.Hidden)
83.           .animation({
84.             duration: 800,
85.             curve: Curve.EaseOut,
86.             delay: 100,
87.             iterations: 1,
88.             playMode: PlayMode.Normal
89.           })
90.       }
91.       .width('100%')
92.       .height('100%')
93.       .justifyContent(FlexAlign.Center)
94.       .alignItems(HorizontalAlign.Center)
95.       .backgroundColor('#1E2247')
96.       .expandSafeArea()
98.       // 左门
99.       Stack() {
100.         // 门
101.         Column()
102.           .width('96%')
103.           .height('100%')
104.           .backgroundColor('#333333')
105.           .borderWidth({ right: 2 })
106.           .borderColor('#444444')
107.         // 装饰图案
108.         Column() {
109.           // 简单的门把手和几何图案设计
110.           Circle()
111.             .width(40)
112.             .height(40)
113.             .fill('#666666')
114.             .opacity(0.8)
116.           Rect()
117.             .width(120)
118.             .height(200)
119.             .radiusWidth(10)
120.             .stroke('#555555')
121.             .strokeWidth(2)
122.             .fill('none')
123.             .margin({ top: 40 })
125.           // 添加门上的小装饰
126.           Grid() {
127.             ForEach(Array.from({ length: 4 }), () => {
128.               GridItem() {
129.                 Circle()
130.                   .width(8)
131.                   .height(8)
132.                   .fill('#777777')
133.               }
134.             })
135.           }
136.           .columnsTemplate('1fr 1fr')
137.           .rowsTemplate('1fr 1fr')
138.           .width(60)
139.           .height(60)
140.           .margin({ top: 20 })
141.         }
142.         .width('80%')
143.         .alignItems(HorizontalAlign.Center)
144.       }
145.       .width('50%')
146.       .height('100%')
147.       .translate({ x: this.doorOpenOffset <= 0 ? '0%' : (-this.doorOpenOffset) + '%' })
148.       .zIndex(3)
150.       // 右门
151.       Stack() {
152.         // 门
153.         Column()
154.           .width('96%')
155.           .height('100%')
156.           .backgroundColor('#333333')
157.           .borderWidth({ left: 2 })
158.           .borderColor('#444444')
159.         // 装饰图案
160.         Column() {
161.           // 简单的门把手和几何图案设计
162.           Circle()
163.             .width(40)
164.             .height(40)
165.             .fill('#666666')
166.             .opacity(0.8)
168.           Rect()
169.             .width(120)
170.             .height(200)
171.             .radiusWidth(10)
172.             .stroke('#555555')
173.             .strokeWidth(2)
174.             .fill('none')
175.             .margin({ top: 40 })
177.           // 添加门上的小装饰
178.           Grid() {
179.             ForEach(Array.from({ length: 4 }), () => {
180.               GridItem() {
181.                 Circle()
182.                   .width(8)
183.                   .height(8)
184.                   .fill('#777777')
185.               }
186.             })
187.           }
188.           .columnsTemplate('1fr 1fr')
189.           .rowsTemplate('1fr 1fr')
190.           .width(60)
191.           .height(60)
192.           .margin({ top: 20 })
193.         }
194.         .width('80%')
195.         .alignItems(HorizontalAlign.Center)
196.       }
197.       .width('50%')
198.       .height('100%')
199.       .translate({ x: this.doorOpenOffset <= 0 ? '0%' : this.doorOpenOffset + '%' })
200.       .zIndex(3)
202.       // 门框
203.       Column()
204.         .width('100%')
205.         .height('100%')
206.         .zIndex(5)
207.         .opacity(0.7)
208.         .border({ width: 8, color: '#666' })
210.       // 控制按钮
211.       Button({ type: ButtonType.Circle, stateEffect: true }) {
212.         Stack() {
213.           Circle()
214.             .width(60)
215.             .height(60)
216.             .fill('#00000060')
218.           if (!this.isAnimating) {
219.             // 用文本替代图片
220.             Text(this.doorOpenOffset > 0 ? '关' : '开')
221.               .fontSize(20)
222.               .fontColor(Color.White)
223.               .fontWeight(FontWeight.Bold)
224.           } else {
225.             // 加载动效
226.             LoadingProgress()
227.               .width(30)
228.               .height(30)
229.               .color(Color.White)
230.           }
231.         }
232.       }
233.       .width(60)
234.       .height(60)
235.       .backgroundColor(this.doorOpenOffset > 0 ? '#FF5252' : '#4CAF50')
236.       .position({ x: '50%', y: '85%' })
237.       .translate({ x: '-50%', y: '-50%' })
238.       .zIndex(10) // 按钮位置在最上方
239.       .onClick(() => {
240.         // 防止多点
241.         if (!this.isAnimating) {
242.           this.toggleDoor()
243.         }
244.       })
245.     }
246.     .width('100%')
247.     .height('100%')
248.     .backgroundColor(Color.Black)
249.     .expandSafeArea()
250.   }
251. }

复制代码

总结与技术要点

涉及了以下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