@@ -8,7 +8,7 @@ Set the transform attribute for component rotation, scaling, translation, and sk
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.
```
<!-- xxx.hml -->
<div class="container">
...
...
@@ -24,10 +24,12 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
</div>
```
```
/* xxx.css */
.container {
width:100%;
height:100%;
background-color:#F1F3F5;
align-items: center;
flex-direction: column;
...
...
@@ -97,7 +99,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
Decrease the y-coordinate over a time frame to make the ball bounce back. Gradually decrease the bounce height until it drops to 0. An animation where the ball falls is hereby created.
```
<!-- xxx.hml -->
<div class="container">
...
...
@@ -106,10 +108,12 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua
</div>
```
```
/* xxx.css */
.container {
width:100%;
height:100%;
background-color:#F1F3F5;
display: flex;
justify-content: center;
...
...
@@ -176,7 +180,7 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua
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.
```
<!-- xxx.hml -->
<div class="container">
...
...
@@ -196,7 +200,7 @@ Set the rotation center around an element in different transform-origin position
</div>
```
```
/* xxx.css */
.container {
...
...
@@ -304,7 +308,7 @@ 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.
...
...
@@ -314,7 +318,7 @@ This example implements a ripple animation with the scale attribute. Here is the
Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implement the animation.
```
<!-- xxx.hml -->
<div class="container">
...
...
@@ -330,7 +334,7 @@ Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implemen
> 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.
...
...
@@ -427,7 +431,7 @@ text{
The matrix attribute defines a transformation matrix with six input parameters: scaleX, skewY, skewX, scaleY, translateX, and translateY. In the following example, matrix is set to matrix(1,0,0,1,0,200) to skew and translate the component.
```
<!-- xxx.hml -->
<div class="container">
...
...
@@ -435,7 +439,7 @@ The matrix attribute defines a transformation matrix with six input parameters:
</div>
```
```
/* xxx.css */
.container{
...
...
@@ -472,7 +476,7 @@ 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.
```
<!-- xxx.hml -->
<div class="container">
...
...
@@ -484,7 +488,7 @@ You can set multiple transform attributes at the same time to apply different tr
</div>
```
```
/* xxx.css */
.container{
...
...
@@ -577,9 +581,21 @@ You can set multiple transform attributes at the same time to apply different tr
> 1. 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).
>
> 2. When using the shorthand notion, **NOTE** that the animation effect varies according to the sequence of the style values.
> - When using the shorthand notion, note that the animation effect varies according to the sequence of the style values.
>
> 3. 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.
> - 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.
## Samples
The following samples are provided to help you better understand how to develop animations with the **transform** attribute:
@@ -7,16 +7,16 @@ An application generally consist of more than one page. For example, in a music
The page router finds the target page based on the page URI. The following describes how to implement redirection between two pages:
1. In the “Project“ window of DevEco Studio, choose entry > src > mainjsdefault. Right-click the pages folder and choose NewJS Page from the shortcut menu to create the detail page.
1. In the **Project** window of DevEco Studio, choose **entry** > **src** > **mainjsdefault**. Right-click the **pages** folder and choose **NewJS Page** from the shortcut menu to create the detail page.
2. Call router.push() to navigate users to the detail page.
2. Call **router.push()** to navigate users to the detail page.
3. Call router.back() to navigate users to the index page.
3. Call **router.back()** to navigate users to the index page.
## Building the Page Layout
The index and detail pages each contains a <text> component that specifies the current page, and a <button> component that implements the switching between two pages. Example code in .hml files is as follows:
The index and detail pages each contains a <text> component that specifies the current page, and a **\<button>** component that implements the switching between two pages. Example code in .hml files is as follows:
```
...
...
@@ -39,7 +39,7 @@ The index and detail pages each contains a <text> component that specifies th
## Setting Page Styles
Set styles for the index and detail pages. Center the <text> and <button> components and space the two components with 50 pixels. The CSS code for the two pages is as follows:
Set styles for the index and detail pages. Center the **\<text>** and **\<button>** components and space the two components with 50 pixels. The CSS code for the two pages is as follows:
```
...
...
@@ -60,7 +60,7 @@ Set styles for the index and detail pages. Center the <text> and <butto
## Implementing Redirection
To make the launch method of the <button> component take effect, the redirection logic needs to be implemented in the .js file of the page. Call router.push() to add the page URI to the route stack, that is, to jump to the page specified by the URI. You need to import the router module before calling the router method. The sample code is as follows:
To make the launch method of the **\<button>** component take effect, the redirection logic needs to be implemented in the .js file of the page. Call router.push() to add the page URI to the route stack, that is, to jump to the page specified by the URI. You need to import the router module before calling the router method. The sample code is as follows:
