Witness the flowers bloom !! There are flowers on the code to witness the flowers bloom

Witness the flowers bloom !! There are flowers on the code to witness the flowers bloom
First view resultsClick, IE9 +

Mind Clear... Click the canvas

 

Idea comes from Network Search for [programmer confession]

It looks like the processed version of the [when knight] work.

Code Of course, you have to write it yourself.

Limited capabilities, I only write where I will. I really don't know how to draw the flowers in the original image, so I have to find another method. My thoughts are as follows:

Petals="Flowers="Animation

Every petal is a curve that is very curved, so first think about the curve painting. From w3school:

Try to make the curve more curved:

Perfect!

Next, add several curves to make the petals more vivid (also to achieve the "Growth" effect ):

My calculation formula is very simple, that is, according to the following three angles, the top angle as the starting point, the two bottom angles and the top angle as the three parameters of the "Three besell curve, in this way, the petals are extended one layer by one:

Forgive me for drawing Slag

The petals are painted layer by layer, and the coordinates are nothing more than sin and cos functions... I believe these are difficult. A flower consists of N petals, which overlap with each other, and have different sizes. Each flower has different colors. In the end, it matches the effect of "growth, with the magic!

Growth Touch your eyes and let the graph work.

To be honest, I am too lazy to write it here, because I have already introduced it in my previous articles. I just repeat it here. I just copied it for your convenience.

The queue function queue of jq is used, which is an encapsulation of promise.

One thing about jQuery queue:

As we all know, when jQuery is used to add a series of animation effects to an element, the element does not execute the animation at the same time, but starts the next animation after the last animation ends.

I understand that jQuery uses a queue method to add the animation effect in sequence, and the animation in the previous queue is completed, use deferred to notify the next animation.

Var ele = $ ("# id"); // A jQuery object // Add events to the queue named "queueName" of the jQuery object. queue ("queueName", function (next) {// your code... do something next (); // next () is the event to be processed in the next queue. It cannot be processed in sequence without the next queue.}); // delay ele. delay (1000, "queueName"); // executes the queue ele. dequeue ("queueName ");

Here, jQuery's animation stores the event processing in a queue called "fx" by default. Therefore, I implemented the following simple encapsulation:

$. Fn. will = function (callback, type) {// this indicates the jQuery object this. queue (type | "fx", function (next) {// fx indicates the default queue // this, is the native object callback & typeof callback = "function" & callback. call ($ (this); // use call to facilitate the callback function to use this next () ;}); return this; // return this, convenient chained call} // try using var ele =$ ({}); for (var I = 0; I <10; I ++) {ele. will (function () {console. log (+ new Date );}). delay (1000 );}

With queues, You can intuitively and clearly express asynchronous operations. SimilarThread.Sleep(1000)That is clear.

The role of the queue is to process the grids in the wheel display one by one, avoiding a large number of setTimeout and replacing them with callback.

The latency function allows the petals to grow in sequence. As a result, canvas has many animation libraries. Here I use my most familiar method, it is also a way of implementing others' creative ideas... the next step is the combination of petals (flowers). I believe that 2π is 360 degrees, and everyone will remember that I will not sell my 61-point height.

I can't really see it. It's the heart-type coordinate calculation formula. So I used it directly and copied it. I can't help myself. =

See:

W3school canvas bezierCurveTo () method

Fun html5 drawing

Love♥Curve, Single Program (in my experience, it is best not to use this confession ...... it is no difference to use LOL 5 to kill confession)

I am currently looking for a job,. net or front-end. I hope my friends can help me with the recommendation !! Coordinates: Beijing, Shanghai, Guangzhou, and Shenzhen

Code download

Go to github to view/download the demo

× Close The following is the shameless time to ask for likes

Are you interested in this article?

Okay. WQNMLGBD

.