带有图像的Tweenjs答案

【问题标题】：TweenJS with Images带有图像的Tweenjs
【发布时间】：2012-07-27 23:50:32
【问题描述】：

我在将图像从 x=0 设置为 x=400 时遇到问题。我正在使用easeljs 和tweenjs。这是我的代码： Javascript：

<!doctype html>
<html>
<head>
    <title></title>
    <script src="js/easeljs-0.4.1.min.js"></script>
    <script src="js/tweenjs-0.2.0.min.js"></script>

    <script type="text/javascript">
        function init() {
            var canvas = document.getElementById("canvas");
            var stage = new Stage(canvas);
            var img=new Image();

            img.src="http://exampledomain.com/exampleimage.jpg";
            img.onload = function(e){
                var title = new Bitmap(e.target);
                stage.addChild(title);
                stage.update();
            }
            var tween = Tween.get(img).to({x:400},400).call(tweenComplete);
        }

        function tweenComplete(){
            alert('done');
        }
    </script>
</head>
<body onload="init();">
    <canvas id="canvas" width="430" height="446"></canvas>
</body>
</html>

我确定补间开始了，因为 400 毫秒后会打开警报，但图像不会移动一个像素。

【问题讨论】：

标签： javascript html html5-canvas tween createjs

【解决方案1】：

看起来有几件小事正在密谋破坏代码。

首先，有点竞争条件。您正确创建了位图并将其添加到img.onload() 中的舞台，但var tween = ... 代码可以随时运行，包括在创建/添加位图之前。

尝试将var tween = ... 行移动到img.onload 函数的末尾并将get(img) 更改为get(title)，这样您就可以对位图而不是图像进行操作。

最后，您需要让 Ticker 移动，这样舞台才会更新。在init()的末尾尝试这样的事情：

Ticker.addListener(stage);

[请注意，对于使用更高版本 CreateJS 的任何人，您需要在名称空间/前面加上“createjs”。关于Stage、Bitmap、Ticker等的使用]

【讨论】：

【解决方案2】：

您必须为您的位图设置动画，而不是其中的图像。存储对您创建的 Bitmap 实例的引用，并设置它的 x/y。

【讨论】：

【解决方案3】：

从您要为其设置动画的位置设置平铺（图像）的初始 x,y 坐标。尽管在补间中使用了 get(img)，但仍将图像对象标题用作 get(title)，并且还使用自动收报机进行计数更新 cretajs.Ticker.addEventListener('tick',function(){stage.update();})

【讨论】：