JavaScript graphic animation design--moving with a simple sine wave trajectory

Last Update:2015-06-29 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<pre><!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "utf-8"> <title>Wave 1</title> <Linkrel= "stylesheet"href=".. /include/style.css "> </Head> <Body> <Header>Example from<ahref= "http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a> </Header> <CanvasID= "canvas"width= "the "Height= "the "></Canvas> <Scriptsrc=".. /include/utils.js "></Script> <Scriptsrc= "./classes/ball.js"></Script> <Script>window.onload= function () { varCanvas=document.getElementById ('Canvas'), Context=Canvas.getcontext ('2d'), ball= Newball (), Angle= 0, CenterY= $, Range= -, XSpeed= 1, Yspeed= 0.05; Ball.x= 0; (functiondrawframe () {window.requestanimationframe (drawframe, canvas); Context.clearrect (0, 0, canvas.width, canvas.height); Ball.x+=xspeed; Ball.y=CenterY/ 2 +Math.sin (angle)*range; Angle+=yspeed; Ball.draw (context); }()); }; </Script> </Body></HTML></pre>View Codewhere Util.js<pre>/** * Normalize The browser animation API across Implementations. This requests * The browser to schedule a repaint of the windows for the next animation Frame. * Checks for Cross-browser support, and, failing to find it, falls back to SetTimeout. * @param {function} callback function to call time It's time to update your animation for the next Repaint. * @param {htmlelement} element Optional parameter specifying the element that visually bounds the entire Animation. * @return {number} Animation frame Request. */if (!window.requestanimationframe) {window.requestanimationframe = (window.webkitrequestanimationframe | | Window.mozrequestanimationframe | | Window.msrequestanimationframe | | Window.orequestanimationframe | | function (callback) {return window.settimeout (callback, 17/*~ 1000/60*/); });} /** * Cancels an animation frame Request. * Checks for Cross-browser support, falls back to Cleartimeout. * @param {number} Animation frame Request. */if (!window.cancelrequestanimationframe) {window.cancelrequestanimationframe = (window.cancelanimationframe | | Window.webkitcancelrequestanimationframe | | Window.mozcancelrequestanimationframe | | Window.mscancelrequestanimationframe | | Window.ocancelrequestanimationframe | | window.cleartimeout);} /* Object that contains our utility Functions. * Attached to the Window object which acts as the global namespace. */window.utils = {};/** * Keeps track of the current mouse position, relative to an element. * @param {htmlelement} elemen T * @return {object} Contains properties:x, y, Event */window.utils.capturemouse = function (element) { var mouse = {x:0, y:0, event:null}, body_scrollleft = document.body.scrollLeft, Element_scrollleft = Docume nt.documentElement.scrollLeft, Body_scrolltop = document.body.scrollTop, Element_scrolltop = Document.documentel ement.scrolltop, offsetleft = element.offsetleft, OffsetTop = element.offsettop; Element.addeventlistener (' mousemove ', function (event) {var x, y; If (event.pagex | | Event.pagey) {x = event.pagex; y = event.pagey; } else {x = Event.clientx + body_scrollleft + element_scrollleft; y = event.clienty + body_scrolltop + element_scrolltop; } x-= offsetleft; y-= offsetTop; mouse.x = x; Mouse.y = y; Mouse.event = event; }, false); Return mouse;};/ * * keeps track of the current (first) touch position, relative to an Element. * @param {htmlelement} element * @return {object} Contains properties:x, y, ispressed, Event */window.utils.capturetouch = function (element) {var Touch= {x:null, y:null, ispressed:false, event:null}, body_scrollleft = document.body.scrollLeft, element_scrolll EFT = document.documentElement.scrollLeft, Body_scrolltop = document.body.scrollTop, Element_scrolltop = documen t.documentelement.scrolltop, offsetleft = element.offsetleft, OffsetTop = element.offsettop; Element.addeventlistener (' touchstart ', function (event) {touch.ispressed = true; Touch.event = event; }, false); Element.addeventlistener (' touchend ', function (event) {touch.ispressed = false; touch.x = null; TOUCH.Y = null; Touch.event = event; }, false); Element.addeventlistener (' touchmove ', function (event) {var x, y, touch_event = Event.touches[0];//first Touch If (touch_event.pagex | | Touch_event.pagey) {x = touch_event.pagex; y = touch_event.pagey; } else {x = Touch_event.clientx + body_scrollleft + element_scrollleft; y = touch_event.clienty + body_scrolltop + element_scrolltop; } x-= offsetleft; y-= offsetTop; touch.x = x; TOUCH.Y = y; Touch.event = event; }, false); Return touch;};/ * * Returns a color in the Format: ' #RRGGBB ', or as a hex number if Specified. * @param {number|string} Color * @param {boolean=} tonumber=false Return color as a hex number. * @return {string|number} */window.utils.parsecolor = function (color, tonumber) {if (tonumber = = = True) {if (typeof color = = = ' number ') {return (color | 0);//chop off decimal} if (typeof color = = = ' String ' && color[ 0] = = = ' # ') {color = Color.slice (1); } return Window.parseint (color, 16); } else {if (typeof color = = = ' number ') {color = ' # ' + (' 00000 ' + (color | 0). toString). substr ( -6);//pad } return color; }};/** * Converts a color to the RGB string format: ' RGB (r,g,b) ' or ' rgba (r,g,b,a) ' * @param {number|string} color * @para M {number} Alpha * @return {string} */window.utils.colortorgb = functiOn (color, alpha) {//number in octal format or string prefixed with # if (typeof color = = = ' String ' && color[0] = = = ' # ') {color = window.parseint (color.slice (1), 16); } Alpha = (alpha = = = undefined)? 1:alpha; Parse hex values var r = Color >> & 0xff, g = Color >> 8 & 0xff, b = color & 0xff, A = (alpha<0) ? 0: ((alpha>1)? 1:alpha); Only use ' RGBA ' if needed if (a = = 1) {return "rgb (" + R + "," + G + "," + B + ")"; } else {return ' Rgba ("+ r +", "+ g +", "+ b +", "+ a +") "; }};/** * Determine if a rectangle contains the coordinates (x, y) within it ' s Boundaries. * @param {object} Rect object with properties:x, y, width, height. * @param {number} x coordinate position X. * @param {number} y coordinate position y. * @return {boolean} */wind Ow.utils.containsPoint = function (rect, x, y) {return! X<rect. x | | X>rect.x + rect.width | | Y<rect. y | | Y>Rect.y + rect.height);};/ * * Determine if rectangles overlap. * @param {object} Recta object with properties:x, y, width, height. * @param {object} RECTB object with properties:x, y, width, height. * @return {boolean} */window.utils.intersects = function (recta, rectb) {return! ( recta.x + recta.width<RECTB. x | | rectb.x + rectb.width < recta.x | | RECTA.Y + recta.height < RECTB.Y | | Rectb.y + rectb.height < recta.y);};</pre>View Codewhere Ball.js<pre><pre>function Ball (radius, Color) { if (radius = = = Undefined) {radius = +;} if (color = = = Undefined) {color = "#ff0000";} This.x = 0; This.y = 0; This.radius = radius; This.rotation = 0; This.scalex = 1; This.scaley = 1; This.color = Utils.parsecolor (color); This.linewidth = 1;} Ball.prototype.draw = function (context) { context.save (); Context.translate (this.x, this.y); Context.rotate (this.rotation); Context.scale (this.scalex, this.scaley); Context.linewidth = this.linewidth; Context.fillstyle = this.color; Context.beginpath (); x, y, radius, start_angle, end_angle, anti-clockwise context.arc (0, 0, this.radius, 0, (math.pi * 2), true); Context.closepath (); Context.fill (); If (this.linewidth > 0) { context.stroke (); } Context.restore ();};</pre></pre>View CodeJavaScript graphic animation design--moving with a simple sine wave trajectory

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JavaScript graphic animation design--moving with a simple sine wave trajectory

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

JavaScript graphic animation design--moving with a simple sine wave trajectory

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support