随笔- 567 文章- 0 评论- 0 阅读- 55万

鸿蒙3D开发

需求：

创建一个按钮。
按下按钮后，按钮需缩小并向手指方向倾斜。

分析：

可以使用 button 组件来实现该功能，其他组件也同样适用。
按下按钮时需利用 .ontouch 事件。
缩小效果通过 scale 属性的变化实现。
为了确定手指的方向，我们可以在 .ontouch 事件中获取相关信息，具体包括：
- event.touches[0].x：手指在 x 轴的位置。
- event.touches[0].y：手指在 y 轴的位置。
倾斜效果则通过 rotate 属性来实现。

import curves from '@ohos.curves'

@Entry
@Component
struct Index {
  @State bX: number = 200
  @State bY: number = 200
  @State aScaleX: number = 1
  @State aScaleY: number = 1
  @State aAngle: number = 0
  @State bAngle: number = 0
  @State text: string = ''

  build() {
    Row() {
      Column() {
        Button() {
          Button('旋转按钮)')
            .scale({ x: this.aScaleX, y: this.aScaleY })
            .width(this.bX)
            .height(this.bY)
            .type(ButtonType.Capsule)
            .rotate({
              x: 1,
              y: 0,
              z: 0,
              centerX: '50%',
              centerY: '50%',
              angle: this.aAngle
            })
            .shadow({ radius: 10 })
            .onTouch((event: TouchEvent) => {
              if (event.type === TouchType.Down) {
                this.aAngle = (event.touches[0].y - this.bY * 0.5) * -0.1
                this.aScaleX = 0.9
                this.aScaleY = 0.9
              }
              if (event.type === TouchType.Up) {
                this.aAngle = 0
                this.aScaleX = 1
                this.aScaleY = 1
              }
              if (event.type === TouchType.Move) {
                this.aAngle = (event.touches[0].y - this.bY * 0.5) * -0.1


              }
            })
            .animation({ duration: 300, curve: Curve.FastOutSlowIn })

        }
        .rotate({
          x: 0,
          y: 1,
          z: 0,
          centerX: '50%',
          centerY: '50%',
          angle: this.bAngle
        })
        .onTouch((event: TouchEvent) => {
          if (event.type === TouchType.Down) {

            this.bAngle = (event.touches[0].x - this.bX * 0.5) * 0.1
          }
          if (event.type === TouchType.Up) {

            this.bAngle = 0
          }
          if (event.type === TouchType.Move) {

            this.bAngle = (event.touches[0].x - this.bX * 0.5) * 0.1

          }

        })
        .type(ButtonType.Capsule)
        .backgroundColor(Color.White)

        .width(this.bX * 1.2)
        .height(this.bY * 1.2)

        .animation({ duration: 500, curve: curves.springCurve(1000, 20, 10, 0) })
      }
      .width('100%')
    }
    .height('100%')
  }
}

.rotate属性用于在鸿蒙（HarmonyOS）中对组件进行旋转变换。它可以设置组件在转场时的旋转效果，具体应用如下：

1.Image_NativeModule结构体中的rotate方法：

OH_PixelmapNative_Rotate：根据输入的角度对图片进行旋转。
参数：angle（旋转角度）

2.组件转场中的rotate方法：

rotate(Float32,Float32,Float32,Float32,CJResource,CJResource)：设置组件转场时的旋转效果，包括插入时起点和删除时终点的值。
- 参数：
  - x、y、z：坐标值
  - angle：旋转角度
  - centerX、centerY：中心坐标
rotate(Float32,Float32,Float32,Float32,Length,Length)：设置组件转场时的旋转效果，包括插入时起点和删除时终点的值。
- 参数：
  - x、y、z：坐标值
  - angle：旋转角度
  - centerX、centerY：中心坐标
rotate(RotateOptions)：设置组件转场时的旋转效果，包括插入时起点和删除时终点的值。
- 参数：
  - options：旋转效果
rotateX(Float32)：设置组件绕X坐标的旋转效果，包括插入时起点和删除时终点的值。
- 参数：
  - rotateVal：旋转效果
rotateX(Int32)：设置组件绕X坐标的旋转效果，包括插入时起点和删除时终点的值。
- 参数：
  - rotateVal：旋转效果
rotateY(Int32)：设置组件绕Y坐标的旋转效果，包括插入时起点和删除时终点的值。
- 参数：
  - rotateVal：旋转效果
rotateY(Float32)：设置组件绕Y坐标的旋转效果，包括插入时起点和删除时终点的值。
- 参数：
  - rotateVal：旋转效果
move(TransitionEdge)：指定组件转场时从屏幕边缘滑入和滑出的效果，本质为平移效果，包括插入时起点和删除时终点的值。
opacity(Float64)：设置组件转场时的透明度效果，包括插入时起点和删除时终点的值。
- 参数：
  - number：透明度效果，取值范围：[0, 1]
translate(TranslateOptions)：设置组件转场时的平移效果，包括插入时起点和删除时终点的值。
- 参数：
  - options：平移效果
scale(ScaleOptions)：设置组件转场时的缩放效果，包括插入时起点和删除时终点的值。
- 参数：
  - options：缩放效果
rotate(Float32)：设置组件转场时的旋转效果，包括插入时起点和删除时终点的值。
- 参数：
  - rotateZ：旋转效果
rotate(Int32)：设置组件转场时的旋转效果，包括插入时起点和删除时终点的值。
- 参数：
  - rotateZ：旋转效果通过以上方法，开发者可以在鸿蒙（HarmonyOS）中灵活地应用旋转变换来实现各种动画和转场效果。