Shulou(Shulou.com)06/01 Report--

What is MarkPoint? As shown above, the Sparkle effect, which is the corresponding effect in Echarts. The first thing I saw was a Flash version of Tencent, showing the national distribution effect of the current QQ online population. I felt that the effect was very dazzling. At that time, I was also thinking about how to use JS and HTML5 to make similar effects, but to be honest, I didn't have any ideas. I even doubted whether JS couldn't do this realistic effect. Finally, we see this feature in Echarts. Below, she took off her gorgeous clothes and walked into MarkPoint's world together.

data

First, let's look at the logic of the data. The above figure is a data format, placeList includes the name and coordinate position of each key point, and there are mainly name in style, which can be set to strong, medium and weak, respectively corresponding to the three effects of white, blue and green in MarkPoint diagram. The type is Chinese map, and the specific style is stored in markPoint field. Let's see what's in the markPoint field.

The above is the main content of markPoint, where each point is a diamond style, symbol size, and an effect attribute, which is its animation style, while data is used to load placeList information.

To sum up, for the user, specify the position where markPoints are to be displayed, that is, placeList, and then give them specific effects, Chinese range, strong and weak type, and specific shape (diamond, rectangle or circle, etc.), so that you can get the blinking effect of MarkPoints.

principle

Actually, the theory is a bit exaggerated. Through the data level, you can see that each point is independent. If you zoom in, you can basically judge that they have completed their own animation effects and loop them consistently. If you zoom out, you will find that all markPoints are not synchronized, the frequency is different, and it seems chaotic. The First Secret of Great Design - Tony Fadell - TED Talks

The problem then breaks down into two parts:

How to simulate the flickering effect of each dot

How to manage the blinking cycle of large-scale dots

Realization of Flicker Effect

As above, it is the effect of the same markPoint in different frames. You can think about such a process from small to large and then to small, then the effect of flickering is completed. If you are careful enough, you will find that there is a blur smoothing effect inside. This will make the flicker have a smooth effect, similar to the anti-aliasing of fonts, which looks like a hazy feeling. Of course, how does blur work? In fact, this technique has been used in the previous wind direction map and hot spot map, that is, a translucent superposition with the previous frame image. Then with an animation effect, the blinking effect is complete.

Realization of Multi-point Flicker Animation

The above is a screenshot of a frame. As the saying goes, a flower alone is not spring, so how to control so many points, markPoints with different styles, and different frequencies, this involves the content between animation classes and random numbers, and at the same time can run through the entire rendering cycle on the frame.

Let's look at the flow on Echarts, starting with the initialization flow:

As with MarkPoint data initialization, the Map class reads the data and then calls getLargeMarkPointShape in Base to create the points.

In Base, call animationEffect to specify the flashing style of a single MarkPoint. Here, we need to explain that although the animation style in the data is simply show:true. In fact, the default animation style in config.js is finally adopted, such as cycle, whether to cycle, jump, etc., as shown in the following figure:

In ecEffect, largePoint is called to set randomly to achieve different animation cycles. thus completing the rectification initialization process.

After initialization, it enters the rendering phase. Rendering is using zrender framework, markPoint is driven by Animation, every frame will call update, in the onframe to set the current state of each point, such as size, according to the time period, linear interpolation to calculate its size (described in detail below), finally call Symbol::buildPath to achieve all markPoint flicker effect.

This is a rough process of initialization preparation and rendering cycle. The main functional modules are described below.

implementation code

As above, just specify blur is true, then achieve a smooth effect, simple? In fact, this uses a double cache technology, there is a Layer object in zrender, each frame will be superimposed on a frame of effect, and saved. Specific implementation can refer to zrender Layer class, which is relatively simple.

Flicker animation is a bit complicated, first of all, how to control a markPoint from large to small such a linear transformation process, animation class is how to control, in addition to different markPoints, there are so many points, the same frame under each point corresponding style is not the same, this is how to control.

First of all, this is to introduce the Animation class in zrender, a very good and powerful class, first look at the use of code, as follows:

First of all, this is a when.js style usage, the animation is mainly used to control the effectShape 'style' attribute, that is, every frame to update the style attribute. What is updated? This is the clip object.

There are four whens, plus the random initial size at the top, which means that there are 5 control points in a cycle, where clip1 = 100 and clip2 = 0, where the corresponding percentage is the markPoint size corresponding to the control point. That is, in this cycle, the size of the point is controlled according to the following interpolation algorithm. I don't know if I've made it clear, but I can debug the code myself.

This is a percentage of the current size interpolated in a frame, linear interpolation is used here, there are many other algorithms to choose from, here is size, so the simplest linear interpolation, you can also implement trajectory, or acceleration and other different formulas to achieve the corresponding effect.

When the interpolation calculation is finished, pay to the randomMap+i attribute in the corresponding style. Here, a total of 20 Animation classes are common, so there will be 20 animation effects to achieve different frequencies of flickering effects. Finally, zrender refresh is called, and finally the Symbol rendering stage is reached. Here, each point selects the corresponding scaling percentage according to its own index, and then enters the following drawing stage.

In addition, in the rendering function for each point, further optimization, the code is as follows, simplified according to size.

Ok, at this point, I think about MarkPoint content has been completed, and this class involves a large-scale point rendering, and so on have the opportunity to study this aspect in detail and share with you.

I really want to be blown away by the wind and blow all over the world. Stop and stop in the city I love.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.