HTML5 is becoming increasingly popular. In this era of mobile devices, the demand for transformation of Flash plug-ins from Adobe is also growing rapidly. Recently, Adobe announced that Flash will no longer support mobile devices. This means that Adobe also thinks HTML5 is an important technology for mobile devices. The change in the desktop system is also a matter of time.
A major disadvantage of HTML is the lack of multimedia technical support. In HTML, you cannot directly display a video or paint on the screen. In HTML5, with the introduction of <video> and <canvas> elements. These elements allow developers to directly use "pure" HTML to implement multimedia technology-simply write some Javascript code to work with HTML. In multimedia technology, there is a basic technology that should be supported-animation. In HTML5, there are many ways to implement this function.
In this article, I will only compare the latest <canvas> elements with the upcoming CSS3 animation technology. Other possibilities include creation and animation of DOM or SVG elements. These possibilities will not be discussed in this article. From the very beginning, we should note that the canvas technology is supported by most mainstream browsers currently released, while CSS3 animation is only available in the latest FireFox and Chrome browsers, the next version of IE will also support CSS 3 animations. (So all the Demo code effects in this article can be achieved in the latest version of Chrome browser in Windows 7, but in other operating systems and other browsers, not necessarily all the effects of the Demo code ).
Here I chose a relatively simple animation:
PS: Due to the video card, recording frame interval, and possible reasons for your computer processor, the playing process may be a bit less smooth or distorted!
There are three implementation methods:
(1) combine canvas elements 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 <canvas> elements: because browsers can optimize the performance of those elements (usually their styles, such as CSS ), however, the effects of canvas custom images cannot be optimized. The reason is that the hardware used by the browser depends mainly on the video card capability. Currently, the browser does not give us the right to directly access the video card. For example, every painting operation has to call some functions in the browser.
Let's start with Canvas
HTML code:
<Html> <br/> <pead> <br/> <meta charset = "UTF-8"/> <br/> <title> Animation in HTML5 using the canvas element </title> <br/> </pead> <br/> <body onload = "init (); "> <br/> <canvas id =" canvas "width =" 1000 "height =" 600 "> Your browser does not support the <code> <canvas> </code> -element. please think about updating your brower! </Canvas> <br/> <div id = "controls"> <br/> <button type = "button" onclick = "speed (-0.1 ); "> Slower </button> <br/> <button type =" button "onclick =" play (this ); "> Play </button> <br/> <button type =" button "onclick =" speed (+ 0.1) "> Faster </button> <br/> </div> <br/> </body> <br/> </ptml>
JS Code:
Define some variables:
Var dx = 5, // current rate <br/> rate = 1, // current playback speed <br/> ani, // current animation loop <br/> c, // drawing (Canvas Context) <br/> w, // car [hidden] (Canvas Context) <br/> grassHeight = 130, // background height <br/> carAlpha = 0, // Rotation Angle of the tire <br/> carX =-400, // The Position of the car on the X axis direction (will be changed) <br/> carY = 300, // the position of the vehicle on the Y axis (will be constant) <br/> carWidth = 400, // automobile width <br/> carHeight = 130, // automobile height <br/> tiresDelta = 15, // distance from a tire to the nearest car chassis <br/> axisDelta = 20, // distance between the shaft and the tire of the car bottom chassis <br/> radius = 60; // tire radius
To instantiate the car canvas (hidden at first), we use the following self-executed anonymous Function
(Function () {<br/> var car = document. createElement ('canvas '); // create an element <br/> car. height = carHeight + axisDelta + radius; // set the height <br/> car. width = carWidth; // set the width <br/> w = car. getContext ('2d '); <br/> })();
Click the "Play" button and repeat the "draw a car" operation on a regular basis to simulate the "frame playback" function:
Function play (s) {// parameter s is a button <br/> if (ani) {// if ani is not null, this means that we already have an animation <br/> clearInterval (ani); // so we need to clear it (stop the animation) <br/> ani = null; <br/> s. innerHTML = 'play'; // rename this button to "Play" <br/>} else {<br/> ani = setInterval (drawCanvas, 40 ); // We will set the animation to 25fps [frame per second], 40/1000, that is, 1/25 <br/> s. innerHTML = 'pause'; // rename this button to "Suspend" <br/>}< br/>}
Acceleration and deceleration are achieved by changing the moving distance in the following ways:
Function speed (delta) {<br/> var newRate = Math. max (rate + delta, 0.1); <br/> dx = newRate/rate * dx; <br/> rate = newRate; <br/>}
Page loading initialization method:
// Init <br/> function init () {<br/> c = document. getElementById ('canvas '). getContext ('2d '); <br/> drawCanvas (); <br/>}
Main debugging method:
Function drawCanvas () {<br/> c. clearRect (0, 0, c. canvas. width, c. canvas. height); // clear the Canvas (displayed) to avoid errors <br/> c. save (); // save the current coordinate value and status, corresponding to the "push" Operation </p> <p> drawGrass (); // draw the background <br/> c. translate (carX, 0); // move the start coordinate <br/> drawCar (); // draw a car (hidden canvas) <br/> c. drawImage (w. canvas, 0, carY); // draw the final displayed car <br/> c. restore (); // restore the Canvas status, which corresponds to a "pop" Operation <br/> carX + = dx; // reset the position of the car on the X axis, to simulate forward <br/> carAlpha + = dx/radius; // increase the tire angle proportionally </p> <p> if (carX> c. canvas. width) {// set certain regular boundary conditions <br/> carX =-carWidth-10; // You can also reverse the speed to dx * =-1; <br/>}< br/>}
Background:
Function drawGrass () {<br/> // create a linear gradient. The first two parameters are the gradient start point coordinate, and the last two parameters are the gradient end point coordinate. <br/> var grad = c. createLinearGradient (0, c. canvas. height-grassHeight, 0, c. canvas. height); <br/> // specifies gradient for a linear gradient. 0 indicates the starting color of the gradient, and 1 indicates the ending color of the gradient. <br/> grad. addColorStop (0, '# 33cc00'); <br/> grad. addColorStop (1, '#66FF22'); <br/> c. fillStyle = grad; <br/> c. lineWidth = 0; <br/> c. fillRect (0, c. canvas. height-grassHeight, c. canvas. width, grassHeight); </p> <p>}
Body painting:
Function drawCar () {<br/> w. clearRect (0, 0, w. canvas. width, w. canvas. height); // clear the hidden canvas <br/> w. strokeStyle = '# FF6600'; // set the border color <br/> w. lineWidth = 2; // set the Border width, in pixels <br/> w. fillStyle = '# FF9900'; // you can specify the fill color. <br/> w. beginPath (); // start to draw a new path <br/> w. rect (0, 0, carWidth, carHeight); // draw a rectangle <br/> w. stroke (); // draw a border <br/> w. fill (); // fill in the background <br/> w. closePath (); // close the new drawn path <br/> drawTire (tiresDelta + radius, carHeight + axisDelta ); // We start to draw the first wheel <br/> drawTire (carWidth-tiresDelta-radius, carHeight + axisDelta); // Similarly, the second wheel </p> <p>}
Paint tires:
Function drawTire (x, y) {<br/> w. save (); <br/> w. translate (x, y); <br/> w. rotate (carAlpha); <br/> w. strokeStyle = '# 3300FF'; <br/> w. lineWidth = 1; <br/> w. fillStyle = '# 0099FF'; <br/> w. beginPath (); <br/> w. arc (0, 0, radius, 0, 2 * Math. PI, false); <br/> w. fill (); <br/> w. closePath (); <br/> w. beginPath (); <br/> w. moveTo (radius, 0); <br/> w. lineTo (-radius, 0); <br/> w. stroke (); <br/> w. closePath (); <br/> w. beginPath (); <br/> w. moveTo (0, radius); <br/> w. lineTo (0,-radius); <br/> w. stroke (); <br/> w. closePath (); <br/> w. restore (); </p> <p>}Since the principle is simple and the code is annotated in detail, I will not explain it here!
This is CSS3.
You will see that we have completely achieved the same animation effect as above without passing a javascript code:
HTML code:
<Html> <br/> <pead> <br/> <meta charset = "UTF-8"/> <br/> <title> Animations in HTML5 using CSS3 animations </title> <br/> </pead> <br/> <body> <br/> <div id = "container"> <br/> <div id = "car"> <br/> <div id = "chassis"> </div> <br/> <div id = "backtire" class = "tire"> <br/> <div class = "hr"> </div> <br/> <div class = "vr"> </div> <br/> <div id = "fronttire" class = "tire"> <br/> <div class = "hr"> </div> <br/> <div class = "vr"> </div> <br/> </div> <br/> <div id = "grass"> </div> <br/> </div> <br/> <footer> </footer> <br/> </body> <br/> </ptml>
CSS code:
Body <br/>{< br/> padding: 0; <br/> margin: 0; <br/>}
Define the animation to which the car body and tires are transferred (you will see that each animation has four versions of definition: native version/webkit [Chrome | Safari]/ms [for backward compatibility with IE10]/moz [FireFox ])
/* Define the animation: move from-400px to 1600px */<br/> @ keyframes carAnimation <br/>{< br/> 0% {left:-400px ;} /* specify the initial position. 0% is equivalent to from */<br/> 100% {left: 1600px;}/* specifies the final position, 100% is equivalent to */<br/>}</p> <p>/* Safari and Chrome */<br/> @-webkit-keyframes carAnimation <br/> {<br/> 0% {left: -400px ;}< br/> 100% {left: 1600px ;} <br/>}</p> <p>/* Firefox */<br/> @-moz-keyframes carAnimation <br/>{< br/> 0% {left: -400 ;}< br/> 100% {left: 1600px ;}< br/>}</p> <p>/* IE is not supported currently, this is defined to be backward compatible with IE10 */<br/> @-ms-keyframes carAnimation <br/>{< br/> 0% {left:-400px ;} <br/> 100% {left: 1600px;} <br/>}
@ Keyframes tyreAnimation <br/>{< br/> 0% {transform: rotate (0) ;}< br/> 100% {transform: rotate (1800deg );} <br/>}</p> <p> @-webkit-keyframes tyreAnimation <br/>{ <br/> 0% {-webkit-transform: rotate (0 );} <br/> 100% {-webkit-transform: rotate (1800deg );} <br/>}</p> <p> @-moz-keyframes tyreAnimation <br/>{< br/> 0% {-moz-transform: rotate (0 );} <br/> 100% {-moz-transform: rotate (1800deg );} <br/>}</p> <p> @-ms-keyframes tyreAnimation <br/>{< br/> 0% {-ms-transform: rotate (0 );} <br/> 100% {-ms-transform: rotate (1800deg) ;}< br/>}
# Container <br/>{< br/> position: relative; <br/> width: 100%; <br/> height: 600px; <br/> overflow: hidden; /* this is very important */<br/>}</p> <p> # car <br/>{< br/> position: absolute; /* use absolute positioning for vehicles in containers */<br/> width: 400px; <br/> height: 210px;/* total height of vehicles, includes tires and chassis */<br/> z-index: 1;/* move the car above the background */<br/> top: 300px; /* distance from the top (Y axis) */<br/> left: 50px;/* distance from the left (X axis) */</p> <p>/* the following content grants the element pre-defined animation and related attributes */<br/>-webkit-animation-name: carAnimation; /* name */<br/>-webkit-animation-duration: 10 s;/* duration */<br/>-webkit-animation-iteration-count: infinite; /* iterations-unlimited times */<br/>-webkit-animation-timing-function: linear; /* the animation is played at the same speed from start to end */</p> <p>-moz-animation-name: carAnimation; /* name */<br/>-moz-animation-duration: 10 s;/* duration */<br/>-moz-animation-iteration-count: infinite; /* iterations-unlimited times */<br/>-moz-animation-timing-function: linear; /* the animation is played at the same speed from start to end */</p> <p>-ms-animation-name: carAnimation; /* name */<br/>-ms-animation-duration: 10 s;/* duration */<br/>-ms-animation-iteration-count: infinite; /* iterations-unlimited times */<br/>-ms-animation-timing-function: linear; /* the animation is played at the same speed from start to end */</p> <p> animation-name: carAnimation;/* name */<br/> animation-duration: 10 s;/* duration */<br/> animation-iteration-count: infinite;/* number of iterations-unlimited times */<br/> animation-timing-function: linear; /* the animation is played at the same speed from start to end */<br/>}</p> <p>/* body */<br/> # chassis <br/> {<br/> position: absolute; <br/> width: 400px; <br/> height: 130px; <br/> background: # FF9900; <br/> border: 2px solid # FF6600; <br/>}</p> <p>/* tires */<br/>. tire <br/> {<br/> z-index: 1;/* same as above, tires should also be placed above the background */<br/> position: absolute; <br/> bottom: 0; <br/> border-radius: 60px;/* circle radius */<br/> height: 120px; /* 2 * radius = height */<br/> width: 120px;/* 2 * radius = width */<br/> background: # 0099FF; /* fill color */<br/> border: 1px solid # 3300FF; </p> <p>-webkit-animation-name: tyreAnimation; <br/>-webkit-animation-duration: 10 s; <br/>-webkit-animation-iteration-count: infinite; <br/>-webkit-animation-timing-function: linear; </p> <p>-moz-animation-name: tyreAnimation; <br/>-moz-animation-duration: 10 s; <br/>-moz-animation-iteration-count: infinite; <br/>-moz-animation-timing-function: linear; </p> <p>-ms-animation-name: tyreAnimation; <br/>-ms-animation-duration: 10 s; <br/>-ms-animation-iteration-count: infinite; <br/>-ms-animation-timing-function: linear; </p> <p> animation-name: tyreAnimation; <br/> animation-duration: 10 s; <br/> animation-iteration-count: infinite; <br/> animation-timing-function: linear; <br/>}</p> <p> # fronttire <br/> {<br/> right: 20px; /* set the distance between the right tire and the edge to 20 */<br/>}</p> <p> # backtire <br/>{< br/> left: 20px; /* set the distance between the left tire and the edge to 20 */<br/>}</p> <p> # grass <br/>{< br/> position: absolute;/* the absolute background is located in the container */<br/> width: 100%; <br/> height: 130px; <br/> bottom: 0; <br/>/* linear gradient of the background color. bottom indicates the starting position of the gradient. The first color value is the starting value of the gradient, the second color value is the end value */<br/> background: linear-grdaient (bottom, #33CC00, #66FF22); <br/> background: -webkit-linear-gradient (bottom, #33CC00, #66FF22); <br/> background:-moz-linear-gradient (bottom, #33CC00, #66FF22 ); <br/> background:-ms-linear-gradient (bottom, #33CC00, #66FF22); <br/>}</p> <p>. hr ,. vr <br/>{< br/> position: absolute; <br/> background: # 3300FF; <br/>}</p> <p>. hr <br/> {<br/> height: 1px; <br/> width: 100%;/* tire horizontal line */<br/> left: 0; <br/> top: 60px; <br/>}</p> <p>. vr <br/> {<br/> width: 1px; <br/> height: 100%;/* vertical line of the tire */<br/> left: 60px; <br/> top: 0; <br/>}
Combination of JQuery and CSS3
This is an effective and compatible method (especially for IE9 that does not currently support CSS3)
HTML code (we can see that it is not the same as the HTML code in CSS3 ):
<Html> <br/> <pead> <br/> <meta charset = "UTF-8"/> <br/> <title> Animations in HTML5 using CSS3 animations </title> <br/> </pead> <br/> <body> <br/> <div id = "container"> <br/> <div id = "car"> <br/> <div id = "chassis"> </div> <br/> <div id = "backtire" class = "tire"> <br/> <div class = "hr"> </div> <br/> <div class = "vr"> </div> <br/> <div id = "fronttire" class = "tire"> <br/> <div class = "hr"> </div> <br/> <div class = "vr"> </div> <br/> </div> <br/> <div id = "grass"> </div> <br/> </div> <br/> <footer> </footer> <br/> </body> <br/> </ptml> <br/>
CSS:
<Style> <br/> body <br/> {<br/> padding: 0; <br/> margin: 0; <br/>}</p> <p> # container <br/> {<br/> position: relative; <br/> width: 100%; <br/> height: 600px; <br/> overflow: hidden; /* this is very important */<br/>}</p> <p> # car <br/>{< br/> position: absolute; /* use absolute positioning for vehicles in containers */<br/> width: 400px; <br/> height: 210px;/* total height of vehicles, includes tires and chassis */<br/> z-index: 1;/* move the car above the background */<br/> top: 300px; /* distance from the top (Y axis) */<br/> left: 50px;/* distance from the left (X axis) */<br/>}</p> <p>/* body */<br/> # chassis <br/> {<br/> position: absolute; <br/> width: 400px; <br/> height: 130px; <br/> background: # FF9900; <br/> border: 2px solid # FF6600; <br/>}</p> <p>/* tires */<br/>. tire <br/> {<br/> z-index: 1;/* same as above, tires should also be placed above the background */<br/> position: absolute; <br/> bottom: 0; <br/> border-radius: 60px;/* circle radius */<br/> height: 120px; /* 2 * radius = height */<br/> width: 120px;/* 2 * radius = width */<br/> background: # 0099FF; /* fill color */<br/> border: 1px solid # 3300FF; <br/>-o-transform: rotate (0deg);/* rotation (unit: Degree) */<br/>-ms-transform: rotate (0deg); <br/>-webkit-transform: rotate (0deg); <br/>-moz-transform: rotate (0deg); <br/>}</p> <p> # fronttire <br/>{< br/> right: 20px; /* set the distance between the right tire and the edge to 20 */<br/>}</p> <p> # backtire <br/>{< br/> left: 20px; /* set the distance between the left tire and the edge to 20 */<br/>}</p> <p> # grass <br/>{< br/> position: absolute;/* the absolute background is located in the container */<br/> width: 100%; <br/> height: 130px; <br/> bottom: 0; <br/>/* linear gradient of the background color. bottom indicates the starting position of the gradient. The first color value is the starting value of the gradient, the second color value is the end value */<br/> background: linear-grdaient (bottom, #33CC00, #66FF22); <br/> background: -webkit-linear-gradient (bottom, #33CC00, #66FF22); <br/> background:-moz-linear-gradient (bottom, #33CC00, #66FF22 ); <br/> background:-ms-linear-gradient (bottom, #33CC00, #66FF22); <br/>}</p> <p>. hr ,. vr <br/>{< br/> position: absolute; <br/> background: # 3300FF; <br/>}</p> <p>. hr <br/> {<br/> height: 1px; <br/> width: 100%;/* horizontal line */<br/> left: 0; <br/> top: 60px; <br/>}</p> <p>. vr <br/> {<br/> width: 1px; <br/> height: 100%;/* vertical line */<br/> left: 60px; <br/> top: 0; <br/>}</p> </style>
JS Code:
First introduce the online API:
<Script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
Implementation of the animation code (quite concise ):
<Script> <br/> $ (function () {<br/> var rot = 0; <br/> var prefix?#('.tire'}.css ('-o-transform ')? '-O-transform' :( ('.tire').css ('-ms-transform ')? '-Ms-transform' :( ('.tire').css ('-moz-transform ')? '-Moz-transform' :( ('.tire').css ('-webkit-transform ')? '-Webkit-transform': 'transform'); </p> <p> var origin = {/* set our starting point */<br/> left: -400 <br/>}; </p> <p> var animation = {/* This animation is executed by jQuery */<br/> left: 1600/* set the final position to be moved */<br/>}; </p> <p> var rotate = function () {/* call the wheel to which this method will be rotated */<br/> rot + = 2; <br/> condition ('.tire'detail .css (prefix, 'rotate ('+ rot + 'deg) '); <br/>}; </p> <p> var options = {/* parameters to be used by jQuery */<br/> easing: 'linear ', /* specify the speed, which is linear here, that is, the constant speed */<br/> duration: 10000,/* specify the animation duration */<br/> complete: function () {<br/> symbol ('{car'}.css (origin ). animate (animation, options); <br/>}, <br/> step: rotate <br/>}; </p> <p> options. complete (); <br/>}); <br/> </script>
A simple explanation: prefix first identifies which definition is currently used (-o? -Moz? -Webkit? -Ms ?), The starting and ending positions of the animation are defined. Then, define the function for setting the rotation angle (this function will be executed in every step of the animation ). Then, an animation is defined, which leads to infinite auto-cycle calls!
In this article, we use a simple animation example to demonstrate several common animation methods in HTML5.
Source code download
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
