Javascript 如何使用tweenlite在画布中设置图像动画

我已经搜索了一段时间，但还没有看到任何关于如何在画布上绘制图像（从右到左连续循环）动画的文章

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});
}

我做错了什么

编辑：

---

与此类似，但使用tweenlite:

您的第一个参数是错误的，它必须是目标元素/对象：

TweenLite.to(target, duration, vars);

其中，

target

是一个对象/元素，

duration

是一个数字，

vars

是一个对象

例如：

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

请注意，如果您打算使用canvas元素作为目标，那么您最好在加载时直接为图像设置动画

如果你想在画布的位图上移动它而不移动画布本身，你需要使用一个自定义对象（我理解他们的文档）作为保存f.ex的目标。使用

x

和

y

属性，并使用

onUpdate

回调机制。检查他们的文件中所有血淋淋的细节

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);
}

只需用上面的代码替换

onload

处理程序中的内容

---

免责声明：高度未测试..

您的第一个参数是错误的，它必须是目标元素/对象：

TweenLite.to(target, duration, vars);

其中，

target

是一个对象/元素，

duration

是一个数字，

vars

是一个对象

例如：

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

请注意，如果您打算使用canvas元素作为目标，那么您最好在加载时直接为图像设置动画

如果你想在画布的位图上移动它而不移动画布本身，你需要使用一个自定义对象（我理解他们的文档）作为保存f.ex的目标。使用

x

和

y

属性，并使用

onUpdate

回调机制。检查他们的文件中所有血淋淋的细节

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);
}

只需用上面的代码替换

onload

处理程序中的内容

免责声明：高度未经测试