diff --git a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md index d3a75465226905a1a9b144f09dffd50d5a7ee0a7..7b8d8873ef61efdf453367a6f753ad55cf1d7951 100644 --- a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md +++ b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md @@ -1,7 +1,7 @@ # Explicit Animation -> ![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. | Name | Description | @@ -12,7 +12,7 @@ ## AnimationOptions - Attributes - | Name | Type | Default Value | Description | + | Name | Type | Default Value | Description | | -------- | -------- | -------- | -------- | | 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. | @@ -23,15 +23,15 @@ - APIs - | Name | Description | - | -------- | -------- | + | Name | Description | + | --------------------- | --------------------------------------------------------- | | onFinish() => void | Callback invoked when the animation playback is complete. | ## Example -``` +```ts @Entry @Component 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 diff --git a/en/application-dev/reference/arkui-ts/ts-gesture-settings.md b/en/application-dev/reference/arkui-ts/ts-gesture-settings.md index b51abd4a6cdb11e4c2678d5983c2ca7e44cdd1ca..de6a9f874a3c140c9f3a9c6ac4aa718dfeeccfd3 100644 --- a/en/application-dev/reference/arkui-ts/ts-gesture-settings.md +++ b/en/application-dev/reference/arkui-ts/ts-gesture-settings.md @@ -1,7 +1,7 @@ # Gesture Binding Methods -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
> 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 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,
mask?: GestureMask | gesture: -,
mask: GestureMask.Normal | Gesture to recognize.
**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting. | | priorityGesture | gesture: GestureType,
mask?: GestureMask | gesture: -,
mask: GestureMask.Normal | Gesture to preferentially recognize.
**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> - 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 - 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. | | IgnoreInternal | The gestures of child components are masked. Only the gestures of the current component are recognized.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> However, the built-in gestures of the child components are not masked. For example, when the child component is a **<List>** component, the built-in sliding gestures can still be triggered. | - Gesture types - | Name | Description | + | Name | Description | | -------- | -------- | | TapGesture | Tap gesture, which can be a single-tap or multi-tap gesture. | | LongPressGesture | Long press gesture. | @@ -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. - TapGesture events - | Name | Description | + | Name | Description | | -------- | -------- | | onAction((event?: GestureEvent) => void) | Callback invoked when a tap gesture is recognized. | - GestureEvent attributes - | Name | Type | Description | + | Name | Type | Description | | -------- | -------- | -------- | | timestamp | number | Timestamp of the event. | | target8+ | 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 ## Example -``` +```ts @Entry @Component 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 diff --git a/en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md b/en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md index 22126cd74687d1105872e85efa83f26dba71cadd..c14df5315b4924468e5b3377baa1f0c909324900 100644 --- a/en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md +++ b/en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md @@ -1,51 +1,41 @@ # Interpolation Calculation - > **NOTE**
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - ## Modules to Import - -``` +```ts import curves from '@ohos.curves' ``` - ## Required Permissions None - ## curves.init init(curve?: Curve): Object - Implements initialization for the interpolation curve, which is used to create an interpolation curve object based on the input parameter. - - Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | curve | Curve | No | Linear | Curve object. | - + | Name | Type | Mandatory | Default Value | Description | + | ----- | ----- | --------- | ------------- | ------------- | + | curve | Curve | No | Linear | Curve object. | + - Return value Curve object. - ## curves.steps steps(count: number, end: boolean): Object - Constructs a step curve object. - - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | | 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. | @@ -54,53 +44,45 @@ Constructs a step curve object. Curve object. - ## curves.cubicBezier 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. +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 - | 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 +2. Return value Curve object. - ## curves.spring spring(velocity: number, mass: number, stiffness: number, damping: number): 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 - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | velocity | number | Yes | Initial velocity. | - | mass | number | Yes | Mass. | - | stiffness | number | Yes | Stiffness. | - | damping | number | Yes | Damping. | - -- Return value +2. Return value Curve object. - ## Example - -``` +```ts import Curves from '@ohos.curves' 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. @@ -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. ``` - Curve objects can be created only by the preceding APIs. | API | Description | | -------- | -------- | | interpolate(time: number): number | Calculation function of the interpolation curve. Passing a normalized time parameter to this function returns the current interpolation.
**time**: indicates the current normalized time. The value ranges from 0 to 1.
The curve interpolation corresponding to the normalized time point is returned. | - - Example - ``` + ```ts import Curves from '@ohos.curves' 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. ``` - ## Example - -``` +```ts import Curves from '@ohos.curves' @Entry @Component @@ -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 diff --git a/en/application-dev/reference/arkui-ts/ts-matrix-transformation.md b/en/application-dev/reference/arkui-ts/ts-matrix-transformation.md index 0eded3f87db1c32ab188901e7d9f68e62ef17ddc..fa6cb34e5ba4b0ed92722e0d82e1e8b5f03dea91 100644 --- a/en/application-dev/reference/arkui-ts/ts-matrix-transformation.md +++ b/en/application-dev/reference/arkui-ts/ts-matrix-transformation.md @@ -1,64 +1,57 @@ # Matrix Transformation - > **NOTE**
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - ## Modules to Import - -``` +```ts import matrix4 from '@ohos.matrix4' ``` - ## Required Permissions None - ## matrix4.init init(array: Array<number>): Object - Matrix constructor, which is used to create a 4x4 matrix by using the input parameter. Column-major order is used. - -- Parameters - | Name | Type | Mandatory | Default Value | Description | +1. Parameters + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | | array | Array<number> | Yes | [1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1] | A number array whose length is 16 (4 x 4). For details, see the parameter description. | -- Return value - | Type | Description | - | -------- | -------- | +2. Return value + | Type | Description | + | ------ | ------------------------------------------------------- | | Object | 4x4 matrix object created based on the input parameter. | -- Parameter description - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | 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. | - | m02 | number | Yes | The third value, which is affected by the rotation of the x, y, and z axes. | - | m03 | number | Yes | Meaningless. | - | 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. | - | m12 | number | Yes | The seventh value, which is affected by the rotation of the x, y, and z axes. | - | m13 | number | Yes | Meaningless. | - | 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. | - | m22 | number | Yes | Scaling value of the z-axis. Defaults to **1** for the unit matrix. | - | m23 | number | Yes | Meaningless. | - | 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. | - | 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. | - -- Example +3. Parameter description + | Name | Type | Mandatory | Description | + | ---- | ------ | --------- | ------------------------------------------------------------------------------- | + | 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. | + | m02 | number | Yes | The third value, which is affected by the rotation of the x, y, and z axes. | + | m03 | number | Yes | Meaningless. | + | 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. | + | m12 | number | Yes | The seventh value, which is affected by the rotation of the x, y, and z axes. | + | m13 | number | Yes | Meaningless. | + | 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. | + | m22 | number | Yes | Scaling value of the z-axis. Defaults to **1** for the unit matrix. | + | m23 | number | Yes | Meaningless. | + | 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. | + | 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. | + +4. Example - ``` + ```ts import Matrix4 from '@ohos.matrix4' // Create a 4x4 matrix. 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 0.0, 0.0, 0.0, 1.0]) ``` - ## matrix4.identity identity(): Object - Matrix initialization function. Can return a unit matrix object. - -- Return value - | Type | Description | - | -------- | -------- | +1. Return value + | Type | Description | + | ------ | ------------------- | | Object | Unit matrix object. | -- Example +2. Example - ``` + ```ts // The effect of matrix 1 is the same as that of matrix 2. import Matrix4 from '@ohos.matrix4' 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. let matrix2 = Matrix4.identity() ``` - ## matrix4.copy copy(): Object - Matrix copy function, which is used to copy the current matrix object. - -- Return value - | Type | Description | - | -------- | -------- | +1. Return value + | Type | Description | + | ------ | ---------------------------------- | | Object | Copy object of the current matrix. | -- Example +2. Example - ``` + ```ts import Matrix4 from '@ohos.matrix4' @Entry @Component @@ -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) - ## Matrix4 - ### combine combine(matrix: Matrix4): 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 - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | matrix | Matrix4 | Yes | - | Matrix object to be overlaid. | - -- Return value - | Type | Description | - | -------- | -------- | +2. Return value + | Type | Description | + | ------ | ---------------------------- | | Object | Object after matrix overlay. | - Example - ``` + ```ts import Matrix4 from '@ohos.matrix4' @Entry @Component @@ -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) - ### invert invert(): Object - Matrix inverse function. Can return an inverse matrix of the current matrix object, that is, get an opposite effect. - -- Return value - | Type | Description | - | -------- | -------- | +1. Return value + | Type | Description | + | ------ | -------- | | Object | Inverse matrix object of the current matrix. | -- Example +2. Example - ``` + ```ts 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). let matrix1 = Matrix4.identity().scale({x:2}) let matrix2 = matrix1.invert() ``` - ### translate 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. - -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | x | number | No | 0 | Translation distance of the x-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. | +1. Parameters + | Name | Type | Mandatory | Default Value | Description | + |----- | ------ | -------- | -------------- | ------------------------------------------ | + | x | number | No | 0 | Translation distance of the x-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. | -- Return value - | Type | Description | - | -------- | -------- | +2. Return value + | Type | Description | + | ------ | ---------------------------------------------------- | | Object | Matrix object after the translation effect is added. | -- Example +3. Example - ``` + ```ts import Matrix4 from '@ohos.matrix4' @Entry @Component @@ -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) - ### scale 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. - -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | x | number | No | 1 | Scaling multiple of the x-axis. | - | y | number | No | 1 | Scaling multiple of the y-axis. | - | z | number | No | 1 | Scaling multiple of the z-axis. | - | centerX | number | No | 0 | X coordinate of the center point. | - | centerY | number | No | 0 | Y coordinate of the center point. | +1. Parameters + | Name | Type | Mandatory | Default Value | Description | + | ------- | ------ | --------- | ------------- | --------------------------------- | + | x | number | No | 1 | Scaling multiple of the x-axis. | + | y | number | No | 1 | Scaling multiple of the y-axis. | + | z | number | No | 1 | Scaling multiple of the z-axis. | + | centerX | number | No | 0 | X coordinate of the center point. | + | centerY | number | No | 0 | Y coordinate of the center point. | -- Return value - | Type | Description | - | -------- | -------- | +2. Return value + | Type | Description | + | ------ | ------------------------------------------------ | | Object | Matrix object after the scaling effect is added. | -- Example +3. Example - ``` + ```ts import Matrix4 from '@ohos.matrix4' @Entry @Component @@ -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) - ### rotate 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. - -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | x | number | No | 1 | X 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. | - | angle | number | No | 0 | Rotation angle. | - | centerX | number | No | 0 | X coordinate of the center point. | - | centerY | number | No | 0 | Y coordinate of the center point. | - - -- Return value - | Type | Description | - | -------- | -------- | +1. Parameters + | Name | Type | Mandatory | Default Value | Description | + | ------- | ------ | --------- | ------------- | ----------------------------------------- | + | x | number | No | 1 | X 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. | + | angle | number | No | 0 | Rotation angle. | + | centerX | number | No | 0 | X coordinate of the center point. | + | centerY | number | No | 0 | Y coordinate of the center point. | + +2. Return value + | Type | Description | + | ------ | ------------------------------------------------- | | Object | Matrix object after the rotation effect is added. | -- Example +3. Example - ``` + ```ts import Matrix4 from '@ohos.matrix4' @Entry @Component @@ -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) - ### transformPoint transformPoint(point: Point): 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 - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | point | Point | Yes | - | Point to be transformed. | - +2. Return value + | Type | Description | + | ----- | ----------------------------------------- | + | Point | Point object after matrix transformation. | -- Return value - | Type | Description | - | -------- | -------- | - | Point | Point object after matrix transformation | - -- Example +3. Example - ``` + ```ts import Matrix4 from '@ohos.matrix4' import prompt from '@system.prompt' @@ -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 diff --git a/en/application-dev/reference/arkui-ts/ts-media-components-video.md b/en/application-dev/reference/arkui-ts/ts-media-components-video.md index e580461c27b429aa007a5f117e919036ffabd5b3..4fca7c3aeea0720c2bf9dc0390537a57533104ee 100644 --- a/en/application-dev/reference/arkui-ts/ts-media-components-video.md +++ b/en/application-dev/reference/arkui-ts/ts-media-components-video.md @@ -9,7 +9,7 @@ The **\