HarmonyOS應(yīng)用開發(fā)TS動畫插值計算體驗

說明：從 API Version 7 開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標單獨標記該內(nèi)容的起始版本。

導入模塊：

import curves from ‘@ohos.curves’

curves.init

init(curve?: Curve): Object

插值曲線的初始化函數(shù)，可以根據(jù)入?yún)?chuàng)建一個插值曲線對象。

參數(shù)：

返回值：
曲線對象Object。

curves.steps
steps(count: number, end: boolean): Object
構(gòu)造階梯曲線對象。
參數(shù)：

返回值：
曲線對象Object。

curves.cubicBezier
cubicBezier(x1: number, y1: number, x2: number, y2: number): Object
構(gòu)造三階貝塞爾曲線對象，曲線的值必須處于0-1之間。
參數(shù)：

返回值：
曲線對象Object。

curves.spring
spring(velocity: number, mass: number, stiffness: number, damping: number): Object
構(gòu)造彈簧曲線對象。
參數(shù)：

返回值：
曲線對象Object。

示例：

import Curves from '@ohos.curves'
@Entry
@Component
struct ImageComponent {
  @State widthSize: number = 200
  @State heightSize: number = 200
  build() {
    Column() {
      Text()
        .margin({top:100})
        .width(this.widthSize)
        .height(this.heightSize)
        .backgroundColor(Color.Red)
        .onClick(()=> {
          let curve = Curves.cubicBezier(0.25, 0.1, 0.25, 1.0);
          this.widthSize = curve.interpolate(0.5) * this.widthSize;
          this.heightSize = curve.interpolate(0.5) * this.heightSize;
        })
        .animation({duration: 2000 , curve: Curves.spring(0.25, 0.1, 0.25, 1.0)})
    }.width("100%").height("100%")
  }
}

復制

審核編輯：湯梓紅