!21197 翻译完成 19713+21121+20132：quick-start文件夹刷新

Merge pull request !21197 from ester.zhou/TR-19713

en/application-dev/quick-start/arkts-animatable-extend.md

+# \@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 **\<Text>** component and **points** of the **\<Polyline>** 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\<T\>** API.
+- In the \@AnimatableExtend decorated function body, only the attribute methods of the component specified in brackets immediately following \@AnimatableExtend can be called.
+
+### AnimtableArithmetic\<T\> Description
+To perform animation on complex data types, you must implement the addition, subtraction, multiplication, and equivalence judgment functions in the **AnimtableArithmetic\<T\>** API.
+| Name| Input Parameter Type| Return Value Type| Description|
+| -------- | -------- |-------- |-------- |
+| plus | AnimtableArithmetic\<T\> | AnimtableArithmetic\<T\> | Addition function.|
+| subtract | AnimtableArithmetic\<T\> | AnimtableArithmetic\<T\> | Subtraction function.|
+| multiply | number | AnimtableArithmetic\<T\> | Multiplication function.|
+| equals | AnimtableArithmetic\<T\> | 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<Point> implements AnimatableArithmetic<PointVector> {
+  constructor(value: Array<Point>) {
+    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)

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.
 

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)
 

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, <br/>OH_NATIVEXCOMPONENT_RESULT_FAILED = -1, <br/>OH_NATIVEXCOMPONENT_RESULT_BAD_PARAMETER = -2} | [Enumerates](_o_h___native_x_component.md#anonymous-enum)the API access states. |
+| { OH_NATIVEXCOMPONENT_RESULT_SUCCESS = 0, <br/>OH_NATIVEXCOMPONENT_RESULT_FAILED = -1, <br/>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) {  <br/>OH_NATIVEXCOMPONENT_DOWN = 0, <br/>OH_NATIVEXCOMPONENT_UP, <br/>OH_NATIVEXCOMPONENT_MOVE, <br/>OH_NATIVEXCOMPONENT_CANCEL,<br/>OH_NATIVEXCOMPONENT_UNKNOWN } | Enumerates the touch event types.   |
 | [OH_NativeXComponent_MouseEventAction](_o_h___native_x_component.md#oh_nativexcomponent_mouseeventaction) { <br/>OH_NATIVEXCOMPONENT_MOUSE_NONE = 0, <br/>OH_NATIVEXCOMPONENT_MOUSE_PRESS, <br/>OH_NATIVEXCOMPONENT_MOUSE_RELEASE, <br/>OH_NATIVEXCOMPONENT_MOUSE_MOVE } | Enumerates the mouse event actions.        |
 | [OH_NativeXComponent_MouseEventButton](_o_h___native_x_component.md#oh_nativexcomponent_mouseeventbutton) {  <br/>OH_NATIVEXCOMPONENT_NONE_BUTTON = 0, <br/>OH_NATIVEXCOMPONENT_LEFT_BUTTON = 0x01, <br/>OH_NATIVEXCOMPONENT_RIGHT_BUTTON = 0x02, <br/>OH_NATIVEXCOMPONENT_MIDDLE_BUTTON = 0x04,   <br/>OH_NATIVEXCOMPONENT_BACK_BUTTON = 0x08, <br/>OH_NATIVEXCOMPONENT_FORWARD_BUTTON = 0x10 } | Enumerates the mouse event buttons.   |