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

This article introduces the relevant knowledge of "how to use Canvas to achieve text animation special effects in HTML5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The code is a total of a hundred lines, relatively simple, I said earlier that my English letters are drawn with vectors, there are many advantages of drawing graphics with vectors, such as picture zooming will not be distorted, so I do not need to provide different sizes of pictures on different Retina displays; there is a way to use JSON to describe vectors, the format is relatively simple, and so on.

Vector picture

Next, draw these vector pictures (here only use the first H for illustration):

{"width": 10 galvanized / sets the width of the vector

"height": 10 cinematic / set the height of the vector

"comps": [/ / Array array of components of vector graphics. Each array object is an independent component type. The array is drawn for the component in the order {"type": "text", / / text type.

"text": "H", / / text content

"color": "rgb (69 ~ 69), / / text color."

"align": "center", / / alignment of text in a vector

"opacity": {/ / text transparency

"func": "attr@text.opacity", / / set business attributes and transparently bind the text.

"value": 1 value / if the value in func is empty or undefined, then use this value directly}, "clipDirection": "bottom", / / trim direction is "from top to bottom"

"rect": [/ / specifies the rectangular boundary drawn by the component in the vector

0 minute stroke / represents the upper left corner coordinate x

0 minute stroke / represents the upper left corner coordinate y

10 width on behalf of the component

10max / height representing the component]

}]

}

Vector graphics are written in JSON format, and there are three main parameters: width, height and comps. These three parameters must be written, in which width is the width of vector graphics, height is the height of vector graphics, comps is an Array array, the array is an independent object, you can set some predefined parameters for this object, or you can set some optional parameter information.

Here I store all the text information in an array, which is convenient to call:

Arr= [

{label:'H',image:'symbols/H.json'}

{label:'T',image:'symbols/T.json'}

{label:'f',image:'symbols/f.json'}

{label:'o',image:'symbols/o.json'}

{label:'r',image:'symbols/r.json'}

{label:'W',image:'symbols/W.json'}

{label:'e',image:'symbols/e.json'}

{label:'b',image:'symbols/b.json'}

]

The first label object is the name of the vector graphics, and the second image object we set is a picture in json format, but it can actually be an img, canvas object or picture url or base64 string.

Create a node object

The picture of the object has been generated, and then it's time to create the object. Here there are a total of 8 letters, so we create 8 node objects:

Vars=80

Arr.forEach (function (obj,index) {

Vartext=obj.label

Name='t'+text

Window [name] = createNode (obj.image,100+s*index,100)

})

FunctioncreateNode (image,x,y) {/ / Node object declaration

Varnode=newht.Node (); / / this class is a node defined in ht

Node.setSize (0line 0); / / set the node size

If (image) node.setImage (image); / / set node image

If (xperimey) node.setPosition (xPowery); / / set the location of nodes

Dm.add (node); / / add nodes to the data container datamodel

Returnnode

}

With regard to the generation of the ht.Node node above, this is actually just a class encapsulated by HT, which has a lot of convenient API on it. The generated node is then added to the data container dm, which in turn is the data container for the entire topology diagram gv.

Topology diagram generation

Let's see how to generate this topology diagram:

Dm=newht.DataModel (); / / data container gv=newht.graph.GraphView (dm); / / the topology diagram can obtain the underlying pgv.addToDOM () of the topology diagram through gv.getView (); / / add gv to the body

In fact, the principle of HT is to draw a graph on a canvas in p, that is to say, the gv is a canvas.

Then get the underlying p of the canvas through getView, so that we can add this p anywhere on the html page, addToDOM is defined as follows:

AddToDOM=function () {

Varself=this

View=self.getView (), / / get the underlying p

Style=view.style

Document.body.appendChild (view); / / add the underlying p to body

Style.left='0';// sets the location because HT sets the component's position to absolute by default

Style.right='0'

Style.top='0'

Style.bottom='0'

Window.addEventListener ('resize',function () {self.iv ();}, false); / / the window size change triggers the event and calls the outermost component invalidate (that is, iv) function to update. }

Now refresh the page, you will see a blank, why? Because before setting the size of the node to 0, how can it show that the effect of this Demo is from scratch, and from something to nothing. Then let's take a look at how to "grow from scratch".

Text animation

As I just said, in order for a node to display, it must be necessary to set the size of the node to be visible to our naked eye, but my goal is not only to grow from scratch, but also from small to big, can this be done in one go? It feels like a task with simple code content but a large amount of code. I define a function to make the node from scratch, from small to large:

FunctionsetSize (node) {

If (node) {

Vars=80

Size=node.getSize (). Width;// gets the width in the current size of the node, because I know that the width and height are all the same, so I abbreviated

Varsw=s-size

Ht.Default.startAnim ({/ / HT encapsulated animation function, the content is also an object in JSON format

Milliseconds of duration:1000,// animation cycle

Easing:function (t) {returnt*t}, / / Animation ease function

The action:function (vQuery t) {/ / action function must be provided to realize the attribute changes in the animation process. The first parameter v represents the value calculated by the easing (t) function, t represents the progress of the current animation [0q1], and the general attribute changes are carried out according to the v parameter.

Node.setSize (/ / set the size of the node (there is a slow process achieved through sw*v)

Size+sw*v

Size+sw*v

)

}

})

}

}

The process from big to small, from something to nothing is similar to the above, so I won't repeat it.

To make these letters appear and disappear in chronological order, you certainly need to use the setTimeout method. It is very easy to achieve a display disappearance, but I fell into a trap of setTimeout in the process of implementation. I can only say that I am not good at learning. Because we need to set different occurrence and disappearance times for different letters, it is generally easier to set a fixed value and multiply it by the corresponding node-specific index:

FunctionanimateIn () {

For (leti=0;i

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.