HarmonyOS应用开发TS动画插值计算体验

 

说明：从 API Version 7 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

导入模块：

import curves from ‘@ohos.curves’

curves.init

init(curve?: Curve): Object

插值曲线的初始化函数，可以根据入参创建一个插值曲线对象。

参数：
 

返回值：
曲线对象Object。

curves.steps
steps(count: number, end: boolean): Object
构造阶梯曲线对象。
参数：
 

返回值：
曲线对象Object。

curves.cubicBezier
cubicBezier(x1: number, y1: number, x2: number, y2: number): Object
构造三阶贝塞尔曲线对象，曲线的值必须处于0-1之间。
参数：
 

返回值：
曲线对象Object。

curves.spring
spring(velocity: number, mass: number, stiffness: number, damping: number): Object
构造弹簧曲线对象。
参数：
 

返回值：
曲线对象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%")
  }
}

复制

审核编辑：汤梓红