如何使用Tweenlite对画布中的图像进行动画处理

Question

Been searching for a while now and I haven't seen any article on how to animate (loop continuously from right to left) an imaged drawn in a canvas

var context = document.getElementById('my-canvas').getContext('2d');
var cloud   = new Image();
cloud.src   = 'images/cloud.png';
cloud.onload = function () {
    context.drawImage(cloud, 0, 0)
    TweenLite.to({x:0,y:0}, 2, {x: 200, y: 200});
}

What am I getting wrong?

edit:

Like so but using tweenlite : fiddle

Answer 1

Your first argument is wrong, it needs to be the target element/object according to their documentation :

TweenLite.to(target, duration, vars);

where target is an object/element, duration as a number, and vars an object.

Example:

TweenLite.to(canvas, 2, {x: 200, y:200});

Just note that if you intend to use the canvas element as target you could might as well just animate the image directly when loaded.

If you intend to move it across the canvas' bitmap without moving the canvas itself you will need to use a custom object (as I understand their docs) as target holding f.ex. the x and y properties, and use the onUpdate callback mechanism. Check their documentation for all the gory details.

var myObj = {
        x: 0,     // start position
        y: 0,
        image: cloud
    };

TweenLite.to(myObj, 2, {x: 200, y:200, onUpdate: drawImage});

function drawImage() {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    context.drawImage(myObj.image, myObj.x, myObj,y);
}

Just replace what you have inside the onload handler with the code above.

Disclaimer: highly untested..