Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Tomeo

Html5 Canvas

Recommended Posts

Hi,

 

i am trying to make tweens work within canvas, but no luck. Well its actualy my first time i am trying to do something with canvas, so there must be something i did wrong? :)

 

Gratz on the new release, it looks great!

 

function animate(myRectangle){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);

context.fillStyle = "#8ED6FF";
context.fill();

   TweenLite.to(myRectangle, 1.5, {x:100, y:200});
  }

  window.onload = function(){
var myRectangle = {
 x: 0,
 y: 50,
 width: 100,
 height: 100
};

var date = new Date();
var time = date.getTime();
animate(myRectangle);
  };

Link to comment
Share on other sites

This might be an approach for example purposes, not for real live production, assuming you meant to tween the canvas as a whole:

<canvas id="myCanvas" style="position:absolute;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
function animate(myRectangle){
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = "#8ED6FF";
context.fill();
TweenLite.to(canvas, 1.5, {css:{left:'100px', top:'200px'}});
}
function doAnimation(){
var theRectangle = {
 x: 0,
 y: 50,
 width: 100,
 height: 100
};
var date = new Date();
var time = date.getTime();
animate(theRectangle);
};
setTimeout('doAnimation()', 2000);
</script>

If you want to animate/move individual elements within the canvas, then it gets more complex/tedious, but it's not that daunting. There's a cool tutorial here http://simonsarris.c...5-canvas-useful that explains some traditional moving of elements on the canvas. As for tweening elements in the canvas, I've not yet worked that out to any degree of reliability.

 

And, here http://lamberta.org/doodle-js/ is another variation of animating on the HTML5 canvas - perhaps the Greensock JS Animation Platform could be integrated just as well in similar fashion?

  • Like 1
Link to comment
Share on other sites

The key concept to grasp here is that the canvas needs to be redrawn on each frame, otherwise you'll never see the changes. So in your example, TweenLite was tweening the rectangle's properties fine, but you never saw the changes because you never redrew the canvas.

 

You can easily use an onUpdate on your tween like in this simple example:

 

var canvas = document.getElementById("myCanvas"),
ctx = canvas.getContext("2d"),
rect = {x:0, y:50, width:100, height:100};

function draw() {
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.rect(rect.x, rect.y, rect.width, rect.height);
ctx.fillStyle = "#8ED6FF";
ctx.fill();	
}

TweenLite.to(rect, 1.5, {x:100, y:200, onUpdate:draw});

 

Or for a more robust solution, it'd be wise to just add a listener to the TweenLite.ticker that calls a draw() function every time the engine updates (think of it like an onUpdateAllTweens).

 

TweenLite.ticker.addEventListener("tick", draw);
function draw() {
   //your drawing code here...
}

 

But you might want to look into Grant Skinner's EaselJS because it makes a lot of this routine redrawing stuff much simpler. You can use TweenLite with EaselJS (you don't need to use Grant's TweenJS). Or there are a bunch of other frameworks out there that will make working with a Canvas object easier.

 

Does that help?

Link to comment
Share on other sites

Yes, this is it. Grant Skinner's EaselJS looks very nice also. Will definitely take a closer look.

 

Thank you both guys.

Link to comment
Share on other sites

  • 1 year later...
  • 4 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×