2

我在将图像从 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 毫秒后会打开警报，但图像不会移动一个像素。

4

3 回答 3

1

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

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

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

最后，您需要让 Ticker 移动，以便 Stage 会更新。在结尾尝试这样的事情init()：

Ticker.addListener(stage);

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

于 2012-09-18T19:58:35.237 回答
1

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

于 2013-02-22T21:48:49.017 回答
0

设置您要为其设置动画的 tile(image) 的初始 x,y 坐标。尽管在补间中使用了 get(img)，但仍使用图像对象标题作为 get(title)，并且还使用股票代码进行计数更新 cretajs.Ticker.addEventListener('tick',function(){stage.update();})

于 2014-07-09T12:58:01.780 回答