说明:从 API Version 7 开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
导入模块:
import curves from ‘@ohos.curves’
curves.init
init(curve?: Curve): Object
插值曲线的初始化函数,可以根据入参创建一个插值曲线对象。
参数:
![HarmonyOS应用开发TS动画插值计算体验](https://file.elecfans.com//web2/M00/34/E6/pYYBAGIoDaGABCYLAAAXC7UnuXw433.png?x-oss-process=image/resize,w_738,h_112)
返回值:
曲线对象Object。
curves.steps
steps(count: number, end: boolean): Object
构造阶梯曲线对象。
参数:
![HarmonyOS应用开发-TS动画插值计算体验-OpenHarmony技术社区](https://file.elecfans.com//web2/M00/34/DF/poYBAGIoDaKALnltAAA_ZLcyC5M831.png?x-oss-process=image/resize,w_742,h_276)
返回值:
曲线对象Object。
curves.cubicBezier
cubicBezier(x1: number, y1: number, x2: number, y2: number): Object
构造三阶贝塞尔曲线对象,曲线的值必须处于0-1之间。
参数:
![HarmonyOS应用开发TS动画插值计算体验](https://file.elecfans.com//web2/M00/34/E7/pYYBAGIoDaKAWrlaAAA58TTkR1c635.png?x-oss-process=image/resize,w_700,h_248)
返回值:
曲线对象Object。
curves.spring
spring(velocity: number, mass: number, stiffness: number, damping: number): Object
构造弹簧曲线对象。
参数:
![HarmonyOS应用开发TS动画插值计算体验](https://file.elecfans.com//web2/M00/34/DF/poYBAGIoDaOAJIpPAAAwoktinno398.png?x-oss-process=image/resize,w_762,h_244)
返回值:
曲线对象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%")
}
}
复制
审核编辑:汤梓红
-
计算
+关注
关注
2文章
433浏览量
38538 -
曲线
+关注
关注
1文章
81浏览量
20761 -
HarmonyOS
+关注
关注
79文章
1935浏览量
29538
发布评论请先 登录
相关推荐
OpenHarmony实战开发-如何实现组件动画。
![OpenHarmony实战<b class='flag-5'>开发</b>-如何实现组件<b class='flag-5'>动画</b>。](https://file1.elecfans.com/web2/M00/DF/14/wKgaomYt_x2Ab_qaAAEJlEQIlYw492.jpg)
评论