Skip to content

D
Docs

Coping0606 / Docs
与 Fork 源项目一致

Fork自 OpenHarmony / Docs

通知 1
Star 1
Fork 0
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 de23bdc0 编写于 作者: E ester.zhou
浏览文件
操作

update docs 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 557b6d11
展开全部 隐藏空白更改
内联 并排
Showing with 258 addition and 222 deletion
en/application-dev/device-usage-statistics/device-usage-statistics-dev-guide.md
浏览文件 @ de23bdc0
...@@ -56,7 +56,9 @@ import stats from '@ohos.bundleState'; ...@@ -56,7 +56,9 @@ import stats from '@ohos.bundleState';
// Use an asynchronous callback to return the result. // Use an asynchronous callback to return the result.
stats.queryBundleActiveStates(0, 20000000000000, (err, res) => { stats.queryBundleActiveStates(0, 20000000000000, (err, res) => {
if(err.code == 0) { if (err) {
console.log('BUNDLE_ACTIVE queryBundleActiveStates callback failed, because: ' + err.code);
} else {
console.log('BUNDLE_ACTIVE queryBundleActiveStates callback success.'); console.log('BUNDLE_ACTIVE queryBundleActiveStates callback success.');
for (let i = 0; i < res.length; i++) { for (let i = 0; i < res.length; i++) {
console.log('BUNDLE_ACTIVE queryBundleActiveStates callback number : ' + (i + 1)); console.log('BUNDLE_ACTIVE queryBundleActiveStates callback number : ' + (i + 1));
...@@ -74,21 +76,23 @@ import stats from '@ohos.bundleState'; ...@@ -74,21 +76,23 @@ import stats from '@ohos.bundleState';
import stats from '@ohos.bundleState' import stats from '@ohos.bundleState'
// Use a promise to return the result. // Use a promise to return the result.
stats.queryBundleStateInfos(0, 20000000000000).then( res => { stats.queryBundleStateInfos(0, 20000000000000).then(res => {
console.log('BUNDLE_ACTIVE queryBundleStateInfos promise success.'); console.log('BUNDLE_ACTIVE queryBundleStateInfos promise success.');
let i = 1; let i = 1;
for(let key in res){ for (let key in res) {
console.log('BUNDLE_ACTIVE queryBundleStateInfos promise number : ' + i); console.log('BUNDLE_ACTIVE queryBundleStateInfos promise number : ' + i);
console.log('BUNDLE_ACTIVE queryBundleStateInfos promise result ' + JSON.stringify(res[key])); console.log('BUNDLE_ACTIVE queryBundleStateInfos promise result ' + JSON.stringify(res[key]));
i++; i++;
} }
}).catch( err => { }).catch(err => {
console.log('BUNDLE_ACTIVE queryBundleStateInfos promise failed, because: ' + err.code); console.log('BUNDLE_ACTIVE queryBundleStateInfos promise failed, because: ' + err.code);
}); });
// Use an asynchronous callback to return the result. // Use an asynchronous callback to return the result.
stats.queryBundleStateInfos(0, 20000000000000, (err, res) => { stats.queryBundleStateInfos(0, 20000000000000, (err, res) => {
if(err.code == 0) { if (err) {
console.log('BUNDLE_ACTIVE queryBundleStateInfos callback failed, because: ' + err.code);
} else {
console.log('BUNDLE_ACTIVE queryBundleStateInfos callback success.'); console.log('BUNDLE_ACTIVE queryBundleStateInfos callback success.');
let i = 1; let i = 1;
for(let key in res){ for(let key in res){
...@@ -108,26 +112,26 @@ import stats from '@ohos.bundleState'; ...@@ -108,26 +112,26 @@ import stats from '@ohos.bundleState';
import stats from '@ohos.bundleState' import stats from '@ohos.bundleState'
// Use a promise to return the result. // Use a promise to return the result.
stats.queryCurrentBundleActiveStates(0, 20000000000000).then( res => { stats.queryCurrentBundleActiveStates(0, 20000000000000).then(res => {
console.log('BUNDLE_ACTIVE queryCurrentBundleActiveStates promise success.'); console.log('BUNDLE_ACTIVE queryCurrentBundleActiveStates promise success.');
for (let i = 0; i < res.length; i++) { for (let i = 0; i < res.length; i++) {
console.log('BUNDLE_ACTIVE queryCurrentBundleActiveStates promise number : ' + (i + 1)); console.log('BUNDLE_ACTIVE queryCurrentBundleActiveStates promise number : ' + (i + 1));
console.log('BUNDLE_ACTIVE queryCurrentBundleActiveStates promise result ' + JSON.stringify(res[i])); console.log('BUNDLE_ACTIVE queryCurrentBundleActiveStates promise result ' + JSON.stringify(res[i]));
} }
}).catch( err => { }).catch(err => {
console.log('BUNDLE_ACTIVE queryCurrentBundleActiveStates promise failed, because: ' + err.code); console.log('BUNDLE_ACTIVE queryCurrentBundleActiveStates promise failed, because: ' + err.code);
}); });
// Use an asynchronous callback to return the result. // Use an asynchronous callback to return the result.
stats.queryCurrentBundleActiveStates(0, 20000000000000, (err, res) => { stats.queryCurrentBundleActiveStates(0, 20000000000000, (err, res) => {
if(err.code == 0) { if (err) {
console.log('BUNDLE_ACTIVE queryCurrentBundleActiveStates callback failed, because: ' + err.code);
} else {
console.log('BUNDLE_ACTIVE queryCurrentBundleActiveStates callback success.'); console.log('BUNDLE_ACTIVE queryCurrentBundleActiveStates callback success.');
for (let i = 0; i < res.length; i++) { for (let i = 0; i < res.length; i++) {
console.log('BUNDLE_ACTIVE queryCurrentBundleActiveStates callback number : ' + (i + 1)); console.log('BUNDLE_ACTIVE queryCurrentBundleActiveStates callback number : ' + (i + 1));
console.log('BUNDLE_ACTIVE queryCurrentBundleActiveStates callback result ' + JSON.stringify(res[i])); console.log('BUNDLE_ACTIVE queryCurrentBundleActiveStates callback result ' + JSON.stringify(res[i]));
} }
} else {
console.log('BUNDLE_ACTIVE queryCurrentBundleActiveStates callback failed, because: ' + err.code);
} }
}); });
``` ```
...@@ -138,26 +142,26 @@ import stats from '@ohos.bundleState'; ...@@ -138,26 +142,26 @@ import stats from '@ohos.bundleState';
import stats from '@ohos.bundleState' import stats from '@ohos.bundleState'
// Use a promise to return the result. // Use a promise to return the result.
stats.queryBundleStateInfoByInterval(0, 0, 20000000000000).then( res => { stats.queryBundleStateInfoByInterval(0, 0, 20000000000000).then(res => {
console.log('BUNDLE_ACTIVE queryBundleStateInfoByInterval promise success.'); console.log('BUNDLE_ACTIVE queryBundleStateInfoByInterval promise success.');
for (let i = 0; i < res.length; i++) { for (let i = 0; i < res.length; i++) {
console.log('BUNDLE_ACTIVE queryBundleStateInfoByInterval promise number : ' + (i + 1)); console.log('BUNDLE_ACTIVE queryBundleStateInfoByInterval promise number : ' + (i + 1));
console.log('BUNDLE_ACTIVE queryBundleStateInfoByInterval promise result ' + JSON.stringify(res[i])); console.log('BUNDLE_ACTIVE queryBundleStateInfoByInterval promise result ' + JSON.stringify(res[i]));
} }
}).catch( err => { }).catch(err => {
console.log('BUNDLE_ACTIVE queryBundleStateInfoByInterval promise failed, because: ' + err.code); console.log('BUNDLE_ACTIVE queryBundleStateInfoByInterval promise failed, because: ' + err.code);
}); });
// Use an asynchronous callback to return the result. // Use an asynchronous callback to return the result.
stats.queryBundleStateInfoByInterval(0, 0, 20000000000000, (err, res) => { stats.queryBundleStateInfoByInterval(0, 0, 20000000000000, (err, res) => {
if(err.code == 0) { if (err) {
console.log('BUNDLE_ACTIVE queryBundleStateInfoByInterval callback failed, because: ' + err.code);
} else {
console.log('BUNDLE_ACTIVE queryBundleStateInfoByInterval callback success.'); console.log('BUNDLE_ACTIVE queryBundleStateInfoByInterval callback success.');
for (let i = 0; i < res.length; i++) { for (let i = 0; i < res.length; i++) {
console.log('BUNDLE_ACTIVE queryBundleStateInfoByInterval callback number : ' + (i + 1)); console.log('BUNDLE_ACTIVE queryBundleStateInfoByInterval callback number : ' + (i + 1));
console.log('BUNDLE_ACTIVE queryBundleStateInfoByInterval callback result ' + JSON.stringify(res[i])); console.log('BUNDLE_ACTIVE queryBundleStateInfoByInterval callback result ' + JSON.stringify(res[i]));
} }
} else {
console.log('BUNDLE_ACTIVE queryBundleStateInfoByInterval callback failed, because: ' + err.code);
} }
}); });
``` ```
...@@ -168,18 +172,18 @@ import stats from '@ohos.bundleState'; ...@@ -168,18 +172,18 @@ import stats from '@ohos.bundleState';
import stats from '@ohos.bundleState' import stats from '@ohos.bundleState'
// Use a promise to return the result. // Use a promise to return the result.
stats.queryAppUsagePriorityGroup().then( res => { stats.queryAppUsagePriorityGroup().then(res => {
console.log('BUNDLE_ACTIVE queryAppUsagePriorityGroup promise succeeded. result: ' + JSON.stringify(res)); console.log('BUNDLE_ACTIVE queryAppUsagePriorityGroup promise succeeded. result: ' + JSON.stringify(res));
}).catch( err => { }).catch(err => {
console.log('BUNDLE_ACTIVE queryAppUsagePriorityGroup promise failed. because: ' + err.code); console.log('BUNDLE_ACTIVE queryAppUsagePriorityGroup promise failed. because: ' + err.code);
}); });
// Use an asynchronous callback to return the result. // Use an asynchronous callback to return the result.
stats.queryAppUsagePriorityGroup((err, res) => { stats.queryAppUsagePriorityGroup((err, res) => {
if(err.code === 0) { if (err) {
console.log('BUNDLE_ACTIVE queryAppUsagePriorityGroup callback succeeded. result: ' + JSON.stringify(res));
} else {
console.log('BUNDLE_ACTIVE queryAppUsagePriorityGroup callback failed. because: ' + err.code); console.log('BUNDLE_ACTIVE queryAppUsagePriorityGroup callback failed. because: ' + err.code);
} else {
console.log('BUNDLE_ACTIVE queryAppUsagePriorityGroup callback succeeded. result: ' + JSON.stringify(res));
} }
}); });
``` ```
...@@ -190,18 +194,18 @@ import stats from '@ohos.bundleState'; ...@@ -190,18 +194,18 @@ import stats from '@ohos.bundleState';
import stats from '@ohos.bundleState' import stats from '@ohos.bundleState'
// Use a promise to return the result. // Use a promise to return the result.
stats.isIdleState("com.ohos.camera").then( res => { stats.isIdleState("com.ohos.camera").then(res => {
console.log('BUNDLE_ACTIVE isIdleState promise succeeded, result: ' + JSON.stringify(res)); console.log('BUNDLE_ACTIVE isIdleState promise succeeded, result: ' + JSON.stringify(res));
}).catch( err => { }).catch(err => {
console.log('BUNDLE_ACTIVE isIdleState promise failed, because: ' + err.code); console.log('BUNDLE_ACTIVE isIdleState promise failed, because: ' + err.code);
}); });
// Use an asynchronous callback to return the result. // Use an asynchronous callback to return the result.
stats.isIdleState("com.ohos.camera", (err, res) => { stats.isIdleState("com.ohos.camera", (err, res) => {
if(err.code === 0) { if (err) {
console.log('BUNDLE_ACTIVE isIdleState callback succeeded, result: ' + JSON.stringify(res));
} else {
console.log('BUNDLE_ACTIVE isIdleState callback failed, because: ' + err.code); console.log('BUNDLE_ACTIVE isIdleState callback failed, because: ' + err.code);
} else {
console.log('BUNDLE_ACTIVE isIdleState callback succeeded, result: ' + JSON.stringify(res));
} }
}); });
``` ```
en/application-dev/reference/apis/js-apis-notification.md
浏览文件 @ de23bdc0
# Notification # Notification
> **NOTE** > **NOTE**
>
> The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version. > The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## Modules to Import ## Modules to Import
...@@ -2526,12 +2527,12 @@ function onConsumeCallback(data) { ...@@ -2526,12 +2527,12 @@ function onConsumeCallback(data) {
let wantAgent = data.wantAgent; let wantAgent = data.wantAgent;
wantAgent .getWant(wantAgent) wantAgent .getWant(wantAgent)
.then((data1) => { .then((data1) => {
console.log('===> getWant success want:' + JSON.stringfy(data1)); console.log('===> getWant success want:' + JSON.stringify(data1));
}) })
.catch((err) => { .catch((err) => {
console.error('===> getWant failed because' + JSON.stringfy(err)); console.error('===> getWant failed because' + JSON.stringify(err));
}); });
console.info('===> onConsume callback req.wantAgent:' + JSON.stringfy(req.wantAgent)); console.info('===> onConsume callback req.wantAgent:' + JSON.stringify(req.wantAgent));
}; };
var subscriber = { var subscriber = {
......
en/application-dev/reference/apis/js-apis-wallpaper.md
浏览文件 @ de23bdc0
...@@ -530,7 +530,7 @@ getFile(wallpaperType: WallpaperType, callback: AsyncCallback&lt;number&gt;): vo ...@@ -530,7 +530,7 @@ getFile(wallpaperType: WallpaperType, callback: AsyncCallback&lt;number&gt;): vo
Obtains the wallpaper of the specified type. This API uses an asynchronous callback to return the result. Obtains the wallpaper of the specified type. This API uses an asynchronous callback to return the result.
**Required permissions**: ohos.permission.SET_WALLPAPER and ohos.permission.READ_USER_STORAGE **Required permissions**: ohos.permission.GET_WALLPAPER and ohos.permission.READ_USER_STORAGE
**System capability**: SystemCapability.MiscServices.Wallpaper **System capability**: SystemCapability.MiscServices.Wallpaper
...@@ -559,7 +559,7 @@ getFile(wallpaperType: WallpaperType): Promise&lt;number&gt; ...@@ -559,7 +559,7 @@ getFile(wallpaperType: WallpaperType): Promise&lt;number&gt;
Obtains the wallpaper of the specified type. This API uses a promise to return the result. Obtains the wallpaper of the specified type. This API uses a promise to return the result.
**Required permissions**: ohos.permission.SET_WALLPAPER and ohos.permission.READ_USER_STORAGE **Required permissions**: ohos.permission.GET_WALLPAPER and ohos.permission.READ_USER_STORAGE
**System capability**: SystemCapability.MiscServices.Wallpaper **System capability**: SystemCapability.MiscServices.Wallpaper
...@@ -697,7 +697,7 @@ Unsubscribes from the wallpaper color change event. ...@@ -697,7 +697,7 @@ Unsubscribes from the wallpaper color change event.
wallpaper.on('colorChange', listener); wallpaper.on('colorChange', listener);
// Unsubscribe from the listener. // Unsubscribe from the listener.
wallpaper.off('colorChange', listener); wallpaper.off('colorChange', listener);
//Unsubscribe from all subscriptions of the colorChange type. // Unsubscribe from all subscriptions of the colorChange type.
wallpaper.off('colorChange'); wallpaper.off('colorChange');
``` ```
......
en/application-dev/reference/arkui-js/js-components-common-events.md
浏览文件 @ de23bdc0
...@@ -13,29 +13,29 @@ ...@@ -13,29 +13,29 @@
Different from private events, universal events can be bound to most components. Different from private events, universal events can be bound to most components.
| Name | Parameter | Description | Support Bubbling | | Name | Parameter | Description | Bubbling Supported | Capturing Supported |
| ------------------------ | ---------- | ---------------------------------------- | ---------------------------------------- | | ------------------------ | ---------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| touchstart | TouchEvent | Triggered when the tapping starts. For details about **TouchEvent**, see Table 2. | Yes<sup>5+</sup> | | touchstart | TouchEvent | Triggered when the tapping starts. For details about **TouchEvent**, see Table 2. | Yes<sup>5+</sup> | Yes<sup>5+</sup> |
| touchmove | TouchEvent | Triggered when the tapping moves. | Yes<sup>5+</sup> | | touchmove | TouchEvent | Triggered when the tapping moves. | Yes<sup>5+</sup> | Yes<sup>5+</sup> |
| touchcancel | TouchEvent | Triggered when the tapping is interrupted. | Yes<sup>5+</sup> | | touchcancel | TouchEvent | Triggered when the tapping is interrupted. | Yes<sup>5+</sup> | Yes<sup>5+</sup> |
| touchend | TouchEvent | Triggered when the tapping ends. | Yes<sup>5+</sup> | | touchend | TouchEvent | Triggered when the tapping ends. | Yes<sup>5+</sup> | Yes<sup>5+</sup> |
| click | - | Triggered when a component is clicked. | Yes<sup>6+</sup> | | click | - | Triggered when a component is clicked. | Yes<sup>6+</sup> | No |
| doubleclick<sup>7+</sup> | - | Triggered when a component is double-clicked. | No<br>Bubbling is supported since API version 9. | | doubleclick<sup>7+</sup> | - | Triggered when a component is double-clicked. | No<br>Bubbling is supported since API version 9. | No |
| longpress | - | Triggered when a component is long pressed. | No<br>Bubbling is supported since API version 9.| | longpress | - | Triggered when a component is long pressed. | No<br>Bubbling is supported since API version 9.| No |
| swipe<sup>5+</sup> | SwipeEvent | Triggered when a user quickly swipes on a component.<br/>For details about **SwipeEvent**, see Table 4. | No<br>Bubbling is supported since API version 9.| | swipe<sup>5+</sup> | SwipeEvent | Triggered when a user quickly swipes on a component.<br/>For details about **SwipeEvent**, see Table 4. | No<br>Bubbling is supported since API version 9.| No |
| attached<sup>6+</sup> | - | Triggered after the current component node is mounted to the render tree. | No | | attached<sup>6+</sup> | - | Triggered after the current component node is mounted to the render tree. | No | No |
| detached<sup>6+</sup> | - | Triggered when the current component node is removed from the render tree. | No | | detached<sup>6+</sup> | - | Triggered when the current component node is removed from the render tree. | No | No |
| pinchstart<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is started.<br>For details about **PinchEvent**, see Table 5.| No | | pinchstart<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is started.<br>For details about **PinchEvent**, see Table 5.| No | No |
| pinchupdate<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is in progress. | No | | pinchupdate<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is in progress. | No | No |
| pinchend<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is ended. | No | | pinchend<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is ended. | No | No |
| pinchcancel<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is interrupted. | No | | pinchcancel<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is interrupted. | No | No |
| dragstart<sup>7+</sup> | DragEvent | Triggered when dragging starts.<br>For details about **DragEvent**, see Table 6. | No | | dragstart<sup>7+</sup> | DragEvent | Triggered when dragging starts.<br>For details about **DragEvent**, see Table 6. | No | No |
| drag<sup>7+</sup> | DragEvent | Triggered when dragging is in progress. | No | | drag<sup>7+</sup> | DragEvent | Triggered when dragging is in progress. | No | No |
| dragend<sup>7+</sup> | DragEvent | Triggered when dragging is ended. | No | | dragend<sup>7+</sup> | DragEvent | Triggered when dragging is ended. | No | No |
| dragenter<sup>7+</sup> | DragEvent | Triggered when the dragged component enters a drop target. | No | | dragenter<sup>7+</sup> | DragEvent | Triggered when the dragged component enters a drop target. | No | No |
| dragover<sup>7+</sup> | DragEvent | Triggered when the dragged component is being dragged over a drop target. | No | | dragover<sup>7+</sup> | DragEvent | Triggered when the dragged component is being dragged over a drop target. | No | No |
| dragleave<sup>7+</sup> | DragEvent | Triggered when the dragged component leaves a drop target. | No | | dragleave<sup>7+</sup> | DragEvent | Triggered when the dragged component leaves a drop target. | No | No |
| drop<sup>7+</sup> | DragEvent | Triggered when the dragged component is dropped on a drop target. | No | | drop<sup>7+</sup> | DragEvent | Triggered when the dragged component is dropped on a drop target. | No | No |
> **NOTE**<br> > **NOTE**<br>
......
en/application-dev/reference/arkui-ts/ts-page-transition-animation.md
浏览文件 @ de23bdc0
# Page Transition # Page Transition
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
>
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Customize the page transition animations by configuring the page entrance and exit components in the global **pageTransition** method. Customize the page transition animations by configuring the page entrance and exit components in the global **pageTransition** method.
| Name | Parameter | Description | | Name | Parameter | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| PageTransitionEnter | Object | Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters. | | PageTransitionEnter | Object | Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters. |
| PageTransitionExit | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters. | | PageTransitionExit | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters. |
- Animation parameters - Animation parameters
| Name | Type | Default Value | Mandatory | Description | | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| type | RouteType | - | No | If this parameter is not set, the reverse playback effect as pop switches to push is used. | | type | RouteType | - | No | If this parameter is not set, the reverse playback effect as pop switches to push is used. |
| duration | number | 1000 | No | Animation duration, in ms. | | duration | number | 1000 | No | Animation duration, in ms. |
| curve | Curve \| Curves | Linear | No | Animation curve. For details about the valid values, see **Curve enums**. | | curve | Curve \| Curves | Linear | No | Animation curve. For details about the valid values, see [Curve](ts-animatorproperty.md). |
| delay | number | 0 | No | Animation delay, in ms. Delayed animation is disabled by default. | | delay | number | 0 | No | Animation delay, in ms. Delayed animation is disabled by default. |
- RouteType enums - RouteType enums
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| Pop | When page A jumps to page B, page A is Exit+Push, and page B is Enter+Push. | | Pop | Jumps to the specified page. |
| Push | When page B returns to page A, page A is Enter+Pop, and page B is Exit+Pop. | | Push | Jumps to the next page. |
## Attributes ## Attributes
The **PageTransitionEnter** and **PageTransitionExit** components support the following attributes: The **PageTransitionEnter** and **PageTransitionExit** components support the following attributes:
| Name | Type | Default Value | Mandatory | Description | | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details about the valid values, see the description of [ERROR:Invalid link:en-us_topic_0000001257138309.xml#xref2991922111212,link:#li81331342185820](#li81331342185820). | | slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details, see **SlideEffect enums**. |
| translate | {<br/>x? : number,<br/>y? : number,<br/>z? : number<br/>} | - | No | Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with **slide**, the latter takes effect by default. | | translate | {<br/>x? : number,<br/>y? : number,<br/>z? : number<br/>} | - | No | Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with **slide**, the latter takes effect by default. |
| scale | {<br/>x? : number,<br/>y? : number,<br/>z? : number,<br/>centerX? : number,<br/>centerY? : number<br/>} | - | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit. | | scale | {<br/>x? : number,<br/>y? : number,<br/>z? : number,<br/>centerX? : number,<br/>centerY? : number<br/>} | - | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit. |
| opacity | number | 1 | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit. | | opacity | number | 1 | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit. |
- SlideEffect enums - SlideEffect enums
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left. | | Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left. |
| Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right. | | Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right. |
| Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top. | | Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top. |
| Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom. | | Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom. |
## Events ## Events
The PageTransitionEnter and PageTransitionExit components support the following events: The PageTransitionEnter and PageTransitionExit components support the following events:
| Event | Description | | Event | Description |
| -------- | -------- | | -------- | -------- |
| onEnter(type: RouteType, progress: number) =&gt; void | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1. | | onEnter(type: RouteType, progress: number) =&gt; void | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1. |
| onExit(type: RouteType, progress: number) =&gt; void | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1. | | onExit(type: RouteType, progress: number) =&gt; void | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1. |
## Example ## Example
...@@ -70,8 +71,8 @@ Customization method 1: The entrance animation of the current page is configured ...@@ -70,8 +71,8 @@ Customization method 1: The entrance animation of the current page is configured
@Entry @Entry
@Component @Component
struct PageTransitionExample1 { struct PageTransitionExample1 {
@State scale: number = 1 @State scale1: number = 1
@State opacity: number = 1 @State opacity1: number = 1
@State active: boolean = false @State active: boolean = false
build() { build() {
Column() { Column() {
...@@ -81,19 +82,19 @@ struct PageTransitionExample1 { ...@@ -81,19 +82,19 @@ struct PageTransitionExample1 {
.onClick(() => { .onClick(() => {
this.active = true this.active = true
}) })
}.scale({ x: this.scale }).opacity(this.opacity) }.scale({ x: this.scale1 }).opacity(this.opacity1)
} }
// Customization method 1: Customize the transition process. // Customization method 1: Customize the transition process.
pageTransition() { pageTransition() {
PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
.onEnter((type: RouteType, progress: number) => { .onEnter((type: RouteType, progress: number) => {
this.scale = 1 this.scale1 = 1
this.opacity = progress this.opacity1 = progress
}) // The onEnter callback is triggered frame by frame during the entrance process. The input parameter is the normalized progress of the animation (0% to 100%). }) // The onEnter callback is triggered frame by frame during the entrance process. The input parameter is the normalized progress of the animation (0% to 100%).
PageTransitionExit({ duration: 1500, curve: Curve.Ease }) PageTransitionExit({ duration: 1500, curve: Curve.Ease })
.onExit((type: RouteType, progress: number) => { .onExit((type: RouteType, progress: number) => {
this.scale = 1 - progress this.scale1 = 1 - progress
this.opacity = 1 this.opacity1 = 1
}) // The onExit callback is triggered frame by frame during the exit process. The input parameter is the normalized progress of the animation (0% to 100%). }) // The onExit callback is triggered frame by frame during the exit process. The input parameter is the normalized progress of the animation (0% to 100%).
} }
} }
...@@ -105,27 +106,27 @@ struct PageTransitionExample1 { ...@@ -105,27 +106,27 @@ struct PageTransitionExample1 {
@Entry @Entry
@Component @Component
struct AExample { struct AExample {
@State scale: number = 1 @State scale2: number = 1
@State opacity: number = 1 @State opacity2: number = 1
@State active: boolean = false @State active: boolean = false
build() { build() {
Column() { Column() {
Navigator({ target: 'pages/index' ,type: NavigationType.Push}) { Navigator({ target: 'pages/index' ,type: NavigationType.Push}) {
Image($r('app.media.bg2')).width("100%").height("100%") Image($r('app.media.bg2')).width("100%").height("100%")
} }
}.height("100%").width("100%").scale({ x: this.scale }).opacity(this.opacity) }.height("100%").width("100%").scale({ x: this.scale2 }).opacity(this.opacity2)
} }
// Customization method 1: Customize the transition process. // Customization method 1: Customize the transition process.
pageTransition() { pageTransition() {
PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
.onEnter((type: RouteType, progress: number) => { .onEnter((type: RouteType, progress: number) => {
this.scale = 1 this.scale2 = 1
this.opacity = progress this.opacity2 = progress
}) // The onEnter callback is triggered frame by frame during the entrance process. The input parameter is the normalized progress of the animation (0% to 100%). }) // The onEnter callback is triggered frame by frame during the entrance process. The input parameter is the normalized progress of the animation (0% to 100%).
PageTransitionExit({ duration: 1500, curve: Curve.Ease }) PageTransitionExit({ duration: 1500, curve: Curve.Ease })
.onExit((type: RouteType, progress: number) => { .onExit((type: RouteType, progress: number) => {
this.scale = 1 - progress this.scale2 = 1 - progress
this.opacity = 1 this.opacity2 = 1
}) // The onExit callback is triggered frame by frame during the exi process. The input parameter is the normalized progress of the animation (0% to 100%). }) // The onExit callback is triggered frame by frame during the exi process. The input parameter is the normalized progress of the animation (0% to 100%).
} }
} }
...@@ -141,8 +142,8 @@ Customization method 2: The entrance animation of the current page is configured ...@@ -141,8 +142,8 @@ Customization method 2: The entrance animation of the current page is configured
@Entry @Entry
@Component @Component
struct PageTransitionExample { struct PageTransitionExample {
@State scale: number = 1 @State scale1: number = 1
@State opacity: number = 1 @State opacity1: number = 1
@State active: boolean = false @State active: boolean = false
build() { build() {
...@@ -153,7 +154,7 @@ struct PageTransitionExample { ...@@ -153,7 +154,7 @@ struct PageTransitionExample {
.onClick(() => { .onClick(() => {
this.active = true this.active = true
}) })
}.scale({ x: this.scale }).opacity(this.opacity) }.scale({ x: this.scale1 }).opacity(this.opacity1)
} }
// Customization method 2: Use the default effects provided by the system, such as translation, scaling, and opacity. // Customization method 2: Use the default effects provided by the system, such as translation, scaling, and opacity.
...@@ -173,8 +174,8 @@ struct PageTransitionExample { ...@@ -173,8 +174,8 @@ struct PageTransitionExample {
@Entry @Entry
@Component @Component
struct PageTransitionExample1 { struct PageTransitionExample1 {
@State scale: number = 1 @State scale2: number = 1
@State opacity: number = 1 @State opacity2: number = 1
@State active: boolean = false @State active: boolean = false
build() { build() {
...@@ -185,7 +186,7 @@ struct PageTransitionExample1 { ...@@ -185,7 +186,7 @@ struct PageTransitionExample1 {
.onClick(() => { .onClick(() => {
this.active = true this.active = true
}) })
}.scale({ x: this.scale }).opacity(this.opacity) }.scale({ x: this.scale2 }).opacity(this.opacity2)
} }
// Customization method 2: Use the default effects provided by the system, such as translation, scaling, and opacity. // Customization method 2: Use the default effects provided by the system, such as translation, scaling, and opacity.
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或