Open-source wheel creation: a concise, efficient, lightweight, and cool canvas Particle Motion plug-in library, cool canvas

Open-source wheel creation: a concise, efficient, lightweight, and cool canvas Particle Motion plug-in library, cool canvas
I. Opening

Thank you for coming to the title party ~

Although the title is exaggerated, the plug-in library is concise, efficient, lightweight, and cool. Let's take a look at a standard example:

(Codepen Online Demo EDIT: http://codepen.io/barrior/pen/XjEEBz)

Yes, it should be cool and cool. If you don't like it, you can look at more examples ~

Ii. My ideas:

Tired of being dazzled on the market, blooming with flowers, and flourishing scenes of birds and birds...
People with simple minds and simple limbs like me are suitable for simple APIs, simple people and things (. Required _ parameters ._.)/~~~
Okay, let's go back to the code."The Write Less, Do More" And"Keep it Simple and Stupid" In the form of, refuse to bend around the sub-API, advocate concise, simple!
So like the author, you will feel great and easy to use this plug-in ~ Do not believe it.

III. All effects

Currently, the plug-in Library provides three special effects: particle disordered motion, wave motion, and snowflake falling effect.
Of course, you may be able to get many special effects when configuring different API parameter values!
The standard unordered particle motion has been demonstrated above. The following two types are demonstrated below.

1. wave movement · Standard

(Effect reference QQ phone, codepen Online Demo Editor: http://codepen.io/barrior/pen/BLAAPa)

Js Code:

New Participant ground.wav e ('# demo', {num: 3, // lineColor: ['rgba (0,190,112 ,. 5) ', 'rgba (0,190,112 ,. 7) ', 'rgba (0,190,112 ,. 9) '], // lineWidth of the three lines in sequence :[. 5 ,. 7 ,. 9], // offsetLeft: [2, 1, 0], and offsetTop :. 75, // The crestHeight of the three lines in sequence: [10, 14, 18], // there are only two peaks (rippleNum: 2, speed :. 1, // hide fill. The default value is false. fill: false. // display the border, that is, line effect. The default value is true stroke: true });

If you can use English, I believe you will probably know what the configuration means by checking the combination of attribute names. Otherwise, you can refer to the descriptions of these APIs on the official website and click here.

2. Wave Motion-loading Animation

 

(Codepen Online Demo EDIT: http://codepen.io/barrior/pen/rrddQw)

This js Code will not be pasted. You need to write the loading progress on your own and then set it to the effect.

3. Snowflake Falling Effect

(Codepen Online Demo EDIT: http://codepen.io/barrior/pen/mAxxdG)

Extremely simple js Code:

new Particleground.snow('#demo');

Iv. Explanation title

Well, after reading the results, I want to explain the promotion words in the title, although it seems useless...

Concise:

• Just like the previous particle motion example, you only need a simple line of code.new Particleground.particle('#demo')You can achieve it.

• Then there is "clean": you need to read the source code. I believe you will see the concise and elegant code from the source code. Please click here for details ~

• Of course, the special effects are concise and beautiful. Sorry, why should I use code to implement the visual effects...

Efficient:

• Based on the author's ability, the author tries his best to optimize the Code (including performance optimization and code simplification ).

• For example, if this keyword is used as a variable parameter in another function, the depth attribute or method used multiple times is stored as a variable, which can reduce the volume during compression, and reduce the time consumption of Variable Search.

• For example, the connection function processing of disordered particle motion, nested for loop, and O (n²) are optimized three times by the author (git commit has a record), and finally used for reference) this book provides an idea and Optimization Method for HTML5 + JavaScript animation basics, which improves the execution efficiency by a factor of zero redundant code or memory usage. Click here for details. The source code is 160th lines.

Lightweight:

• Because of the two points mentioned above, lightweight nature is born.

• The other is that special effects are used in the form of independent plug-ins, and there is no dependency between them. They only depend on a public function file, so that they can load what they want to load, you can also use the compressed files containing all the special effects without being bloated.

V. Final

• A good official website and documentation is a good start. The official website of the plug-in Library: particle ground.duapp.com first uses this domain name. When the time is ripe, it will be changed back to the official website.Pjs. barrior. meDomain name ~

• Contribution is always welcome, no matter how big or small it is! As long as you share the same ideas, ideas, and interests with the author, you may wish to join the organization to do what you like and be a person you like.

• If you like this plug-in library and it can help you in your actual work, hope it can develop better, provide more interesting and practical special effects, and support me ), please click a Star.