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

鸿蒙时代

发布于 2022-3-9 10:10

4805浏览

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%")
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

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

分类

HarmonyOS

标签

HarmonyOS

HarmonyOS应用开发-TS动画插值计算体验.docx 29.93K 4次下载

51CTO

51CTO博客

51CTO学堂

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

订阅鸿蒙技术特刊，精选内容抢先看