Imgcook (Design Draft generation code) can even develop animations!

Written by F(X) Team-Rem

Imgcook is a software-as-a-service product owned by Alibaba. It can generate front-end code from different kinds of visual draft (Sketch/PSD/ static image) with one click through intelligent technology. Imgcook is generally used for static modules, but as we move into immersive design on Taobao, we have to do some dynamic development for imgCook as well.

Dynamic effect decomposition

For example, I recently developed a dynamic effect in a module as follows:

Let’s break down the animation first,

1. Zoom in on the top left corner of the original product image while hiding the rest of state 1
2. Wait until 1 is complete
   1. The “may like” gradient appears
   2. Swipe left for recommended items on the right
3. complete

​

Imgcook is simple, but I learned a lot when I actually developed mycounter cook.

Dynamic effect to realize

First, for the first step, shard the state, so here we create the state as follows:

In order to ensure a smooth transition of the goods Picture, the two goods pictures need to be the same node, and then the first stage can begin.

Imgcook state expression to change the width and height of the image, and the transition property to set the dynamic parameters. Hiding other components is easy.

After stage 1 is complete, “May like” is displayed. The difficulty of this part is how to set the delay time. We can complete this by setting transitionDelay:

The above representation represents the gradual change effect execution of 0.3s and delayed execution of 0.6s, because we set the transition time of stage 1 as 0.6s before. The next step is to change the transparency of the component, using the onAppear event of the View component.

Get the DOM element (event.target) by adding _event to the element (_event) and then setting it in the function:

target.style.opacity = 1;
Copy the code

There is also a way to write:

this.set({ recommendOpacity: 1 });
Copy the code

Because the former is easier, I chose to manipulate DOM elements directly.

Now comes the final animation, which can be done by transition in terms of implementation, but I used KeyFrames to show you how to develop more complex motion effects with imgCook.

Before we started thinking about it, we had a problem — how do I add CSS styles directly to imgCook? Because keyframes need to be defined in CSS or style tags, I thought about many black technologies during this process, such as using RAx-keyframes-to-animation of Rax, and adding style tags dynamically in modules to add them.

These solutions are not very good, the first solution will depend on the Rax ecological, cannot be copied to other frameworks, the second plan while you can, but it is not elegant, until finally, I found the Element. The prototype, the animate, it is a Web experiment sexual function, Keyframes is actually a set of Web API equivalent to keyframes. On each DOM element object, the required configuration Settings for Keyframes can be carried out through animate method, thus realizing functions equivalent to Keyframes and CSS animation.

First, we get the element on the right through the onAppear event:

Then use it in the function as follows:

const keyframes = [
  { transform: `translate3d(100%, 0, 0)` }, // from
  { transform: `translate3d(0, 0, 0)` } // to
];
target.animate(keyframes, {
  delay: 600./ / delay 600 ms
  duration: 1000.// Set the transition time
  easing: 'ease'.// Set the transition function
  fill: 'forwards'.// Keep the style of the last frame after the animation ends
}); 
Copy the code

In addition, we need to ensure that the default style of the element is the same as the first frame of the keyframes, so we need to set:

In this way, the whole animation is fully implemented, but in fact, now also left a Bug, because we are using onAppear to touch the work efficiency, so when elements from across the screen will appear, such as Feeds scroll down to rollback), will once again touch effect, so we also need to our implementation slightly improved.

Define an animStarted with the initial state of false or undefined. Check whether animStarted is true in the function. Otherwise, we call animate() to animate, and when we’re done, we set animStarted to true, so we don’t have to repeat onAppear execution.

Summary and Suggestions

Based on the description in this article, I’m convinced that IMGCook can now cover most arcade scenes (other than games) with motion effects. Simple motion effects use transition and transitionDelay, and more complex frame animations can be implemented with animate.

Not perfect for imgCook, though, but here are 2 tips to help you develop better kinetic effects:

1. Support for once event binding, so that developers do not have to implement a single action effect through an additional state
2. Support dynamic preview on canvas, so you don’t need to debug after every code

​

Finally, I’d like to welcome you to imgCook’s new function-based development approach to front-end writing, so that we can use our spare brain power to think of something more interesting, and possibly write fewer bugs.