How to Create Complex Like-Button Animations on HarmonyOS vs Android

Background Introduction

As the HarmonyOS news client adapts its single‑framework system, more than 85% of functionality is now supported. Animations are essential for enhancing interaction and visual experience. This article presents a real‑world case of implementing a like‑button animation using ArkUI on HarmonyOS and compares it with the Android implementation.

ArkUI Animation API Overview

ArkUI offers various animation types, including property, transition, particle, component, and frame animations. The property animation API (animateTo, animation, keyframeAnimateTo) is most suitable for custom component effects. The following signature shows the animateTo function:

animateTo(value: AnimateParam, event: () => void): void

AnimateParam allows setting duration, curve, repeat count, and callbacks. The event closure defines which state variables change during the animation.

Android Implementation

The Android version uses a combination of property animation and a custom Bézier evaluator to create a floating heart effect with scaling and fading. Core steps include adding a temporary ImageView on click, calculating random control points, and animating position, scale, and alpha.

private fun addHeartImage() { ... }

class BezierEvaluator(private val controlPoint1: PointF, private val controlPoint2: PointF) : TypeEvaluator<PointF> { ... }

private fun getBezierAnimator(targetView: View): ValueAnimator { ... }

HarmonyOS Implementation

On HarmonyOS, ArkUI’s declarative UI requires using state‑driven rendering. A LazyForEach component renders dynamic heart images based on an array of animation state objects. Clicking the like button adds an AnimationState instance to the array, triggering rendering and animation via animateTo. When the animation finishes, the state object is removed, automatically cleaning up the UI.

build() { Stack({ alignContent: Alignment.Bottom }) { LazyForEach(this.animaList, (item) => { /* render Image */ }) } }

@ObservedV2 export class AnimationState { P0: number[] = [0,0]; /* control points, progress, scale, alpha, id */ }

this.animaList.pushData(new AnimationState(Date.now().toString()))

LazyForEach(this.animaList, (item) => { Image(...).onAppear(() => { animateTo({ duration: 1000, curve: Curve.Ease, onFinish: () => { /* remove item */ } }) }) })

Summary

The article outlines the approach to building complex like‑button animations, highlights differences between HarmonyOS ArkUI and Android animation frameworks, and demonstrates how ArkUI’s declarative, state‑driven model can achieve smooth, natural motion using property animations and Bézier paths.