Witness Flowers Open!! There are flowers on the code.

First look at the effect try to click, ie9+

Painting the Heart Clear ... Please feel free to click on canvas

Creativity comes from the web can search "programmer confession"

Looks like a processed version of the "when resistant" work.

Code of course, I'll write it myself.

Ability is limited, I only write where I will. The flowers in the original picture I really do not know how to draw, so only to explore another kind of drawing. Here's what I think:

花瓣= " 花朵 ="动画

Each petal, is a very curved curve composition, then first think about the curve of the drawing. The following self-w3school:

So try this curve a little bit more:

Perfect!

Next, add a few curves to make the petals more vivid (and to achieve the "growth" effect later):

My calculation formula is very simple, that is, according to the following 3 angles, the corner as the starting point, the 2 corners and corners as the "three Bezier curve" of 3 parameters, so that the petals on one layer to extend down:

Forgive my slag drawing.

The petals are drawn one layer at a to calculate the coordinates is nothing more than sin and cos two functions ... I believe this is hard to do. Flowers are composed of n petals, petals overlap, petal size is different, each flower color, and finally with the "growth" of the effect, you can match the magical effect!

Growth the finishing touches of the pen, let the figure move up.

To tell the truth I do not bother to write here, because the previous article has been introduced, I just repeat here, excerpt to let everyone look at the convenience.

Using the queue function of JQ, a promise Package

A little understanding of the jquery queue:

As is well known, using jquery to add a series of animations to an element, the element does not execute the animation at the same time, but instead begins the next animation after the last animation, in the order in which it was added.

What I know is that jquery uses a form called "queue" to add animation effects sequentially, and the animation in the previous queue is executed, and the next animation is notified by deferred.

    var ele = $ ("#id"); A jquery object    //is a jquery object called "QueueName" queue above the Add processing event    ele.queue ("QueueName", function (next) {        //your code ...  Do something        next (),//next () is the event to be processed in the next queue, which cannot be processed sequentially if there is no next queue    );    Delay    Ele.delay ("QueueName");    Execution Queue    ele.dequeue ("QueueName");

To put it this way, the jquery animation defaults to placing the processing event in the queue called "FX". Therefore, I made the following simple encapsulation:

    $.fn.will = function (callback, type) {        //This here, which represents the jquery object        this.queue (Type | | "FX", function (next) {  ///FX denotes the default queue//            Here This, is the native object            callback && typeof callback = = "function" & ;& Callback.call ($ (this)); Use call to facilitate the callback function using this            next ();        });        return this; Returns this for easy chain invocation    }    //try to use    var ele = $ ({}) in the console.    for (var i = 0; i < i++) {Ele.will (        function () {            console.log (+new Date);        }). Delay (+);    }

Using a queue, you can easily express the asynchronous operation visually and clearly. It is similar to Thread.Sleep(1000) that clear.

The role of the queue is to turn the lattice in the display, one by one to deal with, avoid a lot of settimeout, use the form of callback to replace.

Delay function makes the petals orderly "grow", moving up, canvas animation library A lot of, I use the most familiar with my own way, but also as someone else's creative way of realizing it ... Next is the petal combination (flower), I believe 2π is 360 degrees This everyone remembers, I also do not show off my high number 61 points of the level.

There is a place I can not see,,, is the heart of the coordinate calculation formula, so I directly to use, copied this part. I also have no way to take my own =. =

Referenced by:

W3school Canvas Beziercurveto () method

Play Turn HTML5 Paint

Love ♥ Curve, single program Ape Gospel (in my experience, it's best not to use this confession ...) With LOL 5 kill confession No difference)

Currently looking for a job,. NET or front-end, I hope friends can help recommend!! Coordinates northward wide deep

Code download

Go to GitHub to view/download demo

xClose Here's the brazen time.

Do you have any interest in this article?

It's okay. WQNMLGBD

.

Witness Blossom!! There are flowers on the code