diff --git a/en/application-dev/quick-start/arkts-animatable-extend.md b/en/application-dev/quick-start/arkts-animatable-extend.md new file mode 100644 index 0000000000000000000000000000000000000000..3664c9073271914dd7ef3689b980d9703dd7b741 --- /dev/null +++ b/en/application-dev/quick-start/arkts-animatable-extend.md @@ -0,0 +1,179 @@ +# \@AnimatableExtend Decorator: Definition of Animatable Attributes + +The @AnimatableExtend decorator is used to define an attribute method for animating a non-animatable attribute of a component. During animation execution, the frame-by-frame callback is used to change the value of the non-animatable attribute so that an animation effect can be applied to the attribute. + +- Animatable attribute: If an attribute method is called before the **animation** attribute, and changing the value of this attribute can make the animation effect specified by the **animation** attribute take effect, then this attribute is called animatable attribute. Examples of animatable attributes are **height**, **width**, **backgroundColor**, and **translate**. + +- Non-animatable attribute: If an attribute method is called before the **animation** attribute, and changing the value of this attribute cannot make the animation effect specified by the **animation** attribute take effect, then this attribute is called non-animatable attribute. Examples of non-animatable attributes are **fontSize** of the **\** component and **points** of the **\** component. + +> **NOTE** +> +> This decorator is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. + +## Rules of Use + + +### Syntax + + +```ts +@AnimatableExtend(UIComponentName) function functionName(value: typeName) { + .propertyName(value) +} +``` + +- \@AnimatableExtend can be defined only globally. +- The parameter of the \@AnimatableExtend decorated function must be of the number type or a custom type that implements the **AnimtableArithmetic\** API. +- In the \@AnimatableExtend decorated function body, only the attribute methods of the component specified in brackets immediately following \@AnimatableExtend can be called. + +### AnimtableArithmetic\ Description +To perform animation on complex data types, you must implement the addition, subtraction, multiplication, and equivalence judgment functions in the **AnimtableArithmetic\** API. +| Name| Input Parameter Type| Return Value Type| Description| +| -------- | -------- |-------- |-------- | +| plus | AnimtableArithmetic\ | AnimtableArithmetic\ | Addition function.| +| subtract | AnimtableArithmetic\ | AnimtableArithmetic\ | Subtraction function.| +| multiply | number | AnimtableArithmetic\ | Multiplication function.| +| equals | AnimtableArithmetic\ | boolean | Equivalence judgment function.| + +## Example + +The following example applies an animation to the font size attribute. + + +```ts +@AnimatableExtend(Text) function animatableFontSize(size: number) { + .fontSize(size) +} + +@Entry +@Component +struct AnimatablePropertyExample { + @State fontSize: number = 20 + build() { + Column() { + Text("AnimatableProperty") + .animatableFontSize(this.fontSize) + .animation({duration: 1000, curve: "ease"}) + Button("Play") + .onClick(() => { + this.fontSize = this.fontSize == 20 ? 36 : 20 + }) + }.width("100%") + .padding(10) + } +} +``` +![image](figures/animatable-font-size.gif) + + +The following example implements a polyline animation effect. + + +```ts +class Point { + x: number + y: number + + constructor(x: number, y: number) { + this.x = x + this.y = y + } + plus(rhs: Point): Point { + return new Point(this.x + rhs.x, this.y + rhs.y) + } + subtract(rhs: Point): Point { + return new Point(this.x - rhs.x, this.y - rhs.y) + } + multiply(scale: number): Point { + return new Point(this.x * scale, this.y * scale) + } + equals(rhs: Point): boolean { + return this.x === rhs.x && this.y === rhs.y + } +} + +class PointVector extends Array implements AnimatableArithmetic { + constructor(value: Array) { + super(); + value.forEach(p => this.push(p)) + } + plus(rhs: PointVector): PointVector { + let result = new PointVector([]) + const len = Math.min(this.length, rhs.length) + for (let i = 0; i < len; i++) { + result.push(this[i].plus(rhs[i])) + } + return result + } + subtract(rhs: PointVector): PointVector { + let result = new PointVector([]) + const len = Math.min(this.length, rhs.length) + for (let i = 0; i < len; i++) { + result.push(this[i].subtract(rhs[i])) + } + return result + } + multiply(scale: number): PointVector { + let result = new PointVector([]) + for (let i = 0; i < this.length; i++) { + result.push(this[i].multiply(scale)) + } + return result + } + equals(rhs: PointVector): boolean { + if (this.length != rhs.length) { + return false + } + for (let i = 0; i < this.length; i++) { + if (!this[i].equals(rhs[i])) { + return false + } + } + return true + } + get():Array<[x: number, y: number]> { + let result = [] + this.forEach(p => result.push([p.x, p.y])) + return result + } +} + +@AnimatableExtend(Polyline) function animatablePoints(points: PointVector) { + .points(points.get()) +} + +@Entry +@Component +struct AnimatablePropertyExample { + @State points: PointVector = new PointVector([ + new Point(50, Math.random() * 200), + new Point(100, Math.random() * 200), + new Point(150, Math.random() * 200), + new Point(200, Math.random() * 200), + new Point(250, Math.random() * 200), + ]) + build() { + Column() { + Polyline() + .animatablePoints(this.points) + .animation({duration: 1000, curve: "ease"}) + .size({height:220, width:300}) + .fill(Color.Green) + .stroke(Color.Red) + .backgroundColor('#eeaacc') + Button("Play") + .onClick(() => { + this.points = new PointVector([ + new Point(50, Math.random() * 200), + new Point(100, Math.random() * 200), + new Point(150, Math.random() * 200), + new Point(200, Math.random() * 200), + new Point(250, Math.random() * 200), + ]) + }) + }.width("100%") + .padding(10) + } +} +``` +![image](figures/animatable-points.gif) diff --git a/en/application-dev/quick-start/figures/animatable-font-size.gif b/en/application-dev/quick-start/figures/animatable-font-size.gif new file mode 100644 index 0000000000000000000000000000000000000000..b127a59f8899e20aa4b827ad3b2101b0d08d1b8d Binary files /dev/null and b/en/application-dev/quick-start/figures/animatable-font-size.gif differ diff --git a/en/application-dev/quick-start/figures/animatable-points.gif b/en/application-dev/quick-start/figures/animatable-points.gif new file mode 100644 index 0000000000000000000000000000000000000000..64092e50a4c3869c61f09347048eeb041a46dd9d Binary files /dev/null and b/en/application-dev/quick-start/figures/animatable-points.gif differ diff --git a/en/application-dev/quick-start/resource-categories-and-access.md b/en/application-dev/quick-start/resource-categories-and-access.md index f87ae3594a44b17b34233adfd0d8127a2be34028..f047ad787904690cb3efd7f8c9beaf580d348a7b 100644 --- a/en/application-dev/quick-start/resource-categories-and-access.md +++ b/en/application-dev/quick-start/resource-categories-and-access.md @@ -240,6 +240,8 @@ To reference an application resource in a project, use the **"$r('app.type.name' When referencing resources in the **rawfile** subdirectory, use the **"$rawfile('filename')"** format. Wherein **filename** indicates the relative path of a file in the **rawfile** subdirectory, which must contain the file name extension and cannot start with a slash (/). +To obtain the descriptor of a file in the **rawfile** subdirectory, you can use the [getRawFd](../reference/apis/js-apis-resource-manager.md#getrawfd9) API, whose return value **descriptor.fd** is the file descriptor (FD). To access the file with this FD, use {fd, offset, length}. + > **NOTE** > > Resource descriptors accept only strings, such as **'app.type.name'**, and cannot be combined. @@ -284,7 +286,7 @@ To reference a system resource, use the **"$r('sys.type.resource_id')"** format. > **NOTE** > -> - Use of system resources is supported in the declarative development paradigm, but not in the web-like development paradigm. +> - The use of system resources is supported in the declarative development paradigm, but not in the web-like development paradigm. > > - For details about the implementation of preconfigured resources, visit the [OpenHarmony/resources repository](https://gitee.com/openharmony/resources/tree/master/systemres/main/resources). The directory structure there is similar to that of the **resources** directory in the project. Resource qualifiers are used to match resources with different devices and device states. diff --git a/en/application-dev/quick-start/start-with-ets-stage.md b/en/application-dev/quick-start/start-with-ets-stage.md index b36b98e08c31e1132ada81230d3ef8110227a422..ec3ab196bb1d0edb494d2a26be688b4b455a714a 100644 --- a/en/application-dev/quick-start/start-with-ets-stage.md +++ b/en/application-dev/quick-start/start-with-ets-stage.md @@ -35,7 +35,7 @@ The following describes how to create the OpenHarmony projects of API 10 and API 4. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created. -5. After the project is created, in the project-level **build-profile.json5** file, move the **compileSdkVersion** and **compatibleSdkVersion** fields from under **app** to under the current **products**. You can identify the current **products** by clicking the ![en-us_image_0000001609333677](figures/en-us_image_0000001609333677.png) icon in the upper right corner of the editing area. +5. After the project is created, in the project-level **build-profile.json5** file (at the same directory level as **entry**), move the **compileSdkVersion** and **compatibleSdkVersion** fields from under **app** to under the current **products**. You can identify the current **products** by clicking the ![en-us_image_0000001609333677](figures/en-us_image_0000001609333677.png) icon in the upper right corner of the editing area. ![changeToAPI10](figures/changeToAPI10.png) diff --git a/en/application-dev/reference/native-apis/native__interface__xcomponent_8h.md b/en/application-dev/reference/native-apis/native__interface__xcomponent_8h.md index 184f2aa0a1d11409f243f86f9d40e279488a8812..ddd53144f6359edcebf6e3f89f209c5ec2508bb2 100644 --- a/en/application-dev/reference/native-apis/native__interface__xcomponent_8h.md +++ b/en/application-dev/reference/native-apis/native__interface__xcomponent_8h.md @@ -41,7 +41,7 @@ Declares the APIs used to access the native XComponent. | Name | Description | | -------- | -------- | -| { OH_NATIVEXCOMPONENT_RESULT_SUCCESS = 0,
OH_NATIVEXCOMPONENT_RESULT_FAILED = -1,
OH_NATIVEXCOMPONENT_RESULT_BAD_PARAMETER = -2} | [Enumerates](_o_h___native_x_component.md#anonymous-enum)the API access states. | +| { OH_NATIVEXCOMPONENT_RESULT_SUCCESS = 0,
OH_NATIVEXCOMPONENT_RESULT_FAILED = -1,
OH_NATIVEXCOMPONENT_RESULT_BAD_PARAMETER = -2} | [Enumerates](_o_h___native_x_component.md#anonymous-enum) the API access states. | | [OH_NativeXComponent_TouchEventType](_o_h___native_x_component.md#oh_nativexcomponent_toucheventtype) {
OH_NATIVEXCOMPONENT_DOWN = 0,
OH_NATIVEXCOMPONENT_UP,
OH_NATIVEXCOMPONENT_MOVE,
OH_NATIVEXCOMPONENT_CANCEL,
OH_NATIVEXCOMPONENT_UNKNOWN } | Enumerates the touch event types. | | [OH_NativeXComponent_MouseEventAction](_o_h___native_x_component.md#oh_nativexcomponent_mouseeventaction) {
OH_NATIVEXCOMPONENT_MOUSE_NONE = 0,
OH_NATIVEXCOMPONENT_MOUSE_PRESS,
OH_NATIVEXCOMPONENT_MOUSE_RELEASE,
OH_NATIVEXCOMPONENT_MOUSE_MOVE } | Enumerates the mouse event actions. | | [OH_NativeXComponent_MouseEventButton](_o_h___native_x_component.md#oh_nativexcomponent_mouseeventbutton) {
OH_NATIVEXCOMPONENT_NONE_BUTTON = 0,
OH_NATIVEXCOMPONENT_LEFT_BUTTON = 0x01,
OH_NATIVEXCOMPONENT_RIGHT_BUTTON = 0x02,
OH_NATIVEXCOMPONENT_MIDDLE_BUTTON = 0x04,
OH_NATIVEXCOMPONENT_BACK_BUTTON = 0x08,
OH_NATIVEXCOMPONENT_FORWARD_BUTTON = 0x10 } | Enumerates the mouse event buttons. |