Hidden Gems in HarmonyOS 5 for Business App Development — Graphic Transformations

1. Introduction

During the development of business applications with HarmonyOS 5, we often encounter subtle yet powerful features buried within the framework. These transformations—such as rotation, translation, and scaling—can significantly enhance UI interactions and animations when used appropriately.

This article aims to explore these transformation capabilities in a concise, developer-oriented way, helping you better understand how to create smooth and dynamic user experiences in your HarmonyOS-based applications.

If you have questions, suggestions, spot any issues, or have a better solution, feel free to leave a comment or reach out via direct message or email. Thank you for your support. 🙏

---

2. Translate

The translate transformation primarily involves the following parameters:

• x: Distance to move along the horizontal axis

• y: Distance to move along the vertical axis

• z: Distance to move along the depth axis (3D)

In a 2D translation, adjusting x and y allows you to move an element across the plane.

About the z Axis:

When z tends toward negative infinity, the component appears to shrink. Once z goes below -250, the object actually enlarges and flips.

This is likely due to a viewpoint positioned around z = -250. The closer a component gets to the viewpoint, the larger it appears—further away, the smaller it looks.

---

3. Rotate

Compared to translation, rotation comes with more parameters—angle, axis of rotation, transformation center, and perspective depth:

The x, y, and z values define the rotation axis. The angle determines how much to rotate, and other parameters define the center and visual depth of the rotation.

---

3.1 Rotate Around Z Axis (Center Rotation)

{
  "x": 0,
  "y": 0,
  "z": 1,
  "angle": 45,
  "centerX": "50%",
  "centerY": "50%"
}

---

3.2 Rotate Around Y Axis (Left-Right Flip)

{
  "x": 0,
  "y": 1,
  "z": 0,
  "angle": 45,
  "centerX": "50%",
  "centerY": "50%"
}

---

3.3 Rotate Around X Axis (Top-Bottom Flip)

{
  "x": 1,
  "y": 0,
  "z": 0,
  "angle": 45,
  "centerX": "50%",
  "centerY": "50%"
}

---

3.4 centerX / centerY / centerZ (Rotation Anchor)

By default, rotation is performed around the center of the shape. You can customize the pivot point by modifying centerX, centerY, and centerZ, making the effect more flexible and tailored to UI needs.

---

3.5 perspective (Depth Perception)

• Without perspective (perspective = 0): The rotation looks flat with no depth variation—like spinning a card on a table.

• With perspective (perspective > 0): Adds a 3D effect where the object appears larger when closer and smaller when further away.

This mimics real-world depth—imagine a straight road that narrows as it vanishes into the distance.

In practice, the effect may not always be visually striking, especially for small rotations or components.

---

4. Scale

In 2D views, scaling along the Z axis often has no direct visual effect.

---

5. Coming Up Next

In the next article, we plan to explore matrix transformations—stay tuned!

---

6. Conclusion

That’s it for now.

If you have any questions, feedback, corrections, or alternative approaches, please feel free to comment, message, or email. Your input is greatly appreciated.