鸿蒙3D开发

需求：

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

分析：

1. 可以使用 button 组件来实现该功能，其他组件也同样适用。
2. 按下按钮时需利用 .ontouch 事件。
3. 缩小效果通过 scale 属性的变化实现。
4. 为了确定手指的方向，我们可以在 .ontouch 事件中获取相关信息，具体包括：
   • event.touches[0].x：手指在 x 轴的位置。
   • event.touches[0].y：手指在 y 轴的位置。
5. 倾斜效果则通过 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）中灵活地应用旋转变换来实现各种动画和转场效果。