Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 650b218b 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!7840 新增animation api的资料 

Merge pull request !7840 from leafly2021/0415_master
上级 da362e9e a41a5d01
显示空白变更内容
内联 并排
Showing with 689 addition and 224 deletion
zh-cn/application-dev/reference/apis/js-apis-window.md
浏览文件 @ 650b218b
...@@ -210,7 +210,7 @@ import window from '@ohos.window'; ...@@ -210,7 +210,7 @@ import window from '@ohos.window';
**系统能力：** SystemCapability.WindowManager.WindowManager.Core **系统能力：** SystemCapability.WindowManager.WindowManager.Core
| 名称 | 参数类型 | 可读 | 可写 | 说明 | | 名称 | 参数类型 | 可读 | 可写 | 说明 |
| ------------------------------- | ------------------------- | ---- | ---- | -------------------------------------------- | | ------------------------------------- | ------------------------- | ---- | ---- | ------------------------------------------------------------ |
| windowRect<sup>7+</sup> | [Rect](#rect) | 是 | 是 | 窗口尺寸。 | | windowRect<sup>7+</sup> | [Rect](#rect) | 是 | 是 | 窗口尺寸。 |
| type<sup>7+</sup> | [WindowType](#windowtype) | 是 | 是 | 窗口类型。 | | type<sup>7+</sup> | [WindowType](#windowtype) | 是 | 是 | 窗口类型。 |
| isFullScreen | boolean | 是 | 是 | 是否全屏，默认为false。 | | isFullScreen | boolean | 是 | 是 | 是否全屏，默认为false。 |
...@@ -218,10 +218,10 @@ import window from '@ohos.window'; ...@@ -218,10 +218,10 @@ import window from '@ohos.window';
| focusable<sup>7+</sup> | boolean | 是 | 否 | 窗口是否可聚焦，默认为true。 | | focusable<sup>7+</sup> | boolean | 是 | 否 | 窗口是否可聚焦，默认为true。 |
| touchable<sup>7+</sup> | boolean | 是 | 否 | 窗口是否可触摸，默认为true。 | | touchable<sup>7+</sup> | boolean | 是 | 否 | 窗口是否可触摸，默认为true。 |
| brightness | number | 是 | 是 | 屏幕亮度， 取值范围为0~1，1表示最大亮度值。 | | brightness | number | 是 | 是 | 屏幕亮度， 取值范围为0~1，1表示最大亮度值。 |
| dimBehindValue<sup>(deprecated)</sup> | number | 是 | 是 | 靠后窗口的暗度值，取值范围为0~1，1表示最暗。<br>- **说明：** 从API version 9开始废弃。<br>- 从 API version 7开始支持| | dimBehindValue<sup>(deprecated)</sup> | number | 是 | 是 | 靠后窗口的暗度值，取值范围为0~1，1表示最暗。<br>- **说明：** 从API version 9开始废弃。<br>- 从 API version 7开始支持 |
| isKeepScreenOn | boolean | 是 | 是 | 屏幕是否常亮，默认为false。 | | isKeepScreenOn | boolean | 是 | 是 | 屏幕是否常亮，默认为false。 |
| isPrivacyMode<sup>7+</sup> | boolean | 是 | 是 | 隐私模式，默认为false。 | | isPrivacyMode<sup>7+</sup> | boolean | 是 | 是 | 隐私模式，默认为false。 |
| isRoundCorner<sup>7+</sup> | boolean | 是 | 是 | 窗口是否为圆角。默认为false。 | | isRoundCorner<sup>(deprecated)</sup> | boolean | 是 | 是 | 窗口是否为圆角。默认为false。<br>- **说明：** 从API version 9开始废弃。<br/>- 从 API version 7开始支持 |
| isTransparent<sup>7+</sup> | boolean | 是 | 是 | 窗口是否透明。默认为false。 | | isTransparent<sup>7+</sup> | boolean | 是 | 是 | 窗口是否透明。默认为false。 |
## ColorSpace<sup>8+</sup> ## ColorSpace<sup>8+</sup>
...@@ -235,6 +235,51 @@ import window from '@ohos.window'; ...@@ -235,6 +235,51 @@ import window from '@ohos.window';
| DEFAULT | 0 | 默认色域模式。 | | DEFAULT | 0 | 默认色域模式。 |
| WIDE_GAMUT | 1 | 广色域模式。 | | WIDE_GAMUT | 1 | 广色域模式。 |
## ScaleOptions<sup>9+</sup>
缩放参数。
此接口为系统接口。
**系统能力**：SystemCapability.WindowManager.WindowManager.Core
| 名称 | 参数类型 | 可读 | 可写 | 说明 |
| ------ | -------- | ---- | ---- | -------------------------------------------------- |
| x | number | 否 | 是 | X轴的缩放参数，默认值为1.0。 |
| y | number | 否 | 是 | Y轴的缩放参数，默认值为1.0。 |
| pivotX | number | 否 | 是 | 缩放中心点X轴坐标，默认值为0.5， 取值范围0.0~1.0。 |
| pivotY | number | 否 | 是 | 缩放中心点Y轴坐标，默认值为0.5， 取值范围0.0~1.0。 |
## RotateOptions<sup>9+</sup>
旋转参数。
此接口为系统接口。
**系统能力**：SystemCapability.WindowManager.WindowManager.Core
| 名称 | 参数类型 | 可读 | 可写 | 说明 |
| ------ | -------- | ---- | ---- | -------------------------------------------------- |
| x | number | 否 | 是 | 绕X轴的旋转角度，默认值为0.0。 |
| y | number | 否 | 是 | 绕Y轴的旋转角度，默认值为0.0。 |
| z | number | 否 | 是 | 绕Z轴的旋转角度，默认值为0.0。 |
| pivotX | number | 否 | 是 | 旋转中心点X轴坐标，默认值为0.5， 取值范围0.0~1.0。 |
| pivotY | number | 否 | 是 | 旋转中心点Y轴坐标，默认值为0.5， 取值范围0.0~1.0。 |
## TranslateOptions<sup>9+</sup>
平移参数。
此接口为系统接口。
**系统能力**：SystemCapability.WindowManager.WindowManager.Core
| 名称 | 参数类型 | 可读 | 可写 | 说明 |
| ---- | -------- | ---- | ---- | ---------------------------- |
| x | number | 否 | 是 | X轴的平移参数，默认值为0.0。 |
| y | number | 否 | 是 | Y轴的平移参数，默认值为0.0。 |
| z | number | 否 | 是 | Z轴的平移参数，默认值为0.0。 |
## window.create<sup>7+</sup> ## window.create<sup>7+</sup>
create(id: string, type: WindowType, callback: AsyncCallback&lt;Window&gt;): void create(id: string, type: WindowType, callback: AsyncCallback&lt;Window&gt;): void
...@@ -854,6 +899,61 @@ promise.then((data)=> { ...@@ -854,6 +899,61 @@ promise.then((data)=> {
}) })
``` ```
### hideWithAnimation<sup>9+</sup>
hideWithAnimation(callback: AsyncCallback&lt;void&gt;): void
隐藏当前窗口，过程中播放动画，使用callback异步回调。
此接口为系统接口。
**系统能力：** SystemCapability.WindowManager.WindowManager.Core
**参数：**
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ------------------------- | ---- | ---------- |
| callback | AsyncCallback&lt;void&gt; | 是 | 回调函数。 |
**示例：**
```js
windowClass.hideWithAnimation((err, data) => {
if (err.code) {
console.error('Failed to hide the window with animation. Cause: ' + JSON.stringify(err));
return;
}
console.info('window hidden with animation. data: ' + JSON.stringify(data));
})
```
### hideWithAnimation<sup>9+</sup>
hideWithAnimation(): Promise&lt;void&gt;
隐藏当前窗口，过程中播放动画，使用Promise异步回调。
此接口为系统接口。
**系统能力：** SystemCapability.WindowManager.WindowManager.Core
**返回值：**
| 类型 | 说明 |
| ------------------- | ------------------------- |
| Promise&lt;void&gt; | 无返回结果的Promise对象。 |
**示例：**
```js
let promise = windowClass.hideWithAnimation();
promise.then((data)=> {
console.info('window hidden with animation. Data: ' + JSON.stringify(data));
}).catch((err)=>{
console.error('Failed to hide the window with animation. Cause: ' + JSON.stringify(err));
})
```
### show<sup>7+</sup> ### show<sup>7+</sup>
show(callback: AsyncCallback&lt;void&gt;): void show(callback: AsyncCallback&lt;void&gt;): void
...@@ -905,6 +1005,61 @@ promise.then((data)=> { ...@@ -905,6 +1005,61 @@ promise.then((data)=> {
}) })
``` ```
### showWithAnimation<sup>9+</sup>
showWithAnimation(callback: AsyncCallback&lt;void&gt;): void
显示当前窗口，过程中播放动画，使用callback异步回调。
此接口为系统接口。
**系统能力：** SystemCapability.WindowManager.WindowManager.Core
**参数：**
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ------------------------- | ---- | ---------- |
| callback | AsyncCallback&lt;void&gt; | 是 | 回调函数。 |
**示例：**
```js
windowClass.showWithAnimation((err, data) => {
if (err.code) {
console.error('Failed to show the window with animation. Cause: ' + JSON.stringify(err));
return;
}
console.info('Succeeded in showing the window with animation. Data: ' + JSON.stringify(data));
})
```
### showWithAnimation<sup>9+</sup>
showWithAnimation(): Promise&lt;void&gt;
显示当前窗口，过程中播放动画，使用Promise异步回调。
此接口为系统接口。
**系统能力：** SystemCapability.WindowManager.WindowManager.Core
**返回值：**
| 类型 | 说明 |
| ------------------- | ------------------------- |
| Promise&lt;void&gt; | 无返回结果的Promise对象。 |
**示例：**
```js
let promise = windowClass.showWithAnimation();
promise.then((data)=> {
console.info('Succeeded in showing the window with animation. Data: ' + JSON.stringify(data));
}).catch((err)=>{
console.error('Failed to show the window with animation. Cause: ' + JSON.stringify(err));
})
```
### destroy<sup>7+</sup> ### destroy<sup>7+</sup>
destroy(callback: AsyncCallback&lt;void&gt;): void destroy(callback: AsyncCallback&lt;void&gt;): void
...@@ -1077,7 +1232,7 @@ promise.then((data)=> { ...@@ -1077,7 +1232,7 @@ promise.then((data)=> {
}); });
``` ```
### setWindowType<sup>7+</sup> ### setWindowType<sup>(deprecated)</sup>
setWindowType(type: WindowType, callback: AsyncCallback&lt;void&gt;): void setWindowType(type: WindowType, callback: AsyncCallback&lt;void&gt;): void
...@@ -1085,6 +1240,10 @@ setWindowType(type: WindowType, callback: AsyncCallback&lt;void&gt;): void ...@@ -1085,6 +1240,10 @@ setWindowType(type: WindowType, callback: AsyncCallback&lt;void&gt;): void
此接口为系统接口。 此接口为系统接口。
> **说明：** 从API version 9开始废弃。
>
> 从 API version 7开始支持。
**系统能力：** SystemCapability.WindowManager.WindowManager.Core **系统能力：** SystemCapability.WindowManager.WindowManager.Core
**参数：** **参数：**
...@@ -1107,7 +1266,7 @@ windowClass.setWindowType(type, (err, data) => { ...@@ -1107,7 +1266,7 @@ windowClass.setWindowType(type, (err, data) => {
}); });
``` ```
### setWindowType<sup>7+</sup> ### setWindowType<sup>(deprecated)</sup>
setWindowType(type: WindowType): Promise&lt;void&gt; setWindowType(type: WindowType): Promise&lt;void&gt;
...@@ -1115,6 +1274,10 @@ setWindowType(type: WindowType): Promise&lt;void&gt; ...@@ -1115,6 +1274,10 @@ setWindowType(type: WindowType): Promise&lt;void&gt;
此接口为系统接口。 此接口为系统接口。
> **说明：** 从API version 9开始废弃。
>
> 从 API version 7开始支持。
**系统能力：** SystemCapability.WindowManager.WindowManager.Core **系统能力：** SystemCapability.WindowManager.WindowManager.Core
**参数：** **参数：**
...@@ -1946,6 +2109,7 @@ windowClass.off('keyboardHeightChange'); ...@@ -1946,6 +2109,7 @@ windowClass.off('keyboardHeightChange');
on(type: 'touchOutside', callback: Callback&lt;void&gt;): void on(type: 'touchOutside', callback: Callback&lt;void&gt;): void
开启本窗口区域范围外的点击事件的监听。 开启本窗口区域范围外的点击事件的监听。
此接口为系统接口。 此接口为系统接口。
**系统能力：** SystemCapability.WindowManager.WindowManager.Core **系统能力：** SystemCapability.WindowManager.WindowManager.Core
...@@ -1970,6 +2134,7 @@ windowClass.on('touchOutside', () => { ...@@ -1970,6 +2134,7 @@ windowClass.on('touchOutside', () => {
off(type: 'touchOutside', callback?: Callback&lt;void&gt;): void off(type: 'touchOutside', callback?: Callback&lt;void&gt;): void
关闭本窗口区域范围外的点击事件的监听。 关闭本窗口区域范围外的点击事件的监听。
此接口为系统接口。 此接口为系统接口。
**系统能力：** SystemCapability.WindowManager.WindowManager.Core **系统能力：** SystemCapability.WindowManager.WindowManager.Core
...@@ -2406,7 +2571,7 @@ setWakeUpScreen(wakeUp: boolean): void; ...@@ -2406,7 +2571,7 @@ setWakeUpScreen(wakeUp: boolean): void;
窗口唤醒屏幕。 窗口唤醒屏幕。
此接口为系统接口，三方应用不支持调用。 此接口为系统接口。
**系统能力：** SystemCapability.WindowManager.WindowManager.Core **系统能力：** SystemCapability.WindowManager.WindowManager.Core
...@@ -3107,6 +3272,163 @@ setCornerRadius(cornerRadius: number): void ...@@ -3107,6 +3272,163 @@ setCornerRadius(cornerRadius: number): void
windowClass.setCornerRadius(4.0); windowClass.setCornerRadius(4.0);
``` ```
### opacity<sup>9+</sup>
opacity(opacity: number): void
设置窗口透明度。
此接口为系统接口。
**系统能力：** SystemCapability.WindowManager.WindowManager.Core
**参数：**
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- | --------------------- |
| opacity | number | 是 | 透明度，范围0.0~1.0。 |
**示例：**
```ts
windowClass.opacity(0.5);
console.log('set window opacity end');
```
### scale<sup>9+</sup>
scale(scaleOptions: ScaleOptions): void
设置窗口缩放参数。
此接口为系统接口。
**系统能力：** SystemCapability.WindowManager.WindowManager.Core
**参数：**
| 参数名 | 类型 | 必填 | 说明 |
| ------------ | ------------------------------ | ---- | ---------- |
| scaleOptions | [ScaleOptions](#scaleoptions9) | 是 | 缩放参数。 |
**示例：**
```ts
var obj : window.ScaleOptions;
obj.x = 2.0;
obj.y = 1.0;
obj.pivotX = 0.5;
obj.pivotY = 0.5;
windowClass.scale(obj);
console.log('set window scale end');
```
### rotate<sup>9+</sup>
rotate(rotateOptions: RotateOptions): void
设置窗口旋转参数。
此接口为系统接口。
**系统能力：** SystemCapability.WindowManager.WindowManager.Core
**参数：**
| 参数名 | 类型 | 必填 | 说明 |
| ------------- | -------------------------------- | ---- | ---------- |
| rotateOptions | [RotateOptions](#rotateoptions9) | 是 | 旋转参数。 |
**示例：**
```ts
var obj : window.RotateOptions;
obj.x = 1.0;
obj.y = 1.0;
obj.z = 45.0;
obj.pivotX = 0.5;
obj.pivotY = 0.5;
windowClass.rotate(obj);
console.log('set window rotate end');
```
### translate<sup>9+</sup>
translate(translateOptions: TranslateOptions): void
设置窗口平移参数。
此接口为系统接口。
**系统能力：** SystemCapability.WindowManager.WindowManager.Core
**参数：**
| 参数名 | 类型 | 必填 | 说明 |
| ---------------- | -------------------------------------- | ---- | ---------- |
| translateOptions | [TranslateOptions](#translateoptions9) | 是 | 平移参数。 |
**示例：**
```ts
var obj : window.TranslateOptions;
obj.x = 100.0;
obj.y = 0.0;
obj.z = 0.0;
windowClass.translate(obj);
console.log('set window translate end');
```
### getTransitionController<sup>9+</sup>
getTransitionController(): TransitionController
获取窗口属性转换控制器。
此接口为系统接口。
**系统能力：** SystemCapability.WindowManager.WindowManager.Core
**返回值：**
| 类型 | 说明 |
| ---------------------------------------------- | ---------------- |
| [TransitionController](#transitioncontroller9) | 属性转换控制器。 |
**示例：**
```ts
let controller = windowClass.getTransitionController(); // 获取属性转换控制器
controller.animationForHidden = (context : window.TransitionContext) => {
let toWindow = context.toWindow
animateTo({
duration: 1000, // 动画时长
tempo: 0.5, // 播放速率
curve: Curve.EaseInOut, // 动画曲线
delay: 0, // 动画延迟
iterations: 1, // 播放次数
playMode: PlayMode.Normal, // 动画模式
}, () => {
var obj : window.TranslateOptions;
obj.x = 100.0;
obj.y = 0.0;
obj.z = 0.0;
toWindow.translate(obj); // 设置动画过程中的属性转换
console.info('toWindow translate end');
}
)
context.completeTransition(true)
console.info('complete transition end');
}
windowClass.showWithAnimation((err, data) => {
if (err.code) {
console.error('Failed to show the window with animation. Cause: ' + JSON.stringify(err));
return;
}
console.info('Succeeded in showing the window with animation. Data: ' + JSON.stringify(data));
})
```
## WindowStageEventType<sup>9+</sup> ## WindowStageEventType<sup>9+</sup>
WindowStage生命周期。 WindowStage生命周期。
...@@ -3551,7 +3873,8 @@ class myAbility extends Ability { ...@@ -3551,7 +3873,8 @@ class myAbility extends Ability {
setShowOnLockScreen(showOnLockScreen: boolean): void setShowOnLockScreen(showOnLockScreen: boolean): void
设置应用显示在锁屏之上。 设置应用显示在锁屏之上。
此接口为系统接口，三方应用不支持调用。
此接口为系统接口。
此接口仅可在Stage模型下使用。 此接口仅可在Stage模型下使用。
...@@ -3574,4 +3897,146 @@ class myAbility extends Ability { ...@@ -3574,4 +3897,146 @@ class myAbility extends Ability {
} }
} }
``` ```
## TransitionContext<sup>9+</sup>
属性转换的上下文信息。
此接口为系统接口。
### toWindow<sup>9+</sup>
**系统能力**：SystemCapability.WindowManager.WindowManager.Core
| 名称 | 参数类型 | 可读 | 可写 | 说明 |
| -------- | ----------------- | ---- | ---- | ---------------- |
| toWindow | [Window](#window) | 是 | 是 | 动画的目标窗口。 |
### completeTransition<sup>9+</sup>
completeTransition(isCompleted: boolean): void
设置属性转换的最终完成状态。该函数需要在动画函数[animateTo()](../arkui-ts/ts-explicit-animation.md)执行后设置。
**系统能力**：SystemCapability.WindowManager.WindowManager.Core
**参数：**
| 参数名 | 类型 | 必填 | 说明 |
| ----------- | ------- | ---- | ------------------------------------------------------------ |
| isCompleted | boolean | 是 | 窗口属性转换是否完成。true：完成本次转换；false：撤销本次转换。 |
**示例：**
```ts
let controller = windowClass.getTransitionController();
controller.animationForShown = (context : window.TransitionContext) => {
let toWindow = context.toWindow
animateTo({
duration: 1000, // 动画时长
tempo: 0.5, // 播放速率
curve: Curve.EaseInOut, // 动画曲线
delay: 0, // 动画延迟
iterations: 1, // 播放次数
playMode: PlayMode.Normal, // 动画模式
}, () => {
var obj : window.TranslateOptions;
obj.x = 100.0;
obj.y = 0.0;
obj.z = 0.0;
toWindow.translate(obj);
console.info('toWindow translate end');
}
)
context.completeTransition(true)
console.info('complete transition end');
}
```
## TransitionController<sup>9+</sup>
属性转换控制器。
此接口为系统接口。
### animationForShown<sup>9+</sup>
animationForShown(context: TransitionContext): void
窗口显示时的自定义动画配置。
**系统能力：** SystemCapability.WindowManager.WindowManager.Core
**参数：**
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ---------------------------------------- | ---- | -------------------- |
| context | [TransitionContext](#transitioncontext9) | 是 | 属性转换时的上下文。 |
**示例：**
```ts
let controller = windowClass.getTransitionController();
controller.animationForShown = (context : window.TransitionContext) => {
let toWindow = context.toWindow
animateTo({
duration: 1000, // 动画时长
tempo: 0.5, // 播放速率
curve: Curve.EaseInOut, // 动画曲线
delay: 0, // 动画延迟
iterations: 1, // 播放次数
playMode: PlayMode.Normal, // 动画模式
}, () => {
var obj : window.TranslateOptions;
obj.x = 100.0;
obj.y = 0.0;
obj.z = 0.0;
toWindow.translate(obj);
console.info('toWindow translate end');
}
)
context.completeTransition(true)
console.info('complete transition end');
}
```
### animationForHidden<sup>9+</sup>
animationForHidden(context: TransitionContext): void
窗口隐藏时的自定义动画配置。
**系统能力：** SystemCapability.WindowManager.WindowManager.Core
**参数：**
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ---------------------------------------- | ---- | -------------------- |
| context | [TransitionContext](#transitioncontext9) | 是 | 属性转换时的上下文。 |
**示例：**
```ts
let controller = windowClass.getTransitionController();
controller.animationForHidden = (context : window.TransitionContext) => {
let toWindow = context.toWindow
animateTo({
duration: 1000, // 动画时长
tempo: 0.5, // 播放速率
curve: Curve.EaseInOut, // 动画曲线
delay: 0, // 动画延迟
iterations: 1, // 播放次数
playMode: PlayMode.Normal, // 动画模式
}, () => {
var obj : window.TranslateOptions;
obj.x = 100.0;
obj.y = 0.0;
obj.z = 0.0;
toWindow.translate(obj);
console.info('toWindow translate end');
}
)
context.completeTransition(true)
console.info('complete transition end');
}
```
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或