鸿蒙Next实现一个弧形弹出工具栏 原创

实现一个类似于手机锁屏页左下角工具类按钮，点击工具按钮，弹出4个操作按钮，弧形排列。
实现思路：
1.点击开关按钮弹出4个隐藏按钮，需要用到动画，可以将隐藏按钮的初始位置放到开关按钮的下面，点击修改距离开关按钮的距离，实现动画效果
2.按钮排列，需要计算目标按钮和开关按钮的偏移距离，通过角度和半径计算偏移量

演示：

源码：

@Entry
@ComponentV2
struct CircleToolsView {
  @Local toolweight: number = 30
  @Local spaceBetween: number = 0

  calculteOffset(angle: number): Position {
    let angleRadian: number = angle * Math.PI / 180
    return {
      x: this.spaceBetween * Math.cos(angleRadian),
      y: this.spaceBetween * Math.sin(angleRadian)
    }
  }

  build() {
    Stack({ alignContent: Alignment.BottomStart }) {
      Circle()
        .width(this.toolweight)
        .height(this.toolweight)
        .fill(Color.Blue)
        .fillOpacity(1)
        .zIndex(5)
        .onClick(() => {
          if (this.spaceBetween==100) {
            this.spaceBetween = 0
          }else {
            this.spaceBetween = 100
          }

        })

      Circle()
        .width(this.toolweight)
        .height(this.toolweight)
        .fill(Color.Green)
        .fillOpacity(0.8)
        .offset(this.calculteOffset(360 - 86))
        .animation({
          duration: 300,
          curve:'ease-out'
        })
      Circle()
        .width(this.toolweight)
        .height(this.toolweight)
        .fill(Color.Brown)
        .fillOpacity(0.8)
        .offset(this.calculteOffset(360 - 59))
        .animation({
          duration: 300,
          curve:'ease-out'
        })
      Circle()
        .width(this.toolweight)
        .height(this.toolweight)
        .fill(Color.Red)
        .fillOpacity(0.8)
        .offset(this.calculteOffset(360 - 32))
        .animation({
          duration: 300,
          curve:'ease-out'
        })
      Circle()
        .width(this.toolweight)
        .height(this.toolweight)
        .fill(Color.Yellow)
        .fillOpacity(0.8)
        .offset(this.calculteOffset(360 - 5))
        .animation({
          duration: 300,
          curve:'ease-out'
        })

    }.width('100%').height('100%')
  }
}