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

鸿蒙时代
发布于 2022-3-9 10:10
浏览
0收藏

HarmonyOS应用开发-TS动画插值计算体验-鸿蒙开发者社区
说明:从 API Version 7 开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

导入模块:

import curves from ‘@ohos.curves’

curves.init

init(curve?: Curve): Object

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

参数:
HarmonyOS应用开发-TS动画插值计算体验-鸿蒙开发者社区
返回值:
曲线对象Object。

curves.steps
steps(count: number, end: boolean): Object
构造阶梯曲线对象。
参数:
HarmonyOS应用开发-TS动画插值计算体验-鸿蒙开发者社区
返回值:
曲线对象Object。

curves.cubicBezier
cubicBezier(x1: number, y1: number, x2: number, y2: number): Object
构造三阶贝塞尔曲线对象,曲线的值必须处于0-1之间。
参数:
HarmonyOS应用开发-TS动画插值计算体验-鸿蒙开发者社区
返回值:
曲线对象Object。

curves.spring
spring(velocity: number, mass: number, stiffness: number, damping: number): Object
构造弹簧曲线对象。
参数:
HarmonyOS应用开发-TS动画插值计算体验-鸿蒙开发者社区
返回值:
曲线对象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%")
  }
}

效果:
HarmonyOS应用开发-TS动画插值计算体验-鸿蒙开发者社区

分类
标签
HarmonyOS应用开发-TS动画插值计算体验.docx 29.93K 4次下载
1
收藏
回复
举报
回复
    相关推荐