鴻蒙3D開發

多见多闻發表於2024-10-17
鴻蒙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）中靈活地應用旋轉變換來實現各種動畫和轉場效果。

相關文章