彈簧曲線動(dòng)畫

ArkUI提供了預(yù)置動(dòng)畫曲線，指定了動(dòng)畫屬性從起始值到終止值的變化規(guī)律，如Linear、Ease、EaseIn等。同時(shí)，ArkUI也提供了由彈簧振子物理模型產(chǎn)生的彈簧曲線。通過彈簧曲線，開發(fā)者可以設(shè)置超過設(shè)置的終止值，在終止值附近震蕩，直至最終停下來的效果。彈簧曲線的動(dòng)畫效果比其他曲線具有更強(qiáng)的互動(dòng)性、可玩性。

彈簧曲線的接口包括兩類，一類是springCurve，另一類是springMotion和responsiveSpringMotion，這兩種方式都可以產(chǎn)生彈簧曲線。

springCurve(velocity: number, mass: number, stiffness: number, damping: number)

import curves from '@ohos.curves';
@Entry
@Component
struct SpringTest {
  @State translateX: number = 0;

  private jumpWithSpeed(speed: number) {
    this.translateX = -1;
    animateTo({ duration: 2000, curve: curves.springCurve(speed, 1, 1, 1.2) }, () => {
      // 以指定初速度進(jìn)行x方向的平移的彈簧動(dòng)畫
      this.translateX = 0;
    })
  }

  build() {
    Column() {
      Button("button")
        .fontSize(14)
        .width(100)
        .height(50)
        .margin(30)
        .translate({ x: this.translateX })
      Row({space:50}) {
        Button("jump 50").fontSize(14)
          .onClick(() => {
            // 以初速度50的彈簧曲線進(jìn)行平移
            this.jumpWithSpeed(50);
          })
        Button("jump 200").fontSize(14)
          .onClick(() => {
            // 以初速度200的彈簧曲線進(jìn)行平移
            this.jumpWithSpeed(200);
          })
      }.margin(30)
    }.height('100%').width('100%')
  }
}

以上示例中，點(diǎn)擊不同的按鈕，給定springCurve的不同初速度，button會(huì)有“彈性”的到達(dá)指定位置，且button的振幅隨著速度的增大而變大。另外也可以修改springCurve的質(zhì)量、剛度、阻尼參數(shù)，達(dá)到想要的彈性的程度。

springMotion(response?: number, dampingFraction?: number, overlapDuration?: number)

responsiveSpringMotion(response?: number, dampingFraction?: number, overlapDuration?: number)

使用springMotion和responsiveSpringMotion曲線時(shí)，duration不生效，適合于跟手動(dòng)畫。

import curves from '@ohos.curves';

@Entry
@Component
struct SpringMotionTest {
  @State positionX: number = 100;
  @State positionY: number = 100;
  diameter: number = 50;

  build() {
    Column() {
      Row() {
        Circle({ width: this.diameter, height: this.diameter })
          .fill(Color.Blue)
          .position({ x: this.positionX, y: this.positionY })
          .onTouch((event: TouchEvent) => {
            if (event.type === TouchType.Move) {
              // 跟手過程，使用responsiveSpringMotion曲線
              animateTo({ curve: curves.responsiveSpringMotion() }, () => {
                // 減去半徑，以使球的中心運(yùn)動(dòng)到手指位置
                this.positionX = event.touches[0].screenX - this.diameter / 2;
                this.positionY = event.touches[0].screenY - this.diameter / 2;
                console.info(`move, animateTo x:${this.positionX}, y:${this.positionY}`);
              })
            } else if (event.type === TouchType.Up) {
              // 離手時(shí)，使用springMotion曲線
              animateTo({ curve: curves.springMotion() }, () => {
                this.positionX = 100;
                this.positionY = 100;
                console.info(`touchUp, animateTo x:100, y:100`);
              })
            }
          })
      }
      .width("100%").height("80%")
      .clip(true) // 如果球超出父組件范圍，使球不可見
      .backgroundColor(Color.Orange)

      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Center }) {
        Text("拖動(dòng)小球").fontSize(16)
      }
      .width("100%")

      Row() {
        Text('點(diǎn)擊位置: [x: ' + Math.round(this.positionX) + ', y:' + Math.round(this.positionY) + ']').fontSize(16)
      }
      .padding(10)
      .width("100%")
    }.height('100%').width('100%')
  }
}

以上代碼是跟手動(dòng)畫的一個(gè)示例。通過在onTouch事件中，捕捉觸摸的位置，改變組件的translate或者position屬性，使其在跟手過程中運(yùn)動(dòng)到觸摸位置，松手后回到原位置。跟手動(dòng)畫的效果如下：

跟手過程推薦使用responsiveSpringMotion曲線，松手過程推薦使用springMotion曲線。跟手過程隨著手的位置變化會(huì)被多次觸發(fā)，所以會(huì)接連啟動(dòng)多次responsiveSpringMotion動(dòng)畫，松手時(shí)啟動(dòng)一次springMotion動(dòng)畫。跟手、松手過程在對(duì)同一對(duì)象的同一屬性上執(zhí)行動(dòng)畫，且使用了springMotion或responsiveSpringMotion曲線，每次新啟動(dòng)的動(dòng)畫會(huì)繼承上次動(dòng)畫使用的速度，實(shí)現(xiàn)平滑過渡。