"HTML5 Dream Tour"-dancing colors, implementing color animations under canvas

Note: For the sake of convenience, this development uses the open Source Engine lufylegend, the official address is as follows: Http://lufylegend.com/lufylegend

Learn about the HTML5 Canvas color animation today. What is color animation? In my understanding, it is the transition from one color to another. And the effect is a bit similar: Http://w3school.com.cn/tiy/t.asp?f=css3_animation1 above the demo is implemented with CSS3, and we have to use the canvas today. Canvas does not have the relevant API, so to achieve this effect, only on their own.

As can be seen from the above example, we need to complete the two basic effects of the slow animation and color change, and then combine the two effects, is the result we want.

1, References

Happily, Lufylegend provides us with an easing class that is perfect for easing animations. So now we just need to make the color change. How do you change the color? Looking at all of the canvas's APIs, I found that pixel manipulation might be useful. Coincidentally, Lufylegend in 1.9.4 and 1.9.4 or more of the Lcolortransform this class, used to change the color values.

The following is the Lcolortransform usage in the Lufylegend API documentation : http://lufylegend.com/api/zh_CN/out/classes/LColorTransform.html

This class can be used in conjunction with the Draw,colortransform function of Lbitmapdata, and the use of these two functions can refer to the address given below.

Draw:http://lufylegend.com/api/zh_cn/out/classes/lbitmapdata.html#method_draw

Colortransform:http://lufylegend.com/api/zh_cn/out/classes/lbitmapdata.html#method_colortransform

Also, readers need to know ltweenlite:http://lufylegend.com/api/zh_cn/out/classes/ltweenlite.html

This development uses the draw function and the Ltweenlite easing class, please read the relevant function descriptions carefully so that it is easier to read the following.

2, principle

The principle of color effect is very simple, that is, by easing the class as the driving, constantly changing the color of the RGB value.

In Lcolortranform, the three properties of Redoffset,greenoffset,blueoffset are provided, respectively, for the adjustment of r,g,b when processing pixels. So, in the easing class, the properties that we want to ease are those three properties. The draw function of Lbitmapdata is then called in OnUpdate to refresh the display object.

3, code show

Now let me show you the code:

<! DOCTYPE html>Add HTML code, less than 100 lines, visible, lcolortransform with Ltweenlite to achieve color animation is very simple.
Run the above code to get the following effect:

Test Address: http://wyh.wjjsoft.com/demo/color_transform/
Source code has been given, everyone directly copy and paste it ~

Because pixel processing is used, it may be very easy to run on some computers. However, in the era of rapid development of HTML5, I believe that the canvas rendering efficiency of a significant increase in the day to stay.

----------------------------------------------------------------
Welcome you to reprint my article.
Reprint Please specify: Turn from Yorhom's Game box
Http://blog.csdn.net/yorhomwang
Welcome to follow my blog
"HTML5 Dream Tour"-dancing colors, implementing color animations under canvas