1 / 20

RIA

Animation, part I. RIA. What is it?. real life is continuous, right? with modern video equipment we talk about frames with a fast enough frame rate and small changes between frames, we get the illusion of motion. Animation Styles.

cmary
Download Presentation

RIA

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Animation, part I RIA

  2. What is it? • real life is continuous, right? • with modern video equipment we talk about frames • with a fast enough frame rate and small changes between frames, we get the illusion of motion

  3. Animation Styles • video can be recorded or authored and simply played back in an HTML canvas • javascript can be used to repeatedly draw the frames of the animation • macro languages can be used to create the animation using rules and a starting description

  4. Tools • the HTML5 canvas object to draw the shapes • javascript to write the procedural code • jQuery to provide access to the DOM objects and to provide load function

  5. jQuery • jQuery ready function executes after all elements have been loaded – better than javascript's onload function • the .resize and .attr methods allow a convenient way to redraw the canvas when the browser dimensions have changed • $('#myTag') to get access to html elements

  6. Canvas Context Methods • use fillStyle and strokeStyle to change the color • rect, fillRect and strokeRect to draw rectangles • lines are drawn by starting a path and using lines, arcs and other methods to define the line • once path is closed it can be filled to display a shape

  7. Example of Drawing a Solid Circle • canvas = $("#myCanvas"); • var ctx = canvas.get(0).getContext("2d"); • ctx.fillStyle="rgb(23,198,45)"; • ctx.beginPath(); // Start the path • ctx.arc(10,25,15,0,2*Math.PI); • ctx.closePath(); // Close the path • ctx.fill(); // Fill the path circle at x=10, y=25, radius=15

  8. Writing the Javascript code • use HTML to create a canvas element<canvas id="myCanvas" width="500" height="500"> <!-- Insert fallback content here --> </canvas> • use Javascript to get canvas context:canvas = $("#myCanvas");var ctx = canvas.get(0).getContext("2d"); • use the context methods in Javascript to draw objects • remember origin (0,0) is top left x y

  9. Timeouts • timeouts control the frame rate • basic format of timeout is (sets it only once):setTimeout(funct, milliseconds); • to have a periodic timeout, use recursion:function timerThingy(){ doSomething(); setTimeout(timerThingy(),1000);}

  10. Starting and Stopping • use a variable to flag whether animation is "on" • use an if statement in the function that controls the timeout. If the variable is set to "on" then draw the animation. • use a click method of the canvas to change the animation flag

  11. Use Objects • the animated objects should be stored at javascript objects in an array • all objects should have a draw method that determines when it should look like and how to move • draw all objects in a loop:for(s in shapes) shapes[s].draw(ctx);

  12. Refresh Rate • your app may redraw every 10 ms but the refresh rate may be less than that. • to save battery, only push a new redraw when a frame is ready • use requestAnimationFrame monitor refresh animation redraw

  13. User Interaction • animation without user interaction can paint a picture or tell a story but it does not involve the user • using keyboard or mouse events allows the user to become involved in the experience • opens the possibilities to games, education, training and survey/voting

  14. Interaction • for the user to interact with the objects on the canvas: • must detect what user did (click, hover, etc) • "where" they are (location of mouse) • what objects were involved • programmer must poll events and compare to state and location of objects

  15. What happened • jQuery has events associated with the canvas object that programmer can use to write code to respond to events • mouse events: click, dblclick, mousedown, mouseover, mouseleave, many more. • keyboard events include keydown, keyup and keypress (small differences)

  16. Where • with mouse events a parameter can be used to determine the mouse location:canvas.click=function(e){...} • the object e contains information about the mouse at the time the event fired:e.pageX is the x location of the pointere.pageY is the y location

  17. Determining Interaction • programmer is responsible for finding out if the user clicked (or hovered...) on or near an object • must check every object (using arrays makes it easier) • determining interaction depends on the shape of the object

  18. Rectangles and Circles • rectangles are the easiest: • x1 ≤ x ≤ x2 • y1 ≤ y ≤ y2 • for circles use the formula (x-x1)2 + (y-y1)2≤ r2 (x1,y1) (x2,y2) r (x,y)

  19. Triangles are a little harder function triSign(x,y,x1,y1,x2,y2){ return (x - x2) * (y1 - y2) - (x1 - x2) * (y - y2); } function insideTri(t,x,y){ var sign1=triSign(x,y,t.ax,t.ay,t.bx,t.by)<0; var sign2=triSign(x,y,t.bx,t.by,t.cx,t.cy)<0; var sign3=triSign(x,y,t.cx,t.cy,t.ax,t.ay)<0; return sign1==sign2 && sign1==sign3; } B A C

  20. Other forces • for each object there should be a speed for both the x and y direction • you can also have accelleration for both • this allows you to simulate: • gravity • friction • wind • other forces

More Related