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

Today, I would like to share with you how to use html to create an animation web page related knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you have something to gain after reading this article, let's take a look at it.

There is no doubt that html5's new canvas is an excellent design. As a result, the web page can be graphically drawn by introducing only one html element (exactly). Accordingly, flash animation has always been a very common content in web pages, and it is also characterized by vector graphics. Therefore, it is easy to imagine whether canvas can also be used to make animation.

Canvas is not designed to be animated like flash. However, in a certain way, it is possible to use flash to make graphic animation like Canva, and the effect is also great.

The principle of animation

The principle of animation, I believe many people have heard, is to draw a number of static pictures, with a certain frequency, according to a certain order in turn to switch display, that is, to form a dynamic picture. When the frequency is higher than a certain value, the human eye will not be aware of the switching process, and a coherent animation will be formed. At the same time, in the same scene (also known as split mirror), there is only a slight difference between adjacent static images, thus creating a transition (commonly known as animation grid) through the combination of a considerable number of static images to make the picture smooth and natural.

In animation, the static picture corresponding to each static picture is called a frame. The switching frequency of the static picture is called the frame rate. They can be easily found in the timeline panel of flash.

The realization of canvas Animation

Graphic drawing

The way to draw with canvas is to add elements to the html first.

Then, get the context corresponding to this element (which can be called the drawing context).

Var drawing=document.getElementById ("drawing")

If (drawing.getContext) {

Var context=drawing.getContext ("2d")

}

The drawing context represented by the variable context here is the core of canvas graphics drawing. It has a series of drawing properties and drawing methods. To put it simply, all drawings operate on this context implementation.

Graphics in animation

Canvas's context has a clearRect () method that clears all graphics within a rectangular area on the canvas. In connection with the principle of the animation mentioned above, we can know that if the animation is constantly cleared and then drawn at a certain frequency, and the content drawn each time is slightly different, we can see the changing graphics and form the animation.

How to make the content of each drawing slightly different? In this regard, it is more reasonable to create classes for the graphics that need to be drawn, and each class corresponds to a graph. Any kind of graphic has its own properties, and there is an attribute that points to the drawing context of canvas. At the same time, the graphics class defines a drawing method draw () (this is just my name, can be customized), this drawing method draw () contains a series of code, in turn to do the following two things: according to the current attribute value (or state) to manipulate the drawing context to draw itself on the canvas canvas, and update the current property value.

For example, here is the definition of a class that can move a sphere (which is actually a circle):

/ / Class definition, sphere

Var Ball=function (config, context) {

This.x=config.x; / / X coordinate

This.y=config.y; / / Y coordinate

This.color=config.color; / / for example rgba (0pc0pl 0pl 1)

This.radius=config.radius; / / Radiu

This.speedX=config.speedX; / / horizontal velocity

This.speedY=config.speedY; / / vertical velocity

This.context=context; / / get a reference to context

}

Ball.prototype.move=function () {

This.x + = this.speedX

This.y + = this.speedY

}

Ball.prototype.draw=function () {

/ / drawing

Var context=this.context

Context.fillStyle=this.color

Context.beginPath ()

Context.arc (this.x, this.y, this.radius, 0, Math.PI * 2, true)

Context.fill ()

/ / move, update location

This.move ()

}

As you can see, every time you call the draw () method of this class, the graph is drawn. Each call to draw () also updates the property values of the instance so that the graph will be different the next time it is drawn (the example here is the movement of the position).

Stage

For graphics presented in animated form in the canvas, there should be an element to manage them. Referring to the animation structure in flash, this element is the stage. So create a stage class (Stage). The definition of the Stage class is:

Var Stage=function (config, context) {

This.stageWidth=config.stageWidth; / / stage width

This.stageHeight=config.stageHeight; / / stage height

This.playFlag=false; / / playback ID, initially false

This.childs= {}; / / stores the elements in the stage

This.context=context; / / Save a reference to context

}

Stage.prototype= {

Constructor: Stage

/ / add stage elements

AddChild: function (name, elem) {

This.childs [name] = elem

}

/ / remove stage elements

RemoveChild: function (name) {

Delete this.childs [name]

}

/ / render and draw all the graphics on the stage at each frame

Render: function () {

This.context.clearRect (0,0, this.stageWidth, this.stageHeight); / / clears the graphics drawn in the previous frame

Var childs=this.childs

For (var i in childs) {

Children [I]. Draw (); / / call the draw () method for all graphics on the stage

}

If (this.playFlag) {

RequestAnimationFrame ((function (thisReplace) {

Return function () {

ThisReplace.render (); / / Loop call

}

}) (this))

}

}

/ / play

Play: function () {

If (! this.playFlag) {

This.playFlag=true

This.render ()

}

}

/ / stop

Stop: function () {

If (this.playFlag) {

This.playFlag=false

}

}

}

In this definition, the render () method of the Stage class is the most important. When render () is called, it first clears the previous frame, and then, through a loop, calls the draw () method of all graphics in the stage, thus completing the drawing of the current frame and updating the attribute values of all graphics, thus determining the state of all graphics in the next frame. Then the continuous frame-by-frame drawing is realized through a circular call to itself. In this way, the animation is produced.

Continuous frame-by-frame drawing requires reference to a frequency, and it is common to think of using setTimeout () and setInterval (). However, modern browsers provide an API, requestAnimationFrame (), specifically for this purpose, taking into account the need for animation implementation. This method is written differently in different browsers, so you should use a cross-browser animation run control function: (from Paul Irish's requestAnimationFrame for Smart Animating)

If (! window.requestAnimationFrame) {

Window.requestAnimationFrame= (function () {

Return window.webkitRequestAnimationFrame | |

Window.mozRequestAnimationFrame | |

Window.oRequestAnimationFrame | |

Window.msRequestAnimationFrame | |

Function (callback, element) {

Window.setTimeout (callback, 1000 / 60)

}

) ()

}

For why you should use requestAnimationFrame (), see timing control for script-based animation. The simple reason is "We are more professional".

Animation process

With the previous class definition, the way to implement animation is very clear. First create instances of the stage and animated graphics, then add the instance of the animated graphics through the addChild () method of the stage, and then call the play () method of the stage. The code example for this section:

/ / assume that stageConfig, ballConfig has been properly defined, and context has obtained the drawing context reference

Var stage=new Stage (stageConfig, context)

Ball=new Ball (ballConfig.context)

Stage.addChild ("ball", ball); / / add to the stage (display)

Stage.play (); / / Animation playback

In this way, the canvas element begins a continuous dynamic drawing, that is, the animation that can be seen.

These are all the contents of the article "how to make an animated web page with html". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.