未验证 提交 21a14361 编写于 作者: Mr-YX's avatar Mr-YX 提交者: Gitee

Signed-off-by: mr-yx <496043997@qq.com>

上级 afdc4a0f
# 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 |
...@@ -24,14 +24,14 @@ ...@@ -24,14 +24,14 @@
- 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 {
......
# 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. |
...@@ -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 {
......
# 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 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
...@@ -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
- Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ---- | ------ | --------- | -------------------------------------------------------------- |
| x1 | number | Yes | Horizontal coordinate of the first point on the Bezier curve. | | 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. | | 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. | | 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. | | y2 | number | Yes | Vertical coordinate of the second point on the Bezier curve. |
- Return value 2. 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
- Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | --------- | ------ | --------- | ----------------- |
| velocity | number | Yes | Initial velocity. | | velocity | number | Yes | Initial velocity. |
| mass | number | Yes | Mass. | | mass | number | Yes | Mass. |
| stiffness | number | Yes | Stiffness. | | stiffness | number | Yes | Stiffness. |
| damping | number | Yes | Damping. | | damping | number | Yes | Damping. |
- Return value 2. 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
......
# 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. |
...@@ -56,9 +49,9 @@ Matrix constructor, which is used to create a 4x4 matrix by using the input para ...@@ -56,9 +49,9 @@ Matrix constructor, which is used to create a 4x4 matrix by using the input para
| 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
- Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------- | --------- | ------------- | ----------------------------- |
| matrix | Matrix4 | Yes | - | Matrix object to be overlaid. | | matrix | Matrix4 | Yes | - | Matrix object to be overlaid. |
- Return value 2. Return value
| Type | Description | | 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,18 +221,15 @@ Matrix translation function, which is used to add the translation effect to the ...@@ -244,18 +221,15 @@ 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. |
...@@ -263,14 +237,14 @@ Matrix scaling function, which is used to add the scaling effect to the x, y, an ...@@ -263,14 +237,14 @@ Matrix scaling function, which is used to add the scaling effect to the x, y, an
| 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,18 +262,15 @@ Matrix scaling function, which is used to add the scaling effect to the x, y, an ...@@ -288,18 +262,15 @@ 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. |
...@@ -307,15 +278,14 @@ Matrix rotation function, which is used to add the rotation effect to the x, y, ...@@ -307,15 +278,14 @@ Matrix rotation function, which is used to add the rotation effect to the x, y,
| 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
- Return value
| Type | Description | | 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
- Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ----- | ----- | --------- | ------------- | ------------------------ |
| point | Point | Yes | - | Point to be transformed. | | point | Point | Yes | - | Point to be transformed. |
2. Return value
- Return value
| Type | Description | | Type | Description |
| -------- | -------- | | ----- | ----------------------------------------- |
| Point | Point object after matrix transformation | | Point | Point object after matrix transformation. |
- Example 3. Example
``` ```ts
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
import prompt from '@system.prompt' import prompt from '@system.prompt'
......
...@@ -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> 2. SeekMode<sup>8+</sup>
| Name| Description| | Name | Description |
| -------- | -------- | | ---------------- | ------------------------------------------------------------------------- |
| PreviousKeyframe | Seeks to the nearest previous keyframe.| | PreviousKeyframe | Seeks to the nearest previous keyframe. |
| NextKeyframe | Seeks to the nearest next keyframe.| | NextKeyframe | Seeks to the nearest next keyframe. |
| ClosestKeyframe | Seeks to the nearest keyframe.| | ClosestKeyframe | Seeks to the nearest keyframe. |
| Accurate | Seeks to a specific frame, regardless of whether the frame is a keyframe.| | Accurate | Seeks to a specific frame, regardless of whether the frame is a keyframe. |
## Example ## Example
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册