How to Implement Frame Animations and Gradient Effects on a Sports Watch using HarmonyOS
Problem Description
I want to create a gradient animation effect on a sports watch using frame images.
Background Knowledge
The image-animator component is used to display frame-by-frame images in HarmonyOS, allowing for timed animations. The duration property controls how long each frame stays visible. To create a gradient effect, you can cycle through different images within the animation.
Analysis Conclusion
The animation needed to cycle through images and transition smoothly without repetition. Setting the duration to 1.5s provided the desired effect for the gradient animation.
Solution
Use the image-animator component to cycle through the images with a smooth animation. Set the duration to control the speed of the animation. The setup would look like this:
1.indext.hml
<stack class="container" >
<image-animator
class="payok"
ref="animator"
images="{{payok}}"
duration="1.5s"
/>
</stack>
2.indext.css
.container {
width: 100%;
height: 100%;
}
.payok {
margin-top: 78%;
width: 100%;
height: 33%;
}
3.indext.js
export default {
data: {
payok:[
{
src: "/common/im_playok/payok1.png",
},
{
src: "/common/im_playok/payok2.png",
},
{
src: "/common/im_playok/payok3.png",
},
{
src: "/common/im_playok/payok4.png",
}
]
},
onInit() {
let timer = setTimeout(() => {
clearTimeout(timer);
that.$refs.animator.stop();
}, 1500);
}
}
Verification Result
The gradient animation effect works smoothly, with images transitioning every 1.5 seconds. It stops after the set duration.
Top comments (0)