Image Rotation Logic Implementation and Device Behavior Adjustments

#harmonyos #imagerotation #arkui #csskeyframes

Read the original article：Image Rotation Logic Implementation and Device Behavior Adjustments

Requirement Description

The objective was to implement a responsive and visually stable image rotation feature using JavaScript and CSS animations. The image should rotate smoothly in 90-degree increments upon each user interaction (click), while maintaining the final rotated state after each step.
During development, multiple device-specific behaviors were identified — such as occasional tile movement, unexpected initial rotations, and visual cut-off issues on specific devices. These inconsistencies required a comprehensive approach that addressed both the animation logic and device rendering differences, ensuring the same user experience across all supported environments.

Background Knowledge

It provides a flexible rendering framework for animations and transitions. However, differences in device refresh rates, processing timing, and layout initialization can lead to subtle visual inconsistencies.

On some devices, rotating elements exhibited sporadic movement when interacting with unrelated tiles. This was traced to shared interaction logic handling all UI components uniformly.
During app startup, initial rotation discrepancies were detected — for instance, some shapes rotated partially or too early, deviating from the expected four-piece synchronized rotation.
Additionally, cut-off issues occurred at certain levels where the animated layout appeared slightly off-center, causing part of the content to be clipped at the edges.
Following the JavaScript migration, animation state persistence became crucial. Without proper handling, the image would revert to its original orientation after each rotation, breaking visual continuity.

These behaviors highlighted the need for a reliable, deterministic rotation mechanism that maintains consistent behavior across all hardware configurations while allowing for dynamic correction of visual offsets.

Implementation Steps

Identified and Analyzed Rotation Inconsistencies: The root causes of tile movement and rotation mismatches were analyzed by monitoring rendering sequences on multiple devices. It was determined that simultaneous layout and animation triggers caused momentary shifts in element positions.
Defined Structured Keyframe Animations: Implemented four discrete CSS keyframes — rotate0, rotate1, rotate2, and rotate3 — each performing a 90-degree incremental rotation. This design ensures predictable and uniform behavior, regardless of device performance variations.
Implemented Controlled Rotation Logic in JavaScript: The rotateImage() function dynamically updates the active animation using an internal index counter. Each click event triggers the next keyframe sequence and cycles through the four rotation states. The animation-fill-mode: forwards property was used to preserve the final rotation angle after each animation completes, eliminating sudden resets.
Addressed Initial Rotation and Alignment Issues: On startup, specific devices displayed partially rotated elements. Adjustments were made to enforce a consistent initial state (rotate0) and introduce a short initialization delay to ensure layout stabilization before any animation runs. This prevents premature or skipped rotations and provides smoother startup visuals.
Resolved Cut-off and Positioning Problems: The off-center display observed on certain levels was corrected by dynamically aligning the main container during layout initialization. This ensures all elements remain fully visible and centered, preventing edge clipping or truncated visuals.
Mitigated Sporadic Tile Movement: Interaction logic was refined to ensure that tap or swipe events on unrelated elements do not interfere with others. While shared interaction logic was retained for consistency, additional timing checks were introduced to avoid simultaneous reflows that caused movement artifacts.
Enhanced Device Testing and Behavior Verification: The implementation was tested on HarmonyOS 4.0 emulator and multiple real devices to confirm consistent behavior. The image rotation was validated for both accuracy and persistence across user interactions.

Code Snippet / Configuration

<div class="container" onswipe="swipe">
    <div class="mainContainer">
        <image
                id="imageToRotate"
                src="common/huawei.png"
                class="image"
                style="animation-name:{{animationName}};"
                onclick="rotateImage">
        </image>
    </div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: lightskyblue;
}

.mainContainer {
  width: 160px;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  width: 80px;
  height: 80px;
  animation-fill-mode: forwards;
  animation-duration: 250ms;
}

@keyframes rotate0 {
  from { transform: rotate(0deg); }
  to { transform: rotate(90deg); }
}
@keyframes rotate1 {
  from { transform: rotate(90deg); }
  to { transform: rotate(180deg); }
}
@keyframes rotate2 {
  from { transform: rotate(180deg); }
  to { transform: rotate(270deg); }
}
@keyframes rotate3 {
  from { transform: rotate(270deg); }
  to { transform: rotate(360deg); }
}

import app from '@system.app';

export default {
    rotateImage() {
        this.animationName = "rotate" + this.index;
        this.index = (this.index + 1) % 4;
    },

    swipe(e) {
        if (e.direction === "right") {
            app.terminate();
        }
    },

    data: {
        animationName: 'rotate0',
        index: 0
    }
}

Test Results

Successfully validated on HarmonyOS 4.0 emulator and physical devices.
Rotation transitions appear smooth, sequential, and persist correctly after each animation.
Initial positioning issues and cut-off display errors were eliminated after layout alignment adjustments.
Interaction responsiveness remained stable during repeated tests, confirming consistent rotation states.

Limitations or Considerations

Minor visual timing variations may occur across different devices due to hardware rendering or refresh-rate differences. These do not affect functional correctness but can slightly alter perceived animation smoothness.
The shared event logic that controls both rotation and tile interactions may still cause minimal frame overlap in extreme timing cases. Continuous observation and adjustment are recommended if new devices exhibit such behavior.
Accurate reproduction of device-specific rotation behavior should always be verified on real hardware rather than relying solely on emulator results.
Further optimizations may be considered for large-scale layouts where simultaneous animations occur, to maintain frame consistency under higher processing loads.