problem with css object in BezierPlugin

[kefnas]

Hi there, I'm having some trouble with css object. I want to move an image along a bezier curve. I create the image like this: 

img = new Image();
img.src = "car.png";
img.xpos=275;
img.ypos=350;

 

And then I try to move it along the bezier curve in canvas. In the function "loop" I draw the image continuesly. Here is the code for the bezier:

ctx = document.getElementById("can").getContext("2d");
TweenLite.ticker.addEventListener("tick",loop);
TweenMax.to(img, 4, {css:{bezier:{values:[{xpos:100, ypos:250}, {xpos:300, ypos:0}, {xpos:500, ypos:400}], autoRotate:true}}, ease:Power1.easeInOut});

 

But it does nothing. When I remove the css object and also autoRotate attribute it works. The working version of that line is here:

TweenMax.to(img, 4, {bezier:{values:[{xpos:100, ypos:250}, {xpos:300, ypos:0}, {xpos:500, ypos:400}]}, ease:Power1.easeInOut}); 

 

 

 I don't know how to fix it because if I try this with an <img> element it goes well also the first way. Could you somehow tell me where I made a mistake? I need to do this with an image created during process because I draw the images in canvas. Not just like this:<img src="car.png"> Thanks

[Carl]

Hello and Welcome to the GreenSock forums.

 

If you are rendering your img to the canvas you don't need the cssPlugin. The CSSPlugin is only for DOM elelements. So the line that works for you is exactly what you need.

 

The tricky part is autoRotate. An Image() object doesn't have a rotation property.

rotating an Image() on the canvas is a non-trivial affair as outlined here:

http://creativejs.com/2012/01/day-10-drawing-rotated-images-into-canvas/

 

I have had success with rotation by a: tweening properties in a generic Object() and then applying those values to the animated element using onUpdate. Also of note is that 3rd party canvas libraries like KineticJS make this a whole lot easier.

 

See the example here to see how the Bezier plugin can work with a KineticJS object:

http://jsfiddle.net/geekambassador/7aQvP/

 

Here is some info on their Image object:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/

The kineticJS docs provide info on how the KineticJS has various methods for setting rotation.

 

Also of note, when setting autoRotate true you can define what the name of the property is that gets the rotation value. It is rotation by default, but you can change it to rotate, rotateAmt or whatever property or method your object uses to set rotation. See the docs for autoRotate for more: http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

 

 

I think the short explanation is that your Image() doesn't have a rotation property, so its impossible for autoRotate to rotate it. You need to have some sort of middleman object recording the rotation.

[kefnas]

Thanks a lot for your help. I've solved the autorotation issue with recording the actual and previous position X and Y to attributes of my Image() and then at every few miliseconds I calculated the angle between those two points. In the loop where the Image() was redrawing I just used this angle for rotating the canvas.