HarmonyOS 鸿蒙Next SideBarContainer使用动画组件使showSideBar值取反

SideBarContainer不支持动画属性，试试用这种方法能实现动画的效果

@Entry
@Component
struct SideBarContainerDemo {
  @State arr: number[] = [1, 2, 3]
  @State current: number = 1
  @State showSideBar: boolean = false

  @State showFlag: Visibility = Visibility.Hidden;

  // 延迟关闭侧边栏，让自定义的出场动画显示
  cancel(){
    this.showFlag=Visibility.Hidden
    setTimeout(() => {
      this.showSideBar = !this.showSideBar
    }, 500)
  }

  build() {
    SideBarContainer(SideBarContainerType.Overlay) {
      Column() {
        ForEach(this.arr, (item: number) => {
          Column({ space: 5 }) {
            Text("Index0" + item)
              .fontSize(25)
              .fontColor(this.current === item ? '#0A59F7' : '#999')
              .fontFamily('source-sans-pro,cursive,sans-serif')
          }
          .onClick(() => {
            this.current = item
          })
        }, (item: string) => item)
      }
      .visibility(this.showFlag)
      .transition(TransitionEffect.OPACITY.animation({duration: 500}).combine(TransitionEffect.translate({x: 100})))
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .backgroundColor(Color.Pink)
      Column() {
        Button('打开侧边栏').onClick(() => {
          this.showFlag=Visibility.Visible
          this.showSideBar = true
        })
        Button('关闭侧边栏').onClick(() => {
          this.cancel()
        })
      }
      .backgroundColor(Color.Green)
      .gesture(
        TapGesture({ count: 2 })
          .onAction((event?: GestureEvent) => {
            if (event) {
              this.cancel()
            }
          })
      )
    }
    .sideBarPosition(SideBarPosition.End)
    .showSideBar(this.showSideBar)
    .showControlButton(false)
    .sideBarWidth(150)
    .minSideBarWidth(50)
    .maxSideBarWidth(300)
    .minContentWidth(0)
    .onChange((value: boolean) => {
      console.info('status:' + value)
    })
  }
}

更多关于HarmonyOS 鸿蒙Next SideBarContainer使用动画组件使showSideBar值取反的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

vueper 2楼•9 天前

感谢大佬答疑解惑，

基本信息

项目名称: My Project
开始日期: 2023-10-01
状态: 进行中

caililin 3楼•9 天前

在HarmonyOS中，SideBarContainer组件用于实现侧边栏的显示与隐藏。通过使用动画组件，可以动态控制showSideBar的值，从而实现侧边栏的平滑切换。以下是如何使用动画组件使showSideBar值取反的简要步骤：

定义状态变量：首先，定义一个状态变量showSideBar，用于控制侧边栏的显示与隐藏。
```
[@State](/user/State) showSideBar: boolean = false;
```

创建动画：使用animateTo函数创建动画，并在动画回调中切换showSideBar的值。

animateTo({
  duration: 300, // 动画持续时间
  curve: Curve.EaseInOut // 动画曲线
}, () => {
  this.showSideBar = !this.showSideBar; // 切换showSideBar的值
});

绑定动画到UI：将动画绑定到SideBarContainer的showSideBar属性上，以实现侧边栏的平滑显示与隐藏。

SideBarContainer({
  showSideBar: this.showSideBar
}) {
  // 主内容
  Column() {
    // 主内容布局
  }

  // 侧边栏内容
  Column() {
    // 侧边栏布局
  }
}

触发动画：通过用户交互（如按钮点击）触发动画，从而切换侧边栏的显示状态。

Button('Toggle SideBar')
  .onClick(() => {
    animateTo({
      duration: 300,
      curve: Curve.EaseInOut
    }, () => {
      this.showSideBar = !this.showSideBar;
    });
  });

通过以上步骤，可以在HarmonyOS中使用动画组件动态控制SideBarContainer的showSideBar值，实现侧边栏的平滑切换。

nodeper 4楼•9 天前

在HarmonyOS中，使用SideBarContainer时，可以通过动画组件实现showSideBar值的取反操作。首先，在布局文件中定义SideBarContainer，并为其绑定showSideBar状态。然后，在代码中使用Animator或AnimationController创建动画，并在动画的回调中通过setState方法将showSideBar的值取反。例如：

AnimationController _controller;

void _toggleSideBar() {
  _controller.forward().then((_) {
    setState(() {
      showSideBar = !showSideBar;
    });
  });
}

这样，点击按钮时，动画执行完毕后showSideBar的值会自动取反，从而实现侧边栏的显示与隐藏。