[Sports Watch] [API 6] How to implement frame-by-frame animation on a sports watch that can start and stop at any time?

Read the original article：[Sports Watch] [API 6] How to implement frame-by-frame animation on a sports watch that can start and stop at any time?

How to Implement Frame-by-Frame Animations with Start/Stop Control on a Sports Watch using HarmonyOS

Problem Description

I need a frame animation that plays once and can start or stop whenever I want.

Background Knowledge

In frame animation, the image-animator component allows you to cycle through images. By default, the animation might loop indefinitely, but to control the playback, the iteration property must be set to 1 to ensure it only plays once. Additionally, the start() method is used to trigger the animation.

Troubleshooting Process

• Verified that the animation was intended to play once and not loop.
• Checked the iteration property to ensure it's set to 1.
• Used this.$refs.animator.start() to trigger the animation.

Analysis Conclusion

By setting the iteration property to 1, the animation will only play once and can be controlled to start and stop as needed.

Solution

Set the iteration to 1 to play it once.

.js

this.$refs.animator.start();Copy codeCopy code

.hml

<image-animator 
    class="payok" 
    if="{{isPlayok}}" 
    ref="animator" 
    images="{{payok}}" 
    iteration="1"  
    duration="1s"
/>

Verification Result

The animation now plays once and can be triggered to start and stop as needed.

Written by Emirhan Serin