如何使用Tweenlite對畫布中的圖像進行動畫處理

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： 小提琴

Answer 1

您的第一個參數是錯誤的， 根據其文檔 ，它必須是目標元素/對象：

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處理程序中的內容即可。

免責聲明：高度未經測試。