鸿蒙开发中BindSheet应用打造半模态转场效果

在鸿蒙开发中，BindSheet 组件可用于创建半模态窗口，通过设置合适的属性和添加动画效果，能够实现具有转场效果的半模态窗口。以下是详细的实现步骤和示例代码。

实现思路

布局设计：使用 BindSheet 组件创建半模态窗口，并设置其内容布局。
显示与隐藏控制：通过状态变量控制 BindSheet 的显示与隐藏。
转场动画添加：利用 Animator 组件为 BindSheet 添加转场动画效果，使其在显示和隐藏时具有平滑的过渡。

示例代码

@Entry
@Component
struct BindSheetExample {// 控制 BindSheet 显示与隐藏的状态变量private isBindSheetVisible: boolean = false// 动画播放控制器private animatorController: AnimatorController = new AnimatorController()build() {Stack({ alignContent: Alignment.Center }) {// 触发打开 BindSheet 的按钮Button('打开半模态窗口').onClick(() => {// 点击按钮时，显示 BindSheetthis.isBindSheetVisible = true// 播放显示动画this.animatorController.play()})if (this.isBindSheetVisible) {BindSheet({// 当 BindSheet 关闭时，更新状态变量onDismiss: () => {this.isBindSheetVisible = false}}) {Column({ space: 20 }) {// BindSheet 内的文本内容Text('这是半模态窗口的内容').fontSize(20)// 关闭 BindSheet 的按钮Button('关闭窗口').onClick(() => {// 点击关闭按钮时，隐藏 BindSheetthis.isBindSheetVisible = false})}.width('100%').padding({ left: 20, top: 20, right: 20, bottom: 20 }).backgroundColor('#FFFFFF') // 内容区域的背景颜色为白色}.backgroundColor('#00000080') // 设置 BindSheet 的背景为半透明黑色.position({ x: 0, y: 0 }).width('100%').height('auto').opacity(0) // 初始透明度为 0.translate({ x: 0, y: 100 }) // 初始位置向下偏移 100 像素.animate({duration: 300, // 动画时长为 300 毫秒curve: Curve.EaseOut // 动画曲线为 EaseOut}) {this.animatorController = new AnimatorController({// 显示动画：透明度变为 1，位置恢复正常play: () => {this.opacity = 1this.translate = { x: 0, y: 0 }},// 隐藏动画：透明度变为 0，位置向下偏移 100 像素reverse: () => {this.opacity = 0this.translate = { x: 0, y: 100 }}})}}}.width('100%').height('100%')}
}

代码解释

状态管理：使用 isBindSheetVisible 状态变量控制 BindSheet 的显示与隐藏。当点击“打开半模态窗口”按钮时，将 isBindSheetVisible 设置为 true，并播放显示动画；点击“关闭窗口”按钮时，将 isBindSheetVisible 设置为 false。
BindSheet 组件：创建半模态窗口，设置其背景颜色为半透明黑色，内容区域为白色。
转场动画：
- 初始时，设置 BindSheet 的透明度为 0，位置向下偏移 100 像素。
- 使用 animate 方法添加动画效果，动画时长为 300 毫秒，动画曲线为 EaseOut。
- 通过 AnimatorController 控制动画的播放和反转，实现显示和隐藏时的平滑过渡。