Skip to content

D
Docs

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

通知 159
Star 292
Fork 28
D
Docs

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

未验证 提交 7cb044ad 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!5585 【OpenHarmony开源贡献者计划2022】Optimize the format specification and reduce the reading threshold. 

Merge pull request !5585 from Mr_YX/master
上级 a9a261dd 21a14361
隐藏空白更改
内联 并排
Showing with 186 addition and 239 deletion
en/application-dev/reference/arkui-ts/ts-explicit-animation.md
浏览文件 @ 7cb044ad
# Explicit Animation # Explicit Animation
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**<br>
> 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.
| Name | Description | | Name | Description |
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
## AnimationOptions ## AnimationOptions
- Attributes - Attributes
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| duration | number | 1000 | Animation duration, in ms. | | duration | number | 1000 | Animation duration, in ms. |
| tempo | number | 1.0 | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation. | | tempo | number | 1.0 | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation. |
...@@ -23,15 +23,15 @@ ...@@ -23,15 +23,15 @@
- APIs - APIs
| Name | Description | | Name | Description |
| -------- | -------- | | --------------------- | --------------------------------------------------------- |
| onFinish() =&gt; void | Callback invoked when the animation playback is complete. | | onFinish() =&gt; void | Callback invoked when the animation playback is complete. |
## Example ## Example
``` ```ts
@Entry @Entry
@Component @Component
struct AnimateToExample { struct AnimateToExample {
...@@ -84,4 +84,4 @@ struct AnimateToExample { ...@@ -84,4 +84,4 @@ struct AnimateToExample {
} }
``` ```
![en-us_image_0000001256978345](figures/en-us_image_0000001256978345.gif) ![en-us_image_0000001256978345](figures/en-us_image_0000001256978345.gif)
\ No newline at end of file
en/application-dev/reference/arkui-ts/ts-gesture-settings.md
浏览文件 @ 7cb044ad
# Gesture Binding Methods # Gesture Binding Methods
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**<br>
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
...@@ -16,7 +16,7 @@ None ...@@ -16,7 +16,7 @@ None
Use the following attributes to bind gesture recognition to a component. When a gesture is recognized, the event callback is invoked to notify the component. Use the following attributes to bind gesture recognition to a component. When a gesture is recognized, the event callback is invoked to notify the component.
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| gesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture to recognize.<br/>**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting. | | gesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture to recognize.<br/>**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting. |
| priorityGesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture to preferentially recognize.<br/>**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> - By default, the child component takes precedence over the parent component in gesture recognition. When **priorityGesture** is configured for the parent component, the parent component takes precedence over the child component in gesture recognition. | | priorityGesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture to preferentially recognize.<br/>**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> - By default, the child component takes precedence over the parent component in gesture recognition. When **priorityGesture** is configured for the parent component, the parent component takes precedence over the child component in gesture recognition. |
...@@ -24,14 +24,14 @@ Use the following attributes to bind gesture recognition to a component. When a ...@@ -24,14 +24,14 @@ Use the following attributes to bind gesture recognition to a component. When a
- GestureMask enums - GestureMask enums
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| Normal | The gestures of child components are not masked and are recognized based on the default gesture recognition sequence. | | Normal | The gestures of child components are not masked and are recognized based on the default gesture recognition sequence. |
| IgnoreInternal | The gestures of child components are masked. Only the gestures of the current component are recognized.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> However, the built-in gestures of the child components are not masked. For example, when the child component is a **&lt;List&gt;** component, the built-in sliding gestures can still be triggered. | | IgnoreInternal | The gestures of child components are masked. Only the gestures of the current component are recognized.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> However, the built-in gestures of the child components are not masked. For example, when the child component is a **&lt;List&gt;** component, the built-in sliding gestures can still be triggered. |
- Gesture types - Gesture types
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| TapGesture | Tap gesture, which can be a single-tap or multi-tap gesture. | | TapGesture | Tap gesture, which can be a single-tap or multi-tap gesture. |
| LongPressGesture | Long press gesture. | | LongPressGesture | Long press gesture. |
...@@ -46,12 +46,12 @@ Use the following attributes to bind gesture recognition to a component. When a ...@@ -46,12 +46,12 @@ Use the following attributes to bind gesture recognition to a component. When a
The component uses the **gesture** method to bind the gesture object and uses the events provided in this object to respond to the gesture operation. For example, the **onAction** event of the **TapGesture** object can be used to respond to a click event. For details about the event definition, see the section of each gesture object. The component uses the **gesture** method to bind the gesture object and uses the events provided in this object to respond to the gesture operation. For example, the **onAction** event of the **TapGesture** object can be used to respond to a click event. For details about the event definition, see the section of each gesture object.
- TapGesture events - TapGesture events
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| onAction((event?: GestureEvent) =&gt; void) | Callback invoked when a tap gesture is recognized. | | onAction((event?: GestureEvent) =&gt; void) | Callback invoked when a tap gesture is recognized. |
- GestureEvent attributes - GestureEvent attributes
| Name | Type | Description | | Name | Type | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| timestamp | number | Timestamp of the event. | | timestamp | number | Timestamp of the event. |
| target<sup>8+</sup> | EventTarget | Object that triggers the gesture event. | | target<sup>8+</sup> | EventTarget | Object that triggers the gesture event. |
...@@ -60,7 +60,7 @@ The component uses the **gesture** method to bind the gesture object and uses th ...@@ -60,7 +60,7 @@ The component uses the **gesture** method to bind the gesture object and uses th
## Example ## Example
``` ```ts
@Entry @Entry
@Component @Component
struct GestureSettingsExample { struct GestureSettingsExample {
...@@ -90,4 +90,4 @@ struct GestureSettingsExample { ...@@ -90,4 +90,4 @@ struct GestureSettingsExample {
} }
``` ```
![en-us_image_0000001256858411](figures/en-us_image_0000001256858411.gif) ![en-us_image_0000001256858411](figures/en-us_image_0000001256858411.gif)
\ No newline at end of file
en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md
浏览文件 @ 7cb044ad
# Interpolation Calculation # Interpolation Calculation
> **NOTE**<br> > **NOTE**<br>
> 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.
## Modules to Import ## Modules to Import
```ts
```
import curves from '@ohos.curves' import curves from '@ohos.curves'
``` ```
## Required Permissions ## Required Permissions
None None
## curves.init ## curves.init
init(curve?: Curve): Object init(curve?: Curve): Object
Implements initialization for the interpolation curve, which is used to create an interpolation curve object based on the input parameter. Implements initialization for the interpolation curve, which is used to create an interpolation curve object based on the input parameter.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ----- | ----- | --------- | ------------- | ------------- |
| curve | Curve | No | Linear | Curve object. | | curve | Curve | No | Linear | Curve object. |
- Return value - Return value
Curve object. Curve object.
## curves.steps ## curves.steps
steps(count: number, end: boolean): Object steps(count: number, end: boolean): Object
Constructs a step curve object. Constructs a step curve object.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| count | number | Yes | - | Number of steps. Must be a positive integer. | | count | number | Yes | - | Number of steps. Must be a positive integer. |
| end | boolean | Yes | true | Step change at the start or end point of each interval. Defaults to **true**, indicating that the step change occurs at the end point. | | end | boolean | Yes | true | Step change at the start or end point of each interval. Defaults to **true**, indicating that the step change occurs at the end point. |
...@@ -54,53 +44,45 @@ Constructs a step curve object. ...@@ -54,53 +44,45 @@ Constructs a step curve object.
Curve object. Curve object.
## curves.cubicBezier ## curves.cubicBezier
cubicBezier(x1: number, y1: number, x2: number, y2: number): Object cubicBezier(x1: number, y1: number, x2: number, y2: number): Object
Constructs a third-order Bezier curve object. The curve value must be between 0 and 1. Constructs a third-order Bezier curve object. The curve value must be between 0 and 1.
1. Parameters
| Name | Type | Mandatory | Description |
| ---- | ------ | --------- | -------------------------------------------------------------- |
| x1 | number | Yes | Horizontal coordinate of the first point on the Bezier curve. |
| y1 | number | Yes | Vertical coordinate of the first point on the Bezier curve. |
| x2 | number | Yes | Horizontal coordinate of the second point on the Bezier curve. |
| y2 | number | Yes | Vertical coordinate of the second point on the Bezier curve. |
- Parameters 2. Return value
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| x1 | number | Yes | Horizontal coordinate of the first point on the Bezier curve. |
| y1 | number | Yes | Vertical coordinate of the first point on the Bezier curve. |
| x2 | number | Yes | Horizontal coordinate of the second point on the Bezier curve. |
| y2 | number | Yes | Vertical coordinate of the second point on the Bezier curve. |
- Return value
Curve object. Curve object.
## curves.spring ## curves.spring
spring(velocity: number, mass: number, stiffness: number, damping: number): Object spring(velocity: number, mass: number, stiffness: number, damping: number): Object
Constructs a spring curve object. Constructs a spring curve object.
1. Parameters
| Name | Type | Mandatory | Description |
| --------- | ------ | --------- | ----------------- |
| velocity | number | Yes | Initial velocity. |
| mass | number | Yes | Mass. |
| stiffness | number | Yes | Stiffness. |
| damping | number | Yes | Damping. |
- Parameters 2. Return value
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| velocity | number | Yes | Initial velocity. |
| mass | number | Yes | Mass. |
| stiffness | number | Yes | Stiffness. |
| damping | number | Yes | Damping. |
- Return value
Curve object. Curve object.
## Example ## Example
```ts
```
import Curves from '@ohos.curves' import Curves from '@ohos.curves'
let curve1 = Curves.init() // Create a default linear interpolation curve. let curve1 = Curves.init() // Create a default linear interpolation curve.
let curve2 = Curves.init(Curve.EaseIn) // Create an interpolation curve which is slow and then fast by default. let curve2 = Curves.init(Curve.EaseIn) // Create an interpolation curve which is slow and then fast by default.
...@@ -108,26 +90,22 @@ let curve3 = Curves.spring(100, 1, 228, 30) // Create a spring interpolation cur ...@@ -108,26 +90,22 @@ let curve3 = Curves.spring(100, 1, 228, 30) // Create a spring interpolation cur
let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // Create a third-order Bezier curve. let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // Create a third-order Bezier curve.
``` ```
Curve objects can be created only by the preceding APIs. Curve objects can be created only by the preceding APIs.
| API | Description | | API | Description |
| -------- | -------- | | -------- | -------- |
| interpolate(time: number): number | Calculation function of the interpolation curve. Passing a normalized time parameter to this function returns the current interpolation.<br/>**time**: indicates the current normalized time. The value ranges from 0 to 1.<br/>The curve interpolation corresponding to the normalized time point is returned. | | interpolate(time: number): number | Calculation function of the interpolation curve. Passing a normalized time parameter to this function returns the current interpolation.<br/>**time**: indicates the current normalized time. The value ranges from 0 to 1.<br/>The curve interpolation corresponding to the normalized time point is returned. |
- Example - Example
``` ```ts
import Curves from '@ohos.curves' import Curves from '@ohos.curves'
let curve = Curves.init(Curve.EaseIn) // Create an interpolation curve which is slow and then fast by default. let curve = Curves.init(Curve.EaseIn) // Create an interpolation curve which is slow and then fast by default.
let value: number = curve.interpolate(0.5) // Calculate the interpolation for half of the time. let value: number = curve.interpolate(0.5) // Calculate the interpolation for half of the time.
``` ```
## Example ## Example
```ts
```
import Curves from '@ohos.curves' import Curves from '@ohos.curves'
@Entry @Entry
@Component @Component
...@@ -152,4 +130,4 @@ struct ImageComponent { ...@@ -152,4 +130,4 @@ struct ImageComponent {
} }
``` ```
![en-us_image_0000001212058456](figures/en-us_image_0000001212058456.gif) ![en-us_image_0000001212058456](figures/en-us_image_0000001212058456.gif)
\ No newline at end of file
en/application-dev/reference/arkui-ts/ts-matrix-transformation.md
浏览文件 @ 7cb044ad
# Matrix Transformation # Matrix Transformation
> **NOTE**<br> > **NOTE**<br>
> 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.
## Modules to Import ## Modules to Import
```ts
```
import matrix4 from '@ohos.matrix4' import matrix4 from '@ohos.matrix4'
``` ```
## Required Permissions ## Required Permissions
None None
## matrix4.init ## matrix4.init
init(array: Array&lt;number&gt;): Object init(array: Array&lt;number&gt;): Object
Matrix constructor, which is used to create a 4x4 matrix by using the input parameter. Column-major order is used. Matrix constructor, which is used to create a 4x4 matrix by using the input parameter. Column-major order is used.
1. Parameters
- Parameters | Name | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| array | Array&lt;number&gt; | Yes | [1, 0, 0, 0,<br/>0, 1, 0, 0,<br/>0, 0, 1, 0,<br/>0, 0, 0, 1] | A number array whose length is 16 (4 x 4). For details, see the parameter description. | | array | Array&lt;number&gt; | Yes | [1, 0, 0, 0,<br/>0, 1, 0, 0,<br/>0, 0, 1, 0,<br/>0, 0, 0, 1] | A number array whose length is 16 (4 x 4). For details, see the parameter description. |
- Return value 2. Return value
| Type | Description | | Type | Description |
| -------- | -------- | | ------ | ------------------------------------------------------- |
| Object | 4x4 matrix object created based on the input parameter. | | Object | 4x4 matrix object created based on the input parameter. |
- Parameter description 3. Parameter description
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ---- | ------ | --------- | ------------------------------------------------------------------------------- |
| m00 | number | Yes | Scaling value of the x-axis. Defaults to **1** for the unit matrix. | | m00 | number | Yes | Scaling value of the x-axis. Defaults to **1** for the unit matrix. |
| m01 | number | Yes | The second value, which is affected by the rotation of the x, y, and z axes. | | m01 | number | Yes | The second value, which is affected by the rotation of the x, y, and z axes. |
| m02 | number | Yes | The third value, which is affected by the rotation of the x, y, and z axes. | | m02 | number | Yes | The third value, which is affected by the rotation of the x, y, and z axes. |
| m03 | number | Yes | Meaningless. | | m03 | number | Yes | Meaningless. |
| m10 | number | Yes | The fifth value, which is affected by the rotation of the x, y, and z axes. | | m10 | number | Yes | The fifth value, which is affected by the rotation of the x, y, and z axes. |
| m11 | number | Yes | Scaling value of the y-axis. Defaults to **1** for the unit matrix. | | m11 | number | Yes | Scaling value of the y-axis. Defaults to **1** for the unit matrix. |
| m12 | number | Yes | The seventh value, which is affected by the rotation of the x, y, and z axes. | | m12 | number | Yes | The seventh value, which is affected by the rotation of the x, y, and z axes. |
| m13 | number | Yes | Meaningless. | | m13 | number | Yes | Meaningless. |
| m20 | number | Yes | The ninth value, which is affected by the rotation of the x, y, and z axes. | | m20 | number | Yes | The ninth value, which is affected by the rotation of the x, y, and z axes. |
| m21 | number | Yes | The tenth value, which is affected by the rotation of the x, y, and z axes. | | m21 | number | Yes | The tenth value, which is affected by the rotation of the x, y, and z axes. |
| m22 | number | Yes | Scaling value of the z-axis. Defaults to **1** for the unit matrix. | | m22 | number | Yes | Scaling value of the z-axis. Defaults to **1** for the unit matrix. |
| m23 | number | Yes | Meaningless. | | m23 | number | Yes | Meaningless. |
| m30 | number | Yes | Translation value of the x-axis, in px. Defaults to **0** for the unit matrix. | | m30 | number | Yes | Translation value of the x-axis, in px. Defaults to **0** for the unit matrix. |
| m31 | number | Yes | Translation value of the y-axis, in px. Defaults to **0** for the unit matrix. | | m31 | number | Yes | Translation value of the y-axis, in px. Defaults to **0** for the unit matrix. |
| m32 | number | Yes | Translation value of the z-axis, in px. Defaults to **0** for the unit matrix. | | m32 | number | Yes | Translation value of the z-axis, in px. Defaults to **0** for the unit matrix. |
| m33 | number | Yes | Valid in homogeneous coordinates, presenting the perspective projection effect. | | m33 | number | Yes | Valid in homogeneous coordinates, presenting the perspective projection effect. |
- Example 4. Example
``` ```ts
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
// Create a 4x4 matrix. // Create a 4x4 matrix.
let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0, let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0,
...@@ -67,23 +60,20 @@ Matrix constructor, which is used to create a 4x4 matrix by using the input para ...@@ -67,23 +60,20 @@ Matrix constructor, which is used to create a 4x4 matrix by using the input para
0.0, 0.0, 0.0, 1.0]) 0.0, 0.0, 0.0, 1.0])
``` ```
## matrix4.identity ## matrix4.identity
identity(): Object identity(): Object
Matrix initialization function. Can return a unit matrix object. Matrix initialization function. Can return a unit matrix object.
1. Return value
- Return value | Type | Description |
| Type | Description | | ------ | ------------------- |
| -------- | -------- |
| Object | Unit matrix object. | | Object | Unit matrix object. |
- Example 2. Example
``` ```ts
// The effect of matrix 1 is the same as that of matrix 2. // The effect of matrix 1 is the same as that of matrix 2.
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0, let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0,
...@@ -93,23 +83,20 @@ Matrix initialization function. Can return a unit matrix object. ...@@ -93,23 +83,20 @@ Matrix initialization function. Can return a unit matrix object.
let matrix2 = Matrix4.identity() let matrix2 = Matrix4.identity()
``` ```
## matrix4.copy ## matrix4.copy
copy(): Object copy(): Object
Matrix copy function, which is used to copy the current matrix object. Matrix copy function, which is used to copy the current matrix object.
1. Return value
- Return value | Type | Description |
| Type | Description | | ------ | ---------------------------------- |
| -------- | -------- |
| Object | Copy object of the current matrix. | | Object | Copy object of the current matrix. |
- Example 2. Example
``` ```ts
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
@Entry @Entry
@Component @Component
...@@ -134,31 +121,27 @@ Matrix copy function, which is used to copy the current matrix object. ...@@ -134,31 +121,27 @@ Matrix copy function, which is used to copy the current matrix object.
![en-us_image_0000001256858419](figures/en-us_image_0000001256858419.png) ![en-us_image_0000001256858419](figures/en-us_image_0000001256858419.png)
## Matrix4 ## Matrix4
### combine ### combine
combine(matrix: Matrix4): Object combine(matrix: Matrix4): Object
Matrix overlay function, which is used to overlay the effects of two matrices to generate a new matrix object. Matrix overlay function, which is used to overlay the effects of two matrices to generate a new matrix object.
1. Parameters
| Name | Type | Mandatory | Default Value | Description |
| ------ | ------- | --------- | ------------- | ----------------------------- |
| matrix | Matrix4 | Yes | - | Matrix object to be overlaid. |
- Parameters 2. Return value
| Name | Type | Mandatory | Default Value | Description | | Type | Description |
| -------- | -------- | -------- | -------- | -------- | | ------ | ---------------------------- |
| matrix | Matrix4 | Yes | - | Matrix object to be overlaid. |
- Return value
| Type | Description |
| -------- | -------- |
| Object | Object after matrix overlay. | | Object | Object after matrix overlay. |
- Example - Example
``` ```ts
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
@Entry @Entry
@Component @Component
...@@ -179,54 +162,48 @@ Matrix overlay function, which is used to overlay the effects of two matrices to ...@@ -179,54 +162,48 @@ Matrix overlay function, which is used to overlay the effects of two matrices to
![en-us_image_0000001212378428](figures/en-us_image_0000001212378428.png) ![en-us_image_0000001212378428](figures/en-us_image_0000001212378428.png)
### invert ### invert
invert(): Object invert(): Object
Matrix inverse function. Can return an inverse matrix of the current matrix object, that is, get an opposite effect. Matrix inverse function. Can return an inverse matrix of the current matrix object, that is, get an opposite effect.
1. Return value
- Return value | Type | Description |
| Type | Description | | ------ | -------- |
| -------- | -------- |
| Object | Inverse matrix object of the current matrix. | | Object | Inverse matrix object of the current matrix. |
- Example 2. Example
``` ```ts
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
// The effect of matrix 1 (width scaled up by 2x) is opposite to that of matrix 2 (width scaled down by 2x). // The effect of matrix 1 (width scaled up by 2x) is opposite to that of matrix 2 (width scaled down by 2x).
let matrix1 = Matrix4.identity().scale({x:2}) let matrix1 = Matrix4.identity().scale({x:2})
let matrix2 = matrix1.invert() let matrix2 = matrix1.invert()
``` ```
### translate ### translate
translate({x?: number, y?: number, z?: number}): Object translate({x?: number, y?: number, z?: number}): Object
Matrix translation function, which is used to add the translation effect to the x, y, and z axes of the current matrix. Matrix translation function, which is used to add the translation effect to the x, y, and z axes of the current matrix.
1. Parameters
- Parameters | Name | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | Default Value | Description | |----- | ------ | -------- | -------------- | ------------------------------------------ |
| -------- | -------- | -------- | -------- | -------- | | x | number | No | 0 | Translation distance of the x-axis, in px. |
| x | number | No | 0 | Translation distance of the x-axis, in px. | | y | number | No | 0 | Translation distance of the y-axis, in px. |
| y | number | No | 0 | Translation distance of the y-axis, in px. | | z | number | No | 0 | Translation distance of the z-axis, in px. |
| z | number | No | 0 | Translation distance of the z-axis, in px. |
- Return value 2. Return value
| Type | Description | | Type | Description |
| -------- | -------- | | ------ | ---------------------------------------------------- |
| Object | Matrix object after the translation effect is added. | | Object | Matrix object after the translation effect is added. |
- Example 3. Example
``` ```ts
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
@Entry @Entry
@Component @Component
...@@ -244,33 +221,30 @@ Matrix translation function, which is used to add the translation effect to the ...@@ -244,33 +221,30 @@ Matrix translation function, which is used to add the translation effect to the
![en-us_image_0000001212058494](figures/en-us_image_0000001212058494.png) ![en-us_image_0000001212058494](figures/en-us_image_0000001212058494.png)
### scale ### scale
scale({x?: number, y?: number, z?: number, centerX?: number, centerY?: number}): Object scale({x?: number, y?: number, z?: number, centerX?: number, centerY?: number}): Object
Matrix scaling function, which is used to add the scaling effect to the x, y, and z axes of the current matrix. Matrix scaling function, which is used to add the scaling effect to the x, y, and z axes of the current matrix.
1. Parameters
- Parameters | Name | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | Default Value | Description | | ------- | ------ | --------- | ------------- | --------------------------------- |
| -------- | -------- | -------- | -------- | -------- | | x | number | No | 1 | Scaling multiple of the x-axis. |
| x | number | No | 1 | Scaling multiple of the x-axis. | | y | number | No | 1 | Scaling multiple of the y-axis. |
| y | number | No | 1 | Scaling multiple of the y-axis. | | z | number | No | 1 | Scaling multiple of the z-axis. |
| z | number | No | 1 | Scaling multiple of the z-axis. | | centerX | number | No | 0 | X coordinate of the center point. |
| centerX | number | No | 0 | X coordinate of the center point. | | centerY | number | No | 0 | Y coordinate of the center point. |
| centerY | number | No | 0 | Y coordinate of the center point. |
- Return value 2. Return value
| Type | Description | | Type | Description |
| -------- | -------- | | ------ | ------------------------------------------------ |
| Object | Matrix object after the scaling effect is added. | | Object | Matrix object after the scaling effect is added. |
- Example 3. Example
``` ```ts
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
@Entry @Entry
@Component @Component
...@@ -288,34 +262,30 @@ Matrix scaling function, which is used to add the scaling effect to the x, y, an ...@@ -288,34 +262,30 @@ Matrix scaling function, which is used to add the scaling effect to the x, y, an
![en-us_image_0000001256978367](figures/en-us_image_0000001256978367.png) ![en-us_image_0000001256978367](figures/en-us_image_0000001256978367.png)
### rotate ### rotate
rotate({x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length}): Object rotate({x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length}): Object
Matrix rotation function, which is used to add the rotation effect to the x, y, and z axes of the current matrix. Matrix rotation function, which is used to add the rotation effect to the x, y, and z axes of the current matrix.
1. Parameters
- Parameters | Name | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | Default Value | Description | | ------- | ------ | --------- | ------------- | ----------------------------------------- |
| -------- | -------- | -------- | -------- | -------- | | x | number | No | 1 | X coordinate of the rotation axis vector. |
| x | number | No | 1 | X coordinate of the rotation axis vector. | | y | number | No | 1 | Y coordinate of the rotation axis vector. |
| y | number | No | 1 | Y coordinate of the rotation axis vector. | | z | number | No | 1 | Z coordinate of the rotation axis vector. |
| z | number | No | 1 | Z coordinate of the rotation axis vector. | | angle | number | No | 0 | Rotation angle. |
| angle | number | No | 0 | Rotation angle. | | centerX | number | No | 0 | X coordinate of the center point. |
| centerX | number | No | 0 | X coordinate of the center point. | | centerY | number | No | 0 | Y coordinate of the center point. |
| centerY | number | No | 0 | Y coordinate of the center point. |
2. Return value
| Type | Description |
- Return value | ------ | ------------------------------------------------- |
| Type | Description |
| -------- | -------- |
| Object | Matrix object after the rotation effect is added. | | Object | Matrix object after the rotation effect is added. |
- Example 3. Example
``` ```ts
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
@Entry @Entry
@Component @Component
...@@ -333,29 +303,25 @@ Matrix rotation function, which is used to add the rotation effect to the x, y, ...@@ -333,29 +303,25 @@ Matrix rotation function, which is used to add the rotation effect to the x, y,
![en-us_image_0000001211898504](figures/en-us_image_0000001211898504.png) ![en-us_image_0000001211898504](figures/en-us_image_0000001211898504.png)
### transformPoint ### transformPoint
transformPoint(point: Point): Point transformPoint(point: Point): Point
Matrix point transformation function, which is used to apply the current transformation effect to a coordinate point. Matrix point transformation function, which is used to apply the current transformation effect to a coordinate point.
1. Parameters
| Name | Type | Mandatory | Default Value | Description |
| ----- | ----- | --------- | ------------- | ------------------------ |
| point | Point | Yes | - | Point to be transformed. |
- Parameters 2. Return value
| Name | Type | Mandatory | Default Value | Description | | Type | Description |
| -------- | -------- | -------- | -------- | -------- | | ----- | ----------------------------------------- |
| point | Point | Yes | - | Point to be transformed. | | Point | Point object after matrix transformation. |
- Return value 3. Example
| Type | Description |
| -------- | -------- |
| Point | Point object after matrix transformation |
- Example
``` ```ts
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
import prompt from '@system.prompt' import prompt from '@system.prompt'
...@@ -374,4 +340,4 @@ Matrix point transformation function, which is used to apply the current transfo ...@@ -374,4 +340,4 @@ Matrix point transformation function, which is used to apply the current transfo
} }
``` ```
![en-us_image_0000001212218464](figures/en-us_image_0000001212218464.gif) ![en-us_image_0000001212218464](figures/en-us_image_0000001212218464.gif)
\ No newline at end of file
en/application-dev/reference/arkui-ts/ts-media-components-video.md
浏览文件 @ 7cb044ad
...@@ -9,7 +9,7 @@ The **\<Video>** component provides a video player. ...@@ -9,7 +9,7 @@ The **\<Video>** component provides a video player.
To use online videos, you need to add the **ohos.permission.INTERNET** permission to the corresponding **abilities** in the **config.json** or **module.json** file, whichever is appropriate. To use online videos, you need to add the **ohos.permission.INTERNET** permission to the corresponding **abilities** in the **config.json** or **module.json** file, whichever is appropriate.
``` ```json
"abilities":[ "abilities":[
{ {
... ...
...@@ -19,17 +19,15 @@ To use online videos, you need to add the **ohos.permission.INTERNET** permissio ...@@ -19,17 +19,15 @@ To use online videos, you need to add the **ohos.permission.INTERNET** permissio
] ]
``` ```
## Child Components ## Child Components
Not supported Not supported
## APIs ## APIs
Video(value: VideoOptions) Video(value: VideoOptions)
- VideoOptions attributes 1. VideoOptions attributes
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| src | string \| [Resource](../../ui/ts-types.md) | No| - | Path of the video source, which can be a local path or a URL.<br>The video resources can be stored in the **video** or **rawfile** folder under **resources**.<br>The path can include a **dataability://** prefix, which is used to access the video path provided by a Data ability. For details about the path, see [Data Ability Development](../../ability/fa-dataability.md).| | src | string \| [Resource](../../ui/ts-types.md) | No| - | Path of the video source, which can be a local path or a URL.<br>The video resources can be stored in the **video** or **rawfile** folder under **resources**.<br>The path can include a **dataability://** prefix, which is used to access the video path provided by a Data ability. For details about the path, see [Data Ability Development](../../ability/fa-dataability.md).|
...@@ -38,25 +36,24 @@ Video(value: VideoOptions) ...@@ -38,25 +36,24 @@ Video(value: VideoOptions)
| controller | [VideoController](#videocontroller) | No| - | Controller.| | controller | [VideoController](#videocontroller) | No| - | Controller.|
- PlaybackSpeed<sup>8+</sup> 2. PlaybackSpeed<sup>8+</sup>
| Name| Description| | Name | Description |
| -------- | -------- | | -------------------- | --------------------- |
| Speed_Forward_0_75_X | 0.75x playback speed.| | Speed_Forward_0_75_X | 0.75x playback speed. |
| Speed_Forward_1_00_X | 1x playback speed.| | Speed_Forward_1_00_X | 1x playback speed. |
| Speed_Forward_1_25_X | 1.25x playback speed.| | Speed_Forward_1_25_X | 1.25x playback speed. |
| Speed_Forward_1_75_X | 1.75x playback speed.| | Speed_Forward_1_75_X | 1.75x playback speed. |
| Speed_Forward_2_00_X | 2x playback speed.| | Speed_Forward_2_00_X | 2x playback speed. |
## Attributes ## Attributes
| Name| Type| Default Value| Description| | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- | | --------- | ---------------------------------------- | ------------- | -------------------------------------------------- |
| muted | boolean | false | Whether the video is muted.| | muted | boolean | false | Whether the video is muted. |
| autoPlay | boolean | false | Whether to enable auto play.| | autoPlay | boolean | false | Whether to enable auto play. |
| controls | boolean | true | Whether to display the video playback control bar.| | controls | boolean | true | Whether to display the video playback control bar. |
| objectFit | [ImageFit](ts-basic-components-image.md) | Cover | Video scale type. | | objectFit | [ImageFit](ts-basic-components-image.md) | Cover | Video scale type. |
| loop | boolean | false | Whether to repeat the video.| | loop | boolean | false | Whether to repeat the video. |
## Events ## Events
...@@ -80,39 +77,47 @@ A **VideoController** object can control one or more videos. ...@@ -80,39 +77,47 @@ A **VideoController** object can control one or more videos.
### Objects to Import ### Objects to Import
``` ```ts
controller: VideoController = new VideoController(); controller: VideoController = new VideoController();
``` ```
### start ### start
```ts
start(): void start(): void
Starts playback. Starts playback.
```
### pause ### pause
```ts
pause(): void pause(): void
Pauses playback. Pauses playback.
```
### stop ### stop
```ts
stop(): void stop(): void
Stops playback. Stops playback.
```
### setCurrentTime ### setCurrentTime
```ts
setCurrentTime(value: number) setCurrentTime(value: number)
Sets the video playback position. Sets the video playback position.
```
- Parameters - Parameters
| Name| Type| Mandatory| Default Value| Description| | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ----- | ------ | --------- | ------------- | ------------------------ |
| value | number | Yes| - | Video playback position.| | value | number | Yes | - | Video playback position. |
### requestFullscreen ### requestFullscreen
...@@ -121,9 +126,9 @@ requestFullscreen(value: boolean) ...@@ -121,9 +126,9 @@ requestFullscreen(value: boolean)
Requests full-screen mode. Requests full-screen mode.
- Parameters - Parameters
| Name| Type| Mandatory| Default Value| Description| | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ----- | ------ | --------- | ------------- | -------------------------------------------- |
| value | number | Yes| false | Whether the playback is in full-screen mode.| | value | number | Yes | false | Whether the playback is in full-screen mode. |
### exitFullscreen ### exitFullscreen
...@@ -137,21 +142,19 @@ setCurrentTime(value: number, seekMode: SeekMode) ...@@ -137,21 +142,19 @@ setCurrentTime(value: number, seekMode: SeekMode)
Sets the video playback position with the specified seek mode. Sets the video playback position with the specified seek mode.
- Parameters 1. Parameters
| Name| Type| Mandatory| Default Value| Description| | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | --------- | ------------- | ----------------------- |
| value | number | Yes| - | Video playback position.| | value | number | Yes | - | Video playback position. |
| seekMode | SeekMode | Yes| - | Seek mode.| | seekMode | SeekMode | Yes | - | Seek mode. |
- SeekMode<sup>8+</sup>
| Name| Description|
| -------- | -------- |
| PreviousKeyframe | Seeks to the nearest previous keyframe.|
| NextKeyframe | Seeks to the nearest next keyframe.|
| ClosestKeyframe | Seeks to the nearest keyframe.|
| Accurate | Seeks to a specific frame, regardless of whether the frame is a keyframe.|
2. SeekMode<sup>8+</sup>
| Name | Description |
| ---------------- | ------------------------------------------------------------------------- |
| PreviousKeyframe | Seeks to the nearest previous keyframe. |
| NextKeyframe | Seeks to the nearest next keyframe. |
| ClosestKeyframe | Seeks to the nearest keyframe. |
| Accurate | Seeks to a specific frame, regardless of whether the frame is a keyframe. |
## Example ## Example
...@@ -233,4 +236,4 @@ struct VideoCreateComponent { ...@@ -233,4 +236,4 @@ struct VideoCreateComponent {
} }
} }
} }
``` ```
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或