@@ -4,7 +4,7 @@ Both the public SDK and full SDK are toolkits for application development. <br>T
The full SDK is intended for original equipment manufacturers (OEMs) and provided separately. It contains system APIs.
The SDK of API version 8 provided in DevEco Studio is a public SDK. If your project depends on any system API, such as the **animator** component, **xcomponent** component, or APIs in **@ohos.application.abilityManager.d.ts**, **@ohos.application.formInfo.d.ts**, or **@ohos.bluetooth.d.ts**, switch to the full SDK by performing the following steps.
The SDK of API version 8 provided in DevEco Studio is a public SDK. If your project depends on any system API, such as the **animator** component, **XComponent**, or APIs in **@ohos.application.abilityManager.d.ts**, **@ohos.application.formInfo.d.ts**, or **@ohos.bluetooth.d.ts**, switch to the full SDK by performing the following steps.
> **NOTE**
>
...
...
@@ -16,7 +16,8 @@ Manually download the system-specific full SDK package from the mirror. For deta
## Checking the Local SDK Location
In this example, an ArkTS project is used. For a JS project, replace **ets** with **js**.
In this example, an eTS project is used. For a JS project, replace **ets** with **js**.
In DevEco Studio, choose **Tools** > **OpenHarmony SDK Manager** to check the location of the local SDK.
...
...
@@ -35,11 +36,15 @@ In DevEco Studio, choose **Tools** > **OpenHarmony SDK Manager** to check the lo
b. Verify that the SDK contains system APIs (such as APIs defined in **@ohos.application.abilityManager.d.ts**, **@ohos.application.formInfo.d.ts**, and **@ohos.bluetooth.d.ts**).
Note: The criteria for identifying system APIs are subject to the released API documentation.
Note: The criteria for identifying system APIs are subject to the official API documentation.
2. Replace the SDK. The following uses public-SDK-3.x.x.x for Windows as an example.
a. Decompress the downloaded full SDK file: `ets-windows-3.x.x.x-Release.zip`
a. Decompress the downloaded full SDK file: **ets-windows-3.x.x.x-Release.zip**
Note: The name of the backup version directory must be different from the value of **version** field in the **oh-uni-package.json** file. In the example below, the name of the backup version directory is **3.x.x.x_backup**.
Note: The name of the backup version directory must be different from the value of the **version** field in the **oh-uni-package.json** file. In the example below, the name of the backup version directory is **3.1.6.6_backup**.
The configuration in the **oh-uni-package.json** file is as follows, where the value of `apiVersion` is subject to the API version of the SDK, and the value of `version` is subject to the version number in the SDK file.
The configuration in the **oh-uni-package.json** file is as follows, where the value of **apiVersion** is subject to the API version of the SDK, and the value of **version** is subject to the version number in the SDK file.
```
```json
{
"apiVersion":"X",
"displayName":"Ets",
...
...
@@ -71,24 +76,42 @@ In DevEco Studio, choose **Tools** > **OpenHarmony SDK Manager** to check the lo
```
Delete all files in the original SDK (3.x.x.x) directory. Failure to do so may result in some files being unable to be overwritten.
**Delete all files in the original SDK (3.x.x.x) directory.** Failure to do so may result in some files being unable to be overwritten.
Copy the full SDK to the location of the local SDK.
Copy all files in the **ets** directory in the full SDK to the **ets\*3.x.x.x*** directory in the location of the local SDK.
Copy all files in the **ets** directory in the full SDK to the **ets\3.x.x.x** directory in the location of the local SDK.
Change the value of **version** in the **oh-uni-package.json** file to the current SDK version number.
In the ***3.x.x.x*\build-tools\ets-loader** directory, open the **cmd/powerShell** window and run the `npm install` command to download the **node_modules** dependency package.
In the ***3.x.x.x*\build-tools\ets-loader** directory, open the **cmd/powerShell** window and run the **npm install** command to download the **node_modules** dependency package.
After the SDK is switched to the full SDK in DevEco Studio on macOS, an alarm is generated when the Previewer is opened.
To clear the alarm, perform the following steps:
1. Start the Terminal application.
2. In Terminal, run **sudo spctl -- master - disable**.
3. In **System Preferences**, choose **Security & Privacy**, click the **General** tab and select **Anywhere** under **Allow apps downloaded from**.
Now, applications downloaded from third-party sources will not be blocked, meaning that you can open the Previewer. For security purposes, change the **Allow apps downloaded from** settings back to the original option when the Previewer is not in use.
@@ -6,7 +6,7 @@ Set the transform attribute for component rotation, scaling, translation, and sk
## Designing Static Animation
Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower part of the rhombus with a rectangle to form a roof. Set the translate attribute of the rectangle to the coordinate (150px, -150px) to form a door, use the position attribute to translate the horizontal and vertical axes to the specified coordinates of the parent component (square), set the scale attribute to scale up the parent and child components together to determine the window size, and use the skewX attribute to skew the component and set the coordinate translate(200px,-830px) to form a chimney.
Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower part of the rhombus with a rectangle to form a roof. Set the **translate** attribute of the rectangle to the coordinate (150px, -150px) to form a door, use the **position** attribute to translate the horizontal and vertical axes to the specified coordinates of the parent component (square), set the **scale** attribute to scale up the parent and child components together to determine the window size, and use the **skewX** attribute to skew the component and set the coordinate translate(200px,-830px) to form a chimney.
```html
<!-- xxx.hml -->
...
...
@@ -174,7 +174,7 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua
## Designing Rotation Animation
Set the rotation center around an element in different transform-origin positions. Of the rotate3d values, the first three values are the rotation vectors of the x-axis, y-axis, and z-axis, respectively; the fourth value is the rotation angle, which can be a negative value to indicate that the rotation is performed counterclockwise.
Set the rotation center around an element in different transform-origin positions. Of the **rotate3d** values, the first three values are the rotation vectors of the x-axis, y-axis, and z-axis, respectively; the fourth value is the rotation angle, which can be a negative value to indicate that the rotation is performed counterclockwise.
```html
<!-- xxx.hml -->
...
...
@@ -222,7 +222,7 @@ Set the rotation center around an element in different transform-origin position
}
.rect3{
background-color:#6081f7;
/* Chhange the origin position.*/
/* Change the origin position.*/
transform-origin:rightbottom;
}
@keyframesrotate{
...
...
@@ -304,15 +304,16 @@ Set the rotation center around an element in different transform-origin position
> transform-origin specifies the origin of an element's transformation. If only one value is set, the other value is 50%. If both values are set, the first value indicates the position on the x-axis, and the second value indicates the position on the y-axis.
> **NOTE**
>
> **transform-origin** specifies the origin of an element's transformation. If only one value is set, the other value is 50%. If both values are set, the first value indicates the position on the x-axis, and the second value indicates the position on the y-axis.
## Designing Scaling Animation
This example implements a ripple animation with the scale attribute. Here is the overall procedure: First, use the positioning function to determine the coordinates of the element's position. Then, create multiple components to achieve the overlapping effect. After that, set the opacity attribute to hide or display the components. To scale and hide/display a component at the same time, set both the scale and opacity attributes. Finally, set different animation durations for different components to achieve the diffusion effect.
Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implement the animation.
Set the scaling values for the x-axis, y-axis, and z-axis in **scale3d** to implement the animation.
```html
<!-- xxx.hml -->
...
...
@@ -419,7 +420,7 @@ text{
> **NOTE**
>
> After the transform attributes are set, the child element changes with the parent element. Value changing of other attributes (such as height and width) of the parent element will not affect the child element.
> After the **transform** attributes are set, the child element changes with the parent element. Value changing of other attributes (such as height and width) of the parent element will not affect the child element.
## Setting matrix
...
...
@@ -467,9 +468,9 @@ The matrix attribute defines a transformation matrix with six input parameters:
You can set multiple transform attributes at the same time to apply different transformations to a component. The following example applies the scale, translate, and rotate attributes simultaneously.
You can set multiple **transform** attributes at the same time to apply different transformations to a component. The following example applies the **scale**, **translate**, and **rotate** attributes simultaneously.
```html
<!-- xxx.hml -->
...
...
@@ -578,8 +579,8 @@ You can set multiple transform attributes at the same time to apply different tr
> **NOTE**
>
> - When multiple transform attributes are set, the later one overwrites the previous one. To apply multiple transform styles at the same time, use the shorthand notation; that is, write multiple style values in one transform, for example, transform: scale(1) rotate(0) translate(0,0).
> - When multiple **transform** attributes are set, the later one overwrites the previous one. To apply multiple transform styles at the same time, use the shorthand notation; that is, write multiple style values in one transform, for example, transform: scale(1) rotate(0) translate(0,0).
>
> - When using the shorthand notion, note that the animation effect varies according to the sequence of the style values.
> - When using the shorthand notation, note that the animation effect varies according to the sequence of the style values.
>
> - The style values in the transform attribute used when the animation starts and ends must be in one-to-one mapping. Only the styles that have value mappings are played.
\ No newline at end of file
> - The style values in the **transform** attribute used when the animation starts and ends must be in one-to-one mapping. Only the styles that have value mappings are played.
