HarmonyOS实战开发:@ohos.curves (插值盘算)

[复制链接]
发表于 2026-1-29 13:08:19 | 显示全部楼层 |阅读模式
本模块提供设置动画插值曲线功能,用于构造门路曲线对象、构造三阶贝塞尔曲线对象和构造弹簧曲线对象。
   阐明:
  本模块首批接口从API Version 7开始支持。后续版本如有新增内容,则接纳上角标单独标志该内容的起始版本。
  导入模块

  1. import Curves from '@ohos.curves'
复制代码
曲线.init曲线9+

initCurve(curve?: Curve): ICurve
插值曲线的初始化函数,可以根据入参创建一个插值曲线对象。
体系本领:SystemCapability.ArkUI.ArkUI.Full
参数:
参数名范例必填阐明曲线曲线否曲线范例。
默认值:Curve.Linear返回值:
范例阐明ICurve曲线的插值对象。曲线

从API version 9开始,该接口支持在ArkTS卡片中利用。
体系本领:SystemCapability.ArkUI.ArkUI.Full
名称阐明线性表现动画重新到尾的速率都是雷同的。缓解表现动画以低速开始,然后加快,在竣事前变慢,CubicBezier(0.25, 0.1, 0.25, 1.0)。轻松进入表现动画以低速开始,CubicBezier(0.42, 0.0, 1.0, 1.0)。缓出表现动画以低速竣事,CubicBezier(0.0, 0.0, 0.58, 1.0)。EaseInOut(轻松输出)表现动画以低速开始和竣事,CubicBezier(0.42, 0.0, 0.58, 1.0)。FastOutSlowIn标准曲线,cubic-bezier(0.4, 0.0, 0.2, 1.0)。线性输出慢速输入减速曲线,cubic-bezier(0.0, 0.0, 0.2, 1.0)。FastOut线性输入加快曲线,cubic-bezier(0.4, 0.0, 1.0, 1.0)。极限减速急缓曲线,cubic-bezier(0.0, 0.0, 0.0, 1.0)。锋利锐利曲线,cubic-bezier(0.33, 0.0, 0.67, 1.0)。节奏节奏曲线,cubic-bezier(0.7, 0.0, 0.2, 1.0)。光滑平滑曲线,cubic-bezier(0.4, 0.0, 0.4, 1.0)。摩擦阻尼曲线,CubicBezier(0.2, 0.0, 0.2, 1.0)。示例:
  1. import Curves from '@ohos.curves'
  2. Curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线
复制代码
曲线.steps曲线9+

stepsCurve(count: number, end: boolean): ICurve
构造门路曲线对象。
体系本领:SystemCapability.ArkUI.ArkUI.Full
参数:
参数名范例必填阐明计数数是门路的数目,必要为正整数。
取值范围:[1, +∞)
阐明:
设置小于1的值时,按值为1处置惩罚。竣事布尔是在每个隔断的出发点或是尽头发生阶跃厘革。
-true:在尽头发生阶跃厘革。
-false:在出发点发生阶跃厘革。返回值:
范例阐明ICurve曲线的插值对象。示例:
  1. import Curves from '@ohos.curves'
  2. Curves.stepsCurve(9, true)  //创建一个阶梯曲线
复制代码
Curves.cubicBezier曲线9+

cubicBezierCurve(x1: 数字, y1: 数字, x2: 数字, y2: 数字): ICurve
构造三阶贝塞尔曲线对象,曲线的值必须处于0-1之间。
体系本领:SystemCapability.ArkUI.ArkUI.Full
参数:
参数名范例必填阐明x1数是确定贝塞尔曲线第一点横坐标。
取值范围:[0, 1]
阐明:
设置的值小于0时,按0处置惩罚;设置的值大于1时,按1处置惩罚。Y1数是确定贝塞尔曲线第一点纵坐标。
取值范围:(-∞, +∞)x2数是确定贝塞尔曲线第二点横坐标。
取值范围:[0, 1]
阐明:
设置的值小于0时,按0处置惩罚;设置的值大于1时,按1处置惩罚。Y2数是确定贝塞尔曲线第二点纵坐标。
取值范围:(-∞, +∞)返回值:
范例阐明ICurve曲线的插值对象。示例:
  1. import Curves from '@ohos.curves'
  2. Curves.cubicBezierCurve(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞尔曲线
复制代码
Curves.springCurve9+

springCurve(velocity: number, mass: number, stiffness: number, damping: number): ICurve
构造弹簧曲线对象,曲线外形由弹簧参数决定,动画时长受animation、animateTo中的duration参数控制。
体系本领: SystemCapability.ArkUI.ArkUI.Full
参数: |参数名 |范例 |必填 |阐明 | |--------- |------ |---- |------------------------------------------------------------ | |速率 |数字 |是 |初始速率。是由外部因素对弹性动效产生的影响参数,其目的是包管对象从之前的活动状态平滑的过渡到弹性动效。该速率是归一化速率,其值便是动画开始时的现实速率除以动画属性改变值。
取值范围:(-∞, +∞) | |质量 |数字 |是 |质量。弹性体系的受力对象,会对弹性体系产生惯性影响。质量越大,震荡的幅度越大,规复到平衡位置的速率越慢。
取值范围:(0, +∞)
阐明:
设置的值小于便是0时,按1处置惩罚。 | |刚度 |数字 |是 |刚度。是物体反抗施加的力而形变的水平。在弹性体系中,刚度越大,反抗变形的本领越强,规复到平衡位置的速率就越快。
取值范围:(0, +∞)
阐明:
设置的值小于便是0时,按1处置惩罚。 | |阻尼 |数字 |是 |阻尼。用于形貌体系在受到扰动后震荡及衰减的情况。阻尼越大,弹性活动的震荡次数越少、震荡幅度越小。
取值范围:(0, +∞)
阐明:
设置的值小于便是0时,按1处置惩罚。 |
返回值:
范例阐明ICurve曲线的插值对象。示例:
  1. import Curves from '@ohos.curves'
  2. Curves.springCurve(10, 1, 228, 30) // 创建一个弹簧插值曲线Copy to clipboardErrorCopied
复制代码
曲线.springMotion9+

springMotion(response?: number, dampingFraction?: number, overlapDuration?: number): ICurve
构造弹性动画曲线对象。假如对同一对象的同一属性举行多个弹性动画,每个动画会更换掉前一个动画,并继续之前的速率。
体系本领:SystemCapability.ArkUI.ArkUI.Full
参数:
参数名范例必填阐明相应数否弹簧自然振动周期,决定弹簧复位的速率。
默认值:0.55
单元:秒
取值范围:(0, +∞)
阐明:
设置小于便是0的值时,按默认值0.55处置惩罚。阻尼分数数否阻尼系数。
0表现无阻尼,不停处于震荡状态;
大于0小于1的值为欠阻尼,活动过程中会超出目的值;
便是1为临界阻尼;
大于1为过阻尼,活动过程中渐渐趋于目的值。
默认值:0.825
单元:秒
取值范围:[0, +∞)
阐明:
设置小于0的值时,按默认值0.825处置惩罚。重叠一连时间数否弹性动画衔接时长。发生动画继续时,假如前后两个弹性动画相应差别等,response参数会在overlapDuration时间内平滑过渡。
默认值:0
单元:秒
取值范围:[0, +∞)。
**阐明:**
设置小于0的值时,按默认值0处置惩罚。
弹性动画曲线为物理曲线,animation、animateTo中的duration参数不收效,动画一连时间取决于springMotion动画曲线参数和之前的速率。时间不能归一,故不能通过该曲线的interpolate函数得到插值。返回值:
范例阐明ICurve曲线对象。
阐明: 弹性动画曲线为物理曲线,animation、animateTo、pageTransition中的duration参数不收效,动画一连时间取决于springMotion动画曲线参数和之前的速率。时间不能归一,故不能通过该曲线的interpolate函数得到插值。示例:
  1. import Curves from '@ohos.curves'
  2. Curves.springMotion() // 创建一个默认弹性动画曲线
  3. Curves.springMotion(0.5) // 创建指定response、其余参数默认的弹性动画曲线
  4. Curves.springMotion(0.5, 0.6) // 创建指定response和dampingFraction、其余参数默认的弹性动画曲线
  5. Curves.springMotion(0.5, 0.6, 0) // 创建三个参数均自定义的弹性动画曲线
复制代码
曲线.responsiveSpringMotion9+

responsiveSpringMotion(response?: number, dampingFraction?: number, overlapDuration?: number): ICurve
构造弹性跟手动画曲线对象,是springMotion的一种特例,仅默认参数差别,可与springMotion混淆利用。
体系本领:SystemCapability.ArkUI.ArkUI.Full
参数:
参数名范例必填阐明相应数否表明同springMotion中的response。
默认值:0.15
单元:秒
取值范围:(0, +∞)
阐明:
设置小于便是0的值时,按默认值0.15处置惩罚。阻尼分数数否表明同springMotion中的dampingFraction。
默认值:0.86
单元:秒
取值范围:[0, +∞)
阐明:
设置小于0的值时,按默认值0.86处置惩罚。重叠一连时间数否表明同springMotion中的overlapDuration。
默认值:0.25
单元:秒
取值范围:[0, +∞)
**阐明:**
设置小于0的值时,按默认值0.25处置惩罚。
弹性跟手动画曲线为springMotion的一种特例,仅默认值差别。假如利用自界说参数的弹性曲线,保举利用springMotion构造曲线。假如利用跟手动画,保举利用默认参数的弹性跟手动画曲线。
animation、animateTo中的duration参数不收效,动画一连时间取决于responsiveSpringMotion动画曲线参数和之前的速率,也不能通过该曲线的interpolate函数得到插值。返回值:
范例阐明ICurve曲线对象。
阐明:
1、弹性跟手动画曲线为springMotion的一种特例,仅默认值差别。假如利用自界说参数的弹性曲线,保举利用springMotion构造曲线;假如利用跟手动画,保举利用默认参数的弹性跟手动画曲线。
2、animation、animateTo中的duration参数不收效,动画一连时间取决于responsiveSpringMotion动画曲线参数和之前的速率,也不能通过该曲线的interpolate函数得到插值。示例:
  1. import Curves from '@ohos.curves'
  2. Curves.responsiveSpringMotion() // 创建一个默认弹性跟手动画曲线复制到剪贴板错误复制
复制代码
曲线.interpolatingSpring10+

interpolatingSpring(速率:数,质量:数,刚度:数,阻尼:数):ICurve
构造插值器弹簧曲线对象,天生一条从0到1的动画曲线,现实动画值根据曲线举行插值盘算。动画时间由曲线参数决定,不受animation、animateTo中的duration参数控制。
体系本领:SystemCapability.ArkUI.ArkUI.Full
参数: |参数名 |范例 |必填 |阐明 | |--------- |------ |---- |----- | |速率 |数字 |是 |初始速率。外部因素对弹性动效产生的影响参数,目的是包管对象从之前的活动状态平滑地过渡到弹性动效。该速率是归一化速率,其值便是动画开始时的现实速率除以动画属性改变值。
取值范围:(-∞, +∞) | |质量 |数字 |是 |质量。弹性体系的受力对象,会对弹性体系产生惯性影响。质量越大,震荡的幅度越大,规复到平衡位置的速率越慢。
取值范围:(0, +∞)
阐明:
设置的值小于便是0时,按1处置惩罚。 | |刚度 |数字 |是 |刚度。表现物体反抗施加的力而形变的水平。刚度越大,反抗变形的本领越强,规复到平衡位置的速率越快。
取值范围:(0, +∞)
阐明:
设置的值小于便是0时,按1处置惩罚。 | |阻尼 |数字 |是 |阻尼。用于形貌体系在受到扰动后震荡及衰减的情况。阻尼越大,弹性活动的震荡次数越少、震荡幅度越小。
取值范围:(0, +∞)
阐明:
设置的值小于便是0时,按1处置惩罚。 |
返回值:
范例阐明ICurve曲线对象。
阐明: 弹性动画曲线为物理曲线,animation、animateTo中的duration参数不收效,动画一连时间取决于interpolatingSpring动画曲线参数。时间不能归一,故不能通过该曲线的interpolate函数得到插值。示例:
  1. import Curves from '@ohos.curves'
  2. Curves.interpolatingSpring(10, 1, 228, 30) // 创建一个时长由弹簧参数决定的弹簧插值曲线复制到剪贴板错误复制
复制代码
曲线.customCurve10+

customCurve(interpolate: (fraction: number) => number): ICurve
构造自界说曲线对象。
体系本领:SystemCapability.ArkUI.ArkUI.Full
参数:
参数名范例必填阐明插话(分数:数字)=> 个数字是用户自界说的插值回调函数。
fraction为动画开始时的插值输入x值。取值范围:[0,1]
返回值为曲线的y值。取值范围:[0,1]
阐明:
fraction便是0时,返回值为0对应动画出发点,返回不为0,动画在出发点处有跳变效果。
fraction便是1时,返回值为1对应动画尽头,返回值不为1将导致动画的终值不是状态变量的值,出现大于大概小于状态变量值,再跳变到状态变量值的效果。返回值:
范例阐明ICurve曲线的插值对象。示例:
  1. import Curves from '@ohos.curves'
  2. let interpolate = (fraction:number):number => {
  3.   return Math.sqrt(fraction)
  4. }
  5. let curve = Curves.customCurve(interpolate) // 创建一个用户自定义插值曲线
复制代码
ICurve

插值9+

interpolate(fraction: number): 数字
插值曲线的插值盘算函数,可以通过传入的归一化时间参数返回当前的插值
从API version 9开始,该接口支持在ArkTS卡片中利用。
体系本领:SystemCapability.ArkUI.ArkUI.Full
参数:
参数名范例必填阐明分数数是当前的归一化时间参数。
取值范围:[0,1]
阐明:
设置的值小于0时,按0处置惩罚;设置的值大于1时,按1处置惩罚。返回值:
范例阐明数返回归一化时间点对应的曲线插值。示例:
  1. import Curves from '@ohos.curves'
  2. let curveValue = Curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线
  3. let value: number = curveValue.interpolate(0.5) // 计算得到时间到一半时的插值
复制代码
Curves.init(已弃用)

init(curve?: Curve): 字符串
插值曲线的初始化函数,可以根据入参创建一个插值曲线对象,从API version9开始废弃,保举利用Curves.initCurve。
体系本领:SystemCapability.ArkUI.ArkUI.Full
参数:
参数名范例必填阐明曲线曲线否曲线范例。
默认值:Curve.LinearCurves.steps(已弃用)

steps(count: number, end: boolean): 字符串
构造门路曲线对象,从API version9开始废弃,保举利用[Curves. stepsCurve](# curvesstepscurve9)。
体系本领:SystemCapability.ArkUI.ArkUI.Full
参数:
参数名范例必填阐明计数数是门路的数目,必要为正整数。竣事布尔是在每个隔断的出发点或是尽头发生阶跃厘革。
-true:在尽头发生阶跃厘革。
-false:在出发点发生阶跃厘革。Curves.cubicBezier(已弃用)

cubicBezier(x1: 数字, y1: 数字, x2: 数字, y2: 数字): 字符串
构造三阶贝塞尔曲线对象,曲线的值必须处于0-1之间,API version9开始废弃,保举利用 Curves.cubicBezierCurve。
体系本领:SystemCapability.ArkUI.ArkUI.Full
参数: |参数名 |范例 |必填 |阐明 | |---- |------ |---- |-------------- | |x1 |数字 |是 |确定贝塞尔曲线第一点横坐标。 | |Y1 |数字 |是 |确定贝塞尔曲线第一点纵坐标。 | |x2 系列 |数字 |是 |确定贝塞尔曲线第二点横坐标。 | |Y2 |数字 |是 |确定贝塞尔曲线第二点纵坐标。 |
Curves.spring(已弃用)

弹簧(速率:数,质量:数,刚度:数,阻尼:数):弦
构造弹簧曲线对象,从API version9开始废弃,保举利用Curves.springCurve。
体系本领:SystemCapability.ArkUI.ArkUI.Full
参数:
参数名范例必填阐明速率数是初始速率。是由外部因素对弹性动效产生的影响参数,其目的是包管对象从之前的活动状态平滑地过渡到弹性动效。质量数是质量。弹性体系的受力对象,会对弹性体系产生惯性影响。质量越大,震荡的幅度越大,规复到平衡位置的速率越慢。刚度数是刚度。是物体反抗施加的力而形变的水平。在弹性体系中,刚度越大,反抗变形的本领越强,规复到平衡位置的速率就越快。阻尼数是阻尼。是一个纯数,无真实的物理意义,用于形貌体系在受到扰动后震荡及衰减的情况。阻尼越大,弹性活动的震荡次数越少、震荡幅度越小。团体示例

  1. // xxx.ets
  2. import Curves from '@ohos.curves'
  3. @Entry
  4. @Component
  5. struct ImageComponent {
  6.   @State widthSize: number = 200
  7.   @State heightSize: number = 200
  8.   build() {
  9.     Column() {
  10.       Text()
  11.         .margin({ top: 100 })
  12.         .width(this.widthSize)
  13.         .height(this.heightSize)
  14.         .backgroundColor(Color.Red)
  15.         .onClick(() => {
  16.           let curve = Curves.cubicBezierCurve(0.25, 0.1, 0.25, 1.0);
  17.           this.widthSize = curve.interpolate(0.5) * this.widthSize;
  18.           this.heightSize = curve.interpolate(0.5) * this.heightSize;
  19.         })
  20.         .animation({ duration: 2000, curve: Curves.stepsCurve(9, true) })
  21.     }.width("100%").height("100%")
  22.   }
  23. }
复制代码


末了

有许多小同伴不知道学习哪些鸿蒙开发技能?不知道必要重点把握哪些鸿蒙应用开发知识点?而且学习时频仍踩坑,终极浪费大量时间。以是有一份实用的鸿蒙(HarmonyOS NEXT)资料用来跟着学习优劣常有须要的。 
这份鸿蒙(HarmonyOS NEXT)资料包罗了鸿蒙开发必把握的核心知识要点,内容包罗了(ArkTS、ArkUI开发组件、Stage模子、多端摆设、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(HarmonyOS NEXT)技能知识点。
盼望这一份鸿蒙学习资料可以大概给各人带来资助,有必要的小同伴自行领取,限时开源,先到先得~无套路领取!!
获取这份完备版高清学习门路,请点击→纯血版全套鸿蒙HarmonyOS学习资料
鸿蒙(HarmonyOS NEXT)最新学习门路




  •  HarmonOS根本技能



  • HarmonOS就业必备技能 

  •  HarmonOS多媒体技能



  • 鸿蒙NaPi组件进阶



  • HarmonOS高级技能



  • 初识HarmonOS内核 

  • 实战就业级装备开发

有了门路图,怎么能没有学习资料呢,小编也准备了一份连合鸿蒙官方发布条记整理收纳的一套体系性的鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开发入门教学视频,内容包罗:ArkTS、ArkUI、Web开发、应用模子、资源分类…等知识点。
获取以上完备版高清学习门路,请点击→纯血版全套鸿蒙HarmonyOS学习资料
《鸿蒙 (OpenHarmony)开发入门教学视频》


《鸿蒙生态应用开发V2.0白皮书》


《鸿蒙 (OpenHarmony)开发根本到实战手册》

OpenHarmony北向、南向开发情况搭建

 《鸿蒙开发根本》



  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

 《鸿蒙开发进阶》



  • Stage模子入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 关照与窗口管理
  • 多媒体技能
  • 安全技能
  • 使命管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来筹划
  • 鸿蒙体系移植和裁剪定制
  • ……

《鸿蒙进阶实战》



  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

 获取以上完备鸿蒙HarmonyOS学习资料,请点击→纯血版全套鸿蒙HarmonyOS学习资料
总结

总的来说,华为鸿蒙不再兼容安卓,对中年步调员来说是一个寻衅,也是一个机遇。只有积极应对厘革,不停学习和提拔本身,他们才华在这个厘革的期间中立于不败之地。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×
回复

使用道具 举报

登录后关闭弹窗

登录参与点评抽奖  加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表