Summary of ways to achieve animation effects in HTML5 _html5 tutorial skills-H5 Tutorial-php.cn

Summary of ways to achieve animation effects in HTML5 _html5 tutorial skills

WBOY

Release： 2016-05-16 15:45:59

Original

1606 people have browsed it

The editor uses a moving car as an example to describe three ways to implement HTML5 animation. The ideas are clear. Animation is not only canvas, but also css3 and javascript. Through reasonable choices, the optimal implementation can be achieved.

PS: Due to the graphics card, recording frame interval, and possibly your computer processor, the playback process may be a little unsmooth or distorted!
It can be implemented in three ways:
(1) Canvas element combined with JS
(2) Pure CSS3 animation (not supported by all mainstream browsers, such as IE)
(3) CSS3 combined with Jquery
Knowing how to use CSS3 animation is more important than knowing how to use the <canvas> element: because the browser can optimize the performance of those elements (usually their styles, such as CSS) , but the effect we use to customize the drawing using canvas cannot be optimized. The reason is again that the hardware used by the browser mainly depends on the capabilities of the graphics card. Currently, the browser does not give us direct access to the graphics card. For example, every drawing operation must first call certain functions in the browser.
1.canvas
html code:

Copy code

The code is as follows:

Animation in HTML5 using the canvas element

js code:
Define some variables:

Copy code

The code is as follows :

var dx=5, //Current rate
rate=1, //Current playback speed
ani, //Current animation loop
c, //Drawing ( Canvas Context)
w, //Car [hidden](Canvas Context)
grassHeight=130, //Background height
carAlpha=0, //Tire rotation angle
carX=-400 , //The position of the car in the x-axis direction (will be changed)
carY=300, //The position of the car in the y-axis direction (will remain constant)
carWidth=400, //The width of the car
carHeight=130, //The height of the car
tiresDelta=15, //The distance from one tire to the closest car chassis
axisDelta=20, //The distance between the axis of the bottom chassis of the car and the tire
radius=60; //radius of tire

To instantiate the car canvas (which is initially hidden), we use the following self-executing anonymous function

Copy code

The code is as follows:

(function(){
var car=document.createElement('canvas'); //Create element
car.height=carHeight axisDelta radius; //Set height
car.width=carWidth; //Set width
w=car.getContext('2d');
})();

Click the "Play" button to simulate the "frame playback" function by repeatedly executing the "draw car" operation at regular intervals:

Copy code

The code is as follows:

Acceleration and deceleration are achieved by changing the moving distance through the following methods:

Copy the code

The code is as follows :

function speed(delta){
var newRate=Math.max(rate delta,0.1);
dx=newRate/rate*dx;
rate=newRate;
}
Initialization method for page loading:
//init
function init(){
c=document.getElementById('canvas').getContext('2d');
drawCanvas() ;
}

Main method:

Copy code

The code is as follows:

function drawCanvas (){
c.clearRect(0,0,c.canvas.width, c.canvas.height); //Clear the Canvas (displayed) to avoid errors
c.save(); / /Save the current coordinate values and status, corresponding to similar "push" operations
drawGrass(); //Draw the background
c.translate(carX,0); //Move the starting point coordinates
drawCar(); //Draw a car (hidden canvas)
c.drawImage(w.canvas,0,carY); //Draw the car that is finally displayed
c.restore(); //Restore the state of the Canvas, corresponding It is similar to the "pop" operation
carX =dx; //Reset the position of the car in the X-axis direction to simulate walking forward
carAlpha =dx/radius; //Increase the tire angle proportionally
if (carX>c.canvas.width){ //Set some regular boundary conditions
carX=-carWidth-10; //You can also reverse the speed to dx*=-1;
}
}

Draw background:

Copy code

The code is as follows:

function drawGrass( ){
//Create a linear gradient. The first two parameters are the coordinates of the gradient start point, and the last two parameters are the coordinates of the gradient end point.
var grad=c.createLinearGradient(0,c.canvas.height-grassHeight,0 ,c.canvas.height);
//Specify the gradient color for the linear gradient, 0 represents the gradient starting color, 1 represents the gradient ending color
grad.addColorStop(0,'#33CC00');
grad.addColorStop(1,'#66FF22');
c.fillStyle=grad;
c.lineWidth=0;
c.fillRect(0,c.canvas.height-grassHeight,c.canvas .width,grassHeight);
}

Draw the car body:

Copy the code

The code is as follows:

function drawCar( ){
w.clearRect(0,0,w.canvas.width,w.canvas.height); //Clear the hidden artboard
w.strokeStyle='#FF6600'; //Set the border color
w.lineWidth=2; //Set the width of the border in pixels
w.fillStyle='#FF9900'; //Set the fill color
w.beginPath(); //Start drawing a new path
w.rect(0,0,carWidth,carHeight); //Draw a rectangle
w.stroke(); //Draw a border
w.fill(); //Fill the background
w.closePath(); //Close the new path drawn
drawTire(tiresDelta radius,carHeight axisDelta); //We start drawing the first wheel
drawTire(carWidth-tiresDelta-radius,carHeight axisDelta); / /Similarly, the second
}

Draw tires:

Copy code

The code is as follows:

function drawTire( x,y){
w.save();
w.translate(x,y);
w.rotate(carAlpha);
w.strokeStyle='#3300FF';
w.lineWidth=1;
w.fillStyle='#0099FF';
w.beginPath();
w.arc(0,0,radius,0,2*Math.PI,false );
w.fill();
w.closePath();
w.beginPath();
w.moveTo(radius,0);
w.lineTo(-radius ,0);
w.stroke();
w.closePath();
w.beginPath();
w.moveTo(0,radius);
w.lineTo( 0,-radius);
w.stroke();
w.closePath();
w.restore();
}

Since the principle is simple and detailed comments are made in the code, I won’t explain them one by one here!
2.CSS3
You will see that we have completely achieved the same animation effect as above without a single JS code:
HTML code :

Copy the code

The code is as follows:

Animations in HTML5 using CSS3 animations

< div class="vr">

CSS code :
body
{
padding:0;
margin:0;
}

Define the animation of body and tire rotation (you will see that basically every animation has four versions of definition: native version/webkit[Chrome|Safari]/ms[for backward compatibility with IE10]/moz[FireFox 】)

3.JQuery and CSS3
This is a method with good effect and compatibility (especially since IE9 does not support CSS3 yet)
HTML code (You can see that it is no different from the HTML code in CSS3):