回复
HarmonyOS API：UI界面
joytrian
发布于 2023-4-2 10:18
浏览
0收藏
版本：v3.1 Beta
@ohos.curves (插值计算)
更新时间: 2023-02-17 09:19
本模块提供设置动画插值曲线功能，用于构造阶梯曲线对象、构造三阶贝塞尔曲线对象和构造弹簧曲线对象。
说明
本模块首批接口从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
导入模块
import Curves from '@ohos.curves'
Curves.initCurve9+
initCurve(curve?: Curve)：ICurve
插值曲线的初始化函数，可以根据入参创建一个插值曲线对象。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名 | 类型 | 必填 | 默认值 | 说明 |
curve | Curve | 否 | Curve.Linear | 曲线类型。 |
返回值：
类型 | 说明 |
ICurve | 曲线的插值对象。 |
示例：
import Curves from '@ohos.curves'
Curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线
Curves.stepsCurve9+
stepsCurve(count: number, end: boolean)：ICurve
构造阶梯曲线对象。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名 | 类型 | 必填 | 说明 |
count | number | 是 | 阶梯的数量，需要为正整数。 |
end | boolean | 是 | 在每个间隔的起点或是终点发生阶跃变化。 -true：在终点发生阶跃变化。 -false：在起点发生阶跃变化。 |
返回值：
类型 | 说明 |
ICurve | 曲线的插值对象。 |
示例：
import Curves from '@ohos.curves'
Curves.stepsCurve(9, true) //创建一个阶梯曲线
Curves.cubicBezierCurve9+
cubicBezierCurve(x1: number, y1: number, x2: number, y2: number)：ICurve
构造三阶贝塞尔曲线对象，曲线的值必须处于0-1之间。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名 | 类型 | 必填 | 说明 |
x1 | number | 是 | 确定贝塞尔曲线第一点横坐标。 |
y1 | number | 是 | 确定贝塞尔曲线第一点纵坐标。 |
x2 | number | 是 | 确定贝塞尔曲线第二点横坐标。 |
y2 | number | 是 | 确定贝塞尔曲线第二点纵坐标。 |
返回值：
类型 | 说明 |
ICurve | 曲线的插值对象。 |
示例：
import Curves from '@ohos.curves'
Curves.cubicBezierCurve(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞尔曲线
Curves.springCurve9+
springCurve(velocity: number, mass: number, stiffness: number, damping: number)：ICurve
构造弹簧曲线对象。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名 | 类型 | 必填 | 说明 |
velocity | number | 是 | 初始速度。是由外部因素对弹性动效产生的影响参数，其目的是保证对象从之前的运动状态平滑的过渡到弹性动效。 |
mass | number | 是 | 质量。弹性系统的受力对象，会对弹性系统产生惯性影响。质量越大，震荡的幅度越大，恢复到平衡位置的速度越慢。 |
stiffness | number | 是 | 刚度。是物体抵抗施加的力而形变的程度。在弹性系统中，刚度越大，抵抗变形的能力越强，恢复到平衡位置的速度就越快。 |
damping | number | 是 | 阻尼。是一个纯数，无真实的物理意义，用于描述系统在受到扰动后震荡及衰减的情形。阻尼越大，弹性运动的震荡次数越少、震荡幅度越小。 |
返回值：
类型 | 说明 |
ICurve | 曲线的插值对象。 |
示例：
import Curves from '@ohos.curves'
Curves.springCurve(100, 1, 228, 30) // 创建一个弹簧插值曲线
ICurve
interpolate
interpolate(fraction: number): number
插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名 | 类型 | 必填 | 说明 |
fraction | number | 是 | 当前的归一化时间参数，有效值范围0到1。 |
返回值：
类型 | 说明 |
number | 返回归一化time时间点对应的曲线插值。 |
示例：
import Curves from '@ohos.curves'
let curve = Curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线
let value: number = curve.interpolate(0.5) // 计算得到时间到一半时的插值
Curves.init(deprecated)
init(curve?: Curve): string
插值曲线的初始化函数，可以根据入参创建一个插值曲线对象，从API version9开始废弃，推荐使用Curves.initCurve。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名 | 类型 | 必填 | 默认值 | 说明 |
curve | Curve | 否 | Curve.Linear | 曲线类型。 |
Curves.steps(deprecated)
steps(count: number, end: boolean): string
构造阶梯曲线对象，从API version9开始废弃，推荐使用Curves.stepsCurve。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名 | 类型 | 必填 | 说明 |
count | number | 是 | 阶梯的数量，需要为正整数。 |
end | boolean | 是 | 在每个间隔的起点或是终点发生阶跃变化。 -true：在终点发生阶跃变化。 -false：在起点发生阶跃变化。 |
Curves.cubicBezier(deprecated)
cubicBezier(x1: number, y1: number, x2: number, y2: number): string
构造三阶贝塞尔曲线对象，曲线的值必须处于0-1之间，API version9开始废弃，推荐使用 Curves.cubicBezierCurve。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名 | 类型 | 必填 | 说明 |
x1 | number | 是 | 确定贝塞尔曲线第一点横坐标。 |
y1 | number | 是 | 确定贝塞尔曲线第一点纵坐标。 |
x2 | number | 是 | 确定贝塞尔曲线第二点横坐标。 |
y2 | number | 是 | 确定贝塞尔曲线第二点纵坐标。 |
Curves.spring(deprecated)
spring(velocity: number, mass: number, stiffness: number, damping: number): string
构造弹簧曲线对象，从API version9开始废弃，推荐使用Curves.springCurve。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名 | 类型 | 必填 | 说明 |
velocity | number | 是 | 初始速度。是由外部因素对弹性动效产生的影响参数，其目的是保证对象从之前的运动状态平滑的过渡到弹性动效。 |
mass | number | 是 | 质量。弹性系统的受力对象，会对弹性系统产生惯性影响。质量越大，震荡的幅度越大，恢复到平衡位置的速度越慢。 |
stiffness | number | 是 | 刚度。是物体抵抗施加的力而形变的程度。在弹性系统中，刚度越大，抵抗变形的能力越强，恢复到平衡位置的速度就越快。 |
damping | number | 是 | 阻尼。是一个纯数，无真实的物理意义，用于描述系统在受到扰动后震荡及衰减的情形。阻尼越大，弹性运动的震荡次数越少、震荡幅度越小。 |
整体示例
// xxx.ets
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.cubicBezierCurve(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.stepsCurve(9, true)})
}.width("100%").height("100%")
}
}
@ohos.mediaquery (媒体查询)
更新时间: 2023-02-17 09:19
提供根据不同媒体类型定义不同的样式。
说明
从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
导入模块
import mediaquery from '@ohos.mediaquery'
mediaquery.matchMediaSync
matchMediaSync(condition: string): MediaQueryListener
设置媒体查询的查询条件，并返回对应的监听句柄。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名 | 类型 | 必填 | 说明 |
condition | string | 是 | 媒体事件的匹配条件，具体可参考媒体查询语法规则。 |
返回值：
类型 | 说明 |
MediaQueryListener | 媒体事件监听句柄，用于注册和去注册监听回调。 |
示例：
let listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件
MediaQueryListener
媒体查询的句柄，并包含了申请句柄时的首次查询结果。
系统能力： SystemCapability.ArkUI.ArkUI.Full
属性
名称 | 类型 | 可读 | 可写 | 说明 |
matches | boolean | 是 | 否 | 是否符合匹配条件。 |
media | string | 是 | 否 | 媒体事件的匹配条件。 |
on
on(type: 'change', callback: Callback<MediaQueryResult>): void
通过句柄向对应的查询条件注册回调，当媒体属性发生变更时会触发该回调。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名 | 类型 | 必填 | 说明 |
type | string | 是 | 必须填写字符串'change'。 |
callback | Callback<MediaQueryResult> | 是 | 向媒体查询注册的回调 |
示例：
详见off示例。
off
off(type: 'change', callback?: Callback<MediaQueryResult>): void
通过句柄向对应的查询条件去注册回调，当媒体属性发生变更时不在触发指定的回调。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名 | 类型 | 必填 | 说明 |
type | string | 是 | 必须填写字符串'change'。 |
callback | Callback<MediaQueryResult> | 否 | 需要去注册的回调，如果参数缺省则去注册该句柄下所有的回调。 |
示例：
import mediaquery from '@ohos.mediaquery'
let listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件
function onPortrait(mediaQueryResult) {
if (mediaQueryResult.matches) {
// do something here
} else {
// do something here
}
}
listener.on('change', onPortrait) // 注册回调
listener.off('change', onPortrait) // 去注册回调
MediaQueryResult
用于执行媒体查询操作。
系统能力： SystemCapability.ArkUI.ArkUI.Full
属性
名称 | 类型 | 可读 | 可写 | 说明 |
matches | boolean | 是 | 否 | 是否符合匹配条件。 |
media | string | 是 | 否 | 媒体事件的匹配条件。 |
示例
import mediaquery from '@ohos.mediaquery'
@Entry
@Component
struct MediaQueryExample {
@State color: string = '#DB7093'
@State text: string = 'Portrait'
listener = mediaquery.matchMediaSync('(orientation: landscape)')
onPortrait(mediaQueryResult) {
if (mediaQueryResult.matches) {
this.color = '#FFD700'
this.text = 'Landscape'
} else {
this.color = '#DB7093'
this.text = 'Portrait'
}
}
aboutToAppear() {
let portraitFunc = this.onPortrait.bind(this) // bind current js instance
this.listener.on('change', portraitFunc)
}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text(this.text).fontSize(24).fontColor(this.color)
}
.width('100%').height('100%')
}
}分类
已于2023-4-2 10:18:23修改
赞
收藏
回复
相关推荐
