html5 canvas: animation - csuohio.educis.csuohio.edu/.../lecture_wangch12a-move-image_2.pdf ·...

26
HTML5 CANVAS: ANIMATION Part 1 Make an Image Move © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 1

Upload: ngonhi

Post on 21-Jul-2018

240 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

HTML5 CANVAS:ANIMATION

Part 1

Make an Image Move

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 1

Page 2: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

In this lecture, you will learn:

• how to write JavaScript to make an image on a canvas element move

• how to animate morphing between two curves

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 2

Page 3: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

Animation

• Like video

• A sequence of images• Create illusion of movement when played in succession

• Commonly used in multimedia projects

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 3

Page 4: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

Basic Ideas of Scripting an Animation on a Canvas

Similar to how chalkboard animation works

1. Draw on a chalkboard, take a snapshot to use as the first frame of your animation

2. Erase the chalkboard, draw a different content, take a snapshot to use as the second frame of your animation,

3. Repeat the erasing and drawing until you get all the frames you need for your animation

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 4

Page 5: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

General Structure of Scriptfunction animate()

{

statement(s) that make a stepwise change of the visual content

window.requestAnimationFrame(animate);

}

window.requestAnimationFrame(animate);

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 5

tells the browser to invoke the specified function, animate() in this case

Page 6: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

General Structure of Scriptfunction animate()

{

statement(s) that make a stepwise change of the visual content

window.requestAnimationFrame(animate);

}

window.requestAnimationFrame(animate);

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 6

But this statement is also in the animate() function.

Thus, the function animate() will keep going and going and going ...

Page 7: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

HOW TO USE THE SCRIPT TO MAKE AN

IMAGE MOVE

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 7

Page 8: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

<canvas id="gameCanvas" width="1136" height="640">

Your browser does not support canvas.</canvas>

<script>

var myCanvas = document.getElementById("gameCanvas");

var myContext = myCanvas.getContext("2d");

var balloon = new Image();

balloon.src = "images/water-balloon.png";

var y = 0;

balloon.onload = function () {

animate();

};

function animate()

{

y += 2;

myContext.clearRect(0, 0, myCanvas.width, myCanvas.height);

myContext.drawImage(balloon, 300, y);

window.requestAnimationFrame(animate);

}

</script>© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 8

After finished loading

an image, start the function animate()

At the end of animate(), invoke

the function animate() again

Page 9: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

Organizing the Code

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 9

1. Take care of checking image loading2. Invoke startGame()when images

are ready

Page 10: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

Organizing the Code

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 10

Use requestAnimationFrame() to

invoke drawGame()

Page 11: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

Organizing the Code

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 11

1. Erase everything

2. Draw the image3. Use requestAnimationFrame() to

invoke drawGame()

Page 12: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

Organizing the Code

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 12

1. Update position2. Use setTimeout() to invoke

updateGame() in a specific timing

Page 13: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

ANIMATING SHAPESExample: Morphing two shapes

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 13

Page 14: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

Morphing from one to the other

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 14

wings up wings down

Page 15: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

Overview of the Code

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 15

Invoke startGame()

Page 16: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

Overview of the Code

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 16

Use requestAnimationFrame() to invoke drawGame()

Page 17: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

Overview of the Code

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 17

1. Erase everything

2. Draw a quadratic curve different from

last time3. Use request AnimationFrame()

to invoke drawGame()

Page 18: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

Overview of the Code

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 18

1. Update the change for the quadratic

curve2. Use setTimeout() to invoke

updateGame() in a specific timing

Page 19: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

Review Question

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 19

Fill in the blanks

with the following:drawGame()

main()

startGame()

updateGame()

Page 20: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

Answer

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 20

Page 21: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

Review Question

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 21

When you animate

an image moving

down, in which

function do you

increase the

image's y?

Page 22: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

Answer

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 22

When you animate

an image moving

down, in which

function do you

increase the

image's y?

Page 23: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

Review Question

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 23

When you animate

morphing two

curves, in which

function do you

set the change?

Page 24: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

Answer

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 24

When you animate

morphing two

curves, in which

function do you

set the change?

Page 25: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

Review Question

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 25

At the beginning of

which function do

you erase

everything on the

canvas?

Page 26: HTML5 CANVAS: ANIMATION - csuohio.educis.csuohio.edu/.../Lecture_Wangch12a-move-image_2.pdf · HTML5 CANVAS: ANIMATION Part 1 ... 2. Invoke startGame() when images are ready

Answer

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 26

At the beginning of

which function do

you erase

everything on the

canvas?