How to Build Complex UI Animations with imgcook: A Step‑by‑Step Guide

Animation Decomposition

Typically imgcook is used for static modules, but as Taobao design moves toward immersive experiences, we need to develop animations with imgcook.

Examples include scrolling ambience, feed product transition effects, and the following animation developed in a module:

First, decompose the animation:

Scale the original product image from the top‑left corner while hiding other parts of state 1.

After stage 1 completes:

Finish the animation.

After decomposition the logic is simple, but implementing it with imgcook involved a learning curve.

Animation Implementation

For the first step, create the states:

To ensure a smooth transition, the two product pictures must share a node, then start the first phase.

We use

state.recommend

to represent different states, modify image width/height via imgcook state expressions, set

transition

for animation parameters, and hide other components by toggling their render flag.

The next stage shows “可能喜欢” after a delay. The difficulty lies in setting the delay, which we achieve with

transitionDelay

:

The animation runs for 0.3 s after a 0.6 s delay, matching the first stage’s transition time. We then change component opacity using the

View

component’s

onAppear

event.

We obtain the DOM element via the

_event

parameter and set its style:

<code>target.style.opacity = 1;</code>

Another approach is to use the framework’s set method:

<code>this.set({ recommendOpacity: 1 });</code>

We chose the direct DOM manipulation for simplicity.

The final animation can also be done with

transition

, but to demonstrate more complex effects we use

keyframes

.

Adding CSS keyframes directly in imgcook is problematic; alternatives like

rax-keyframes-to-animation

or dynamically inserting

style

tags are either framework‑specific or inelegant. The solution is the experimental

Element.prototype.animate

Web API, which provides keyframe‑like functionality on any DOM element.

First, obtain the right‑side element in

onAppear

:

Then call

animate

with keyframes:

<code>const keyframes = [
  { transform: `translate3d(100%, 0, 0)` }, // from
  { transform: `translate3d(0, 0, 0)` } // to
];
target.animate(keyframes, {
  delay: 600,
  duration: 1000,
  easing: 'ease',
  fill: 'forwards'
});
</code>

We also align the element’s default style with the first keyframe:

This completes the animation, though a bug remains: using

onAppear

triggers the animation each time the element re‑enters the viewport. To fix this, we introduce an

animStarted

flag that prevents re‑execution.

Define

animStarted

as false initially; if true, return early, otherwise run

animate()

and set the flag to true after completion.

Conclusion and Recommendations

With imgcook you can cover most e‑commerce animation scenarios (except games) using simple

transition

/

transitionDelay

for basic effects and

animate

for more complex keyframe‑like animations.

Two suggestions to improve imgcook’s animation workflow:

Support a

once

event binding to avoid extra state handling for single‑run animations.

Provide a canvas preview for animations so developers can debug without generating code each time.

Adopting imgcook’s function‑based development can free mental bandwidth for more creative tasks and potentially reduce bugs. Click the original article to learn more.