Question

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

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：fiddle

Answer 1

你的第一个论点是错的，它需要是目标元素/对象 according to their documentation ：

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为画布中的图像添加动画效果

1 个答案: