From 7f6ec93b3156f9d44df41be0b753fb848a6934fd Mon Sep 17 00:00:00 2001
From: ywcoder <1104410818@qq.com>
Date: Wed, 25 Jun 2025 15:16:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9EFAQ=EF=BC=9A=E5=A6=82?=
 =?UTF-8?q?=E4=BD=95=E5=AE=9E=E7=8E=B0=E5=BC=B9=E7=AA=97=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E5=92=8C=E9=81=AE=E7=BD=A9=E5=8A=A8=E7=94=BB=E5=88=86=E5=BC=80?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...logAnimationAndMaskAnimationSeparately.ets | 112 ++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 ArkUI/entry/src/main/ets/pages/SetDialogAnimationAndMaskAnimationSeparately.ets

diff --git a/ArkUI/entry/src/main/ets/pages/SetDialogAnimationAndMaskAnimationSeparately.ets b/ArkUI/entry/src/main/ets/pages/SetDialogAnimationAndMaskAnimationSeparately.ets
new file mode 100644
index 0000000..670a0ca
--- /dev/null
+++ b/ArkUI/entry/src/main/ets/pages/SetDialogAnimationAndMaskAnimationSeparately.ets
@@ -0,0 +1,112 @@
+/*
+* Copyright (c) 2024 Huawei Device Co., Ltd.
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+/*
+* FAQ：如何实现弹窗动画和遮罩动画分开设置？
+*/
+
+// [Start Set_Dialog_Animation_And_Mask_Animation_Separately]
+import { ComponentContent } from '@kit.ArkUI';
+
+export interface SimpleDialogParams {
+  title: string
+  desc: string
+  visible?: Visibility
+}
+
+@Builder
+function SimpleDialogBuilder(params: SimpleDialogParams) {
+  SimpleDialogUI({ params })
+}
+
+@Component
+struct SimpleDialogUI {
+  @Prop params: SimpleDialogParams | null = null;
+  @State yOffset: number | string = '100%';
+  @Prop visible: Visibility = Visibility.Visible;
+
+  build() {
+    Column() {
+      Text(this.params?.title)
+        .fontSize(18)
+        .fontWeight(FontWeight.Bold)
+        .textAlign(TextAlign.Center)
+        .fontColor(Color.Black)
+        .margin({ bottom: 16 })
+        .width('100%')
+      Text(this.params?.desc)
+        .fontSize(14)
+        .lineHeight(22)
+        .fontColor(Color.Gray)
+        .margin({ bottom: 16 })
+        .width('100%')
+    }
+    .borderRadius({ topLeft: 16, topRight: 16 })
+    .backgroundColor(Color.White)
+    .width('100%')
+    .alignItems(HorizontalAlign.Start)
+    .visibility(this.params?.visible)
+    .padding(20)
+    .transition(TransitionEffect.translate({ y: '100%' }).animation({ duration: 200 }))
+  }
+}
+
+@Entry
+@Component
+struct SetDialogAnimationAndMaskAnimationSeparately {
+  @State message: string = 'Hello World';
+
+  build() {
+    RelativeContainer() {
+      Text(this.message)
+        .id('HelloWorld')
+        .fontSize($r('app.float.page_text_font_size'))
+        .fontWeight(FontWeight.Bold)
+        .alignRules({
+          center: { anchor: '__container__', align: VerticalAlign.Center },
+          middle: { anchor: '__container__', align: HorizontalAlign.Center }
+        })
+        .onClick(() => {
+          const param =
+            { title: '标题标题标题', desc: '描述描述描述描述描述描述描述描述描述描述描述描述' } as SimpleDialogParams;
+          const contentNode = new ComponentContent(this.getUIContext(), new WrappedBuilder(SimpleDialogBuilder), param);
+          this.getUIContext().getPromptAction().openCustomDialog(contentNode, {
+            autoCancel: true,
+            maskColor: 'cc000000',
+            maskRect: {
+              x: 0,
+              y: '-100%',
+              width: '100%',
+              height: '200%'
+            },
+            alignment: DialogAlignment.Bottom,
+            transition: TransitionEffect.opacity(0).animation({ duration: 200 }),
+            onWillDismiss: res => {
+              contentNode.update({
+                title: '标题标题标题',
+                desc: '描述描述描述描述描述描述描述描述描述描述描述描述',
+                visible: Visibility.Hidden
+              });
+              res.dismiss();
+            }
+          });
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+
+// [End Set_Dialog_Animation_And_Mask_Animation_Separately]
\ No newline at end of file
-- 
Gitee