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: target.style.opacity = 1; Another approach is to use the framework’s set method: this.set({ recommendOpacity: 1 }); 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:

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'
});

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.