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

Editor to share with you how to achieve animation HTML, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to understand it!

Method 1: canvas

HTML code section:

Animation in HTML5 using the canvas element Your browser does not support the-element.Please think about updating your brower! Slower Play Faster

Js code section:

Var dx=5, / / current speed rate=1, / / current playback speed ani, / / current animation cycle c, / / drawing (Canvas Context) w, / / car [hidden] (Canvas Context) grassHeight=130 / / background height carAlpha=0, / / Tire rotation angle carX=-400, / / car position in x-axis direction (will be changed) carY=300, / / car position in y-axis direction (will remain constant) carWidth=400, / / car width carHeight=130 / / the height of the car tiresDelta=15, / / the distance from a tire to the nearest chassis axisDelta=20, / / the distance between the axle of the bottom chassis and the tire radius=60 / / the radius of the tire

The canvas is hidden when we instantiate the car, so we did the following step:

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

After that, we click Play, and simulate the "frame playback" function by specifying that the "draw car" operation is repeated as follows:

Function play (s) {/ / Parameter s is a button if (ani) {/ / if ani is not null, then we already have an animation clearInterval (ani); / / so we need to clear it (stop animation) ani=null; s [XSS _ clean] = 'Play' / / rename the button to "play"} else {ani=setInterval (drawCanvas,40); / / We will animate it to 25fps [frames per second], which is 1/25 s [XSS _ clean] = 'Pause'; / / rename the button to pause}.

Acceleration, deceleration, by changing the size of the moving distance in the following ways:

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 tone method:

Function drawCanvas () {c.clearRect (0Power0dc.canvas.width, c.canvas.height); / / clear Canvas (shown) to avoid generating error c.save (); / / Save current coordinate values and state, corresponding to similar "push" operation drawGrass (); / / draw background c.translate (carX,0) / / move the starting point coordinates drawCar (); / / draw the car (hidden canvas) c.drawImage (W. canvasgrad0); / / draw the final displayed car c.restore (); / / restore the state of the Canvas, corresponding to a similar "pop" operation carX+=dx / / reset the car's position on the X axis to simulate moving forward carAlpha+=dx/radius; / / proportionally increase the tire angle if (carX > c.canvas.width) {/ / set some periodic boundary conditions carX=-carWidth-10; / / you can also reverse the speed to dx*=-1 }

Painting background:

Function drawGrass () {/ / creates a linear gradient. The first two parameters are the coordinates of the start point of the gradient, and the last two are the coordinates of the end point of the gradient. / / specify the gradient color for the linear gradient, 0 indicates the beginning of the gradient, and 1 indicates the end of the gradient grad.addColorStop. Grad.addColorStop (1 recordable weight 66FF22'); c.fillStylewritten grad; c.lineWidthweight 0; c.fillRect (0reparentific c.canvas.heightlywon weight weight c.canvas.widthweight weight height);}

Draw the car body:

Function drawCar () {w.clearRect (0pr 0pr. Canvas.widthgraghting W. canvas.height); / / emptying hidden artboards. StrokeStyleweights colors FF6600frames; / / setting border color w.lineWidthframes 2; / / setting the width of the border in pixels, in pixels. / / set the fill color w.beginPath (); / / start drawing a new path w.rect. / / draw a rectangular w.stroke (); / / draw a border w.fill () / / fill the background w.closePath (); / / close the new drawn path drawTire (tiresDelta+radius,carHeight+axisDelta); / / Let's start drawing the first wheel drawTire (carWidth-tiresDelta-radius,carHeight+axisDelta); / / again, the second}

Draw tires:

Unction drawTire (XMagol y) {w.save (); w.translate (XMagney); w.rotate (carAlpha); W. strokeStylewritten examples 3300 FFFsets; w.lineWidthread1; W.fillStylewritten examples 0099FFFunctions; w.beginPath (); w.arc (0PIfalse); w.fill (); w.closePath (); w.beginPath () W.moveTo (radius,0); w.lineTo (- radius,0); w.stroke (); w.closePath (); w.beginPath (); w.moveTo (0mai radius); w.lineTo (0mai radius); w.stroke (); w.closePath (); w.restore ();}

Because the principle is simple, and the code has made detailed comments, I will not explain them all here!

Method 2: CSS3

You will see that we have exactly the same animation effect as above without a single sentence of JS code:

HTML Code:

Animations in HTML5 using CSS3 animations

CSS Code:

Body {padding:0; margin:0;}

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

/ define animation: move from the position of-400px to the location of 1600px / @ keyframes carAnimation {0% {left:-400px;} / * specify the initial position, 0% equals from*/ 100% {left:1600px;} / * specify the final position, 100% equals to*/} / * Safari and Chrome * / @-webkit-keyframes carAnimation {0% {left:-400px } 100% {left:1600px;}} / * Firefox * / @-moz-keyframes carAnimation {0% {left:-400;} 100% {left:1600px;}} / * IE is not supported temporarily. It is defined here to be backward compatible with IE10*/ @-ms-keyframes carAnimation {0% {left:-400px;} 100% {left:1600px;}} @ keyframes tyreAnimation {0% {transform: rotate (0). } 100% {transform: rotate (1800deg);} @-webkit-keyframes tyreAnimation {0% {- webkit-transform: rotate (0);} 100% {- webkit-transform: rotate (1800deg);}} @-moz-keyframes tyreAnimation {0% {- moz-transform: rotate (0);} 100% {- moz-transform: rotate (1800deg) } @-ms-keyframes tyreAnimation {0% {- ms-transform: rotate (0);} 100% {- ms-transform: rotate (1800deg);}} # container {position:relative; width:100%; height:600px; overflow:hidden; / * this is important * /} # car {position:absolute; / * the car uses absolute positioning in the container * / width:400px Height:210px; / * the total height of the car, including tires and chassis * / z left:50px index 1; / * make the car above the background * / top:300px; / * distance from the top (y-axis) * / left:50px / * distance from the left (x axis) * / / * the following gives the element a predefined animation and related attributes * /-webkit-animation-name:carAnimation; / * name * /-webkit-animation-duration:10s; / * duration * /-webkit-animation-iteration-count:infinite; / * iterations-infinite times * /-webkit-animation-timing-function:linear / * play the animation at the same speed from beginning to end * /-moz-animation-name:carAnimation; / * name * /-moz-animation-duration:10s; / * duration * /-moz-animation-iteration-count:infinite; / * iterations-unlimited times * /-moz-animation-timing-function:linear / * play the animation at the same speed from beginning to end * /-ms-animation-name:carAnimation; / * name * /-ms-animation-duration:10s; / * duration * /-ms-animation-iteration-count:infinite; / * iterations-unlimited times * /-ms-animation-timing-function:linear / * play the animation at the same speed from beginning to end * / animation-name:carAnimation; / * name * / animation-duration:10s; / * duration * / animation-iteration-count:infinite; / * iterations-unlimited times * / animation-timing-function:linear / * play the animation at the same speed from beginning to end * / * body * / # chassis {position:absolute; width:400px; height:130px; background:#FF9900; border: 2px solid # FF6600;} / * tires * / .tire {z FF6600; index1; / * same as above, tires should also be placed above the background * / position:absolute; bottom:0 Border-radius:60px; / * circle half diameter * / height:120px; / * 2*radius=height * / width:120px; / * 2*radius=width * / background:#0099FF; / * fill color * / border:1px solid # 3300FF;-webkit-animation-name:tyreAnimation;-webkit-animation-duration:10s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear -moz-animation-name:tyreAnimation;-moz-animation-duration:10s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;-ms-animation-name:tyreAnimation;-ms-animation-duration:10s;-ms-animation-iteration-count:infinite;-ms-animation-timing-function:linear; animation-name:tyreAnimation; animation-duration:10s; animation-iteration-count:infinite Animation-timing-function:linear;} # fronttire {right:20px; / * set the distance between the right tire and the edge to 20 miles /} # backtire {left:20px; / * set the distance between the left tire and the edge to 20 miles / # grass {position:absolute; / * the background is absolutely positioned in the container * / width:100%; height:130px; bottom:0 / * Let the background color change linearly, bottom, indicating the beginning of the gradient, the first color value is the beginning of the gradient, and the second color value is the ending value * / background:linear-grdaient (bottom,#33CC00,#66FF22); background:-webkit-linear-gradient (bottom,#33CC00,#66FF22); background:-moz-linear-gradient (bottom,#33CC00,#66FF22); background:-ms-linear-gradient (bottom,#33CC00,#66FF22) } .hr, .vr {position:absolute; background:#3300FF;} .hr {horizontal line of height:1px; width:100%; / * tire * / left:0; top:60px;} .vr {vertical line of width:1px; height:100%; / * tire * / left:60px; top:0;} method 3: JQuery and CSS3

This is an effective and compatible way (especially when IE9 does not support CSS3 for the time being)

HTML code (you can see that it is no different from the HTML code in CSS3):

Animations in HTML5 using CSS3 animations

CSS:

Body {padding:0; margin:0;} # container {position:relative; width:100%; height:600px; overflow:hidden; / * this is very important * / car {position:absolute; / * the car uses absolute positioning in the container * / width:400px; height:210px / * the total height of the car, including tires and chassis * / z index1; / * the distance from the top of the car above the background * / top:300px; / * to the top (y-axis) * / left:50px; / * to the left (x-axis) * / * body * / # chassis {position:absolute; width:400px; height:130px Background:#FF9900; border: 2px solid # FF6600;} / * tire * / .tire {z index1; / * same as above, the tire should also be placed above the background * / position:absolute; bottom:0; border-radius:60px; / * round half diameter * / height:120px; / * 2*radius=height * / width:120px; / * 2*radius=width * / background:#0099FF / * fill color * / border:1px solid # 3300FF;-o-transform:rotate (0deg); / * rotate (in degrees) * /-ms-transform:rotate (0deg);-webkit-transform:rotate (0deg);-moz-transform:rotate (0deg);} # fronttire {right:20px; / * set the distance between the right tire and the edge to 20 degrees /} # backtire {left:20px / * set the distance between the left tire and the edge to 20 miles /} # grass {position:absolute; / * the background is absolutely positioned in the container * / width:100%; height:130px; bottom:0 / * Let the background color change linearly, bottom, indicating the beginning of the gradient, the first color value is the beginning of the gradient, and the second color value is the ending value * / background:linear-grdaient (bottom,#33CC00,#66FF22); background:-webkit-linear-gradient (bottom,#33CC00,#66FF22); background:-moz-linear-gradient (bottom,#33CC00,#66FF22); background:-ms-linear-gradient (bottom,#33CC00,#66FF22) } .hr, .vr {position:absolute; background:#3300FF;} .hr {height:1px; width:100%; / * horizontal * / left:0; top:60px;} .vr {width:1px; height:100%; / * vertical * / left:60px; top:0;}

JS Code:

First, introduce online API:

Implement the animation code (quite concise):

$(function () {var rot=0; var prefix=$ ('. Transformations). Css ('- o-webkit-transform' transformations)?'- o transformations: ($('. Transformations). Css ('- ms-transform')?'- ms-transform': ($('. Transformations). Css ('- moz-transform')?'- moz-transform': ($('. Transformations). Css ('- webkit-transform')?'- webkit-transform':'transform') Var origin= {/ * set our starting point * / left:-400}; var animation= {/ * the animation is performed by jQuery * / left:1600 / * set the final position we will move to * /}; var rotate=function () {/ * the method will be called by the rotating wheel * / rot+=2; $('.starting') .css (prefix,'rotate ('+ rot+'deg)') }; var options= {/ * the parameter * / easing:'linear', / * to be used by jQuery specifies speed, where it is only linear, that is, constant speed * / duration:10000, / * specify animation duration * / complete:function () {$('# car') .css (origin) .animate (animation,options);}, step:rotate}; options.complete ();})

Brief explanation: prefix first identifies which definition is currently adopted (- o?-moz?-webkit?-ms?), and then defines the starting and ending positions of the animation. Next, you define a function that sets the rotation angle (which will be performed at each step of the animation (step)). Then, an animation is defined, which results in an infinite self-loop call!

The above is all the content of this article "how to achieve Animation in HTML". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow 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.