Question

我有一个问题要设置从x = 0到x = 400的图像动画。我正在使用画架和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>

确保补间开始，因为在400ms后打开警报但图像不会移动一个像素。

Answer 1

看起来有些小事正在密谋打破代码。

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

尝试将var tween = ...行移至img.onload函数的末尾，然后将get(img)更改为get(title)，以便您可以操作位图而不是图像。< / p>

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

Ticker.addListener(stage);

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

Answer 2

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

Answer 3

设置瓷砖（图像）的初始x，y坐标，以便为其设置动画。使用图像对象标题作为get（标题），尽管获取（img）补间，并使用自动收报机进行连续更新 cretajs.Ticker.addEventListener（ '蜱'，函数（）{stage.update（）;}）

TweenJS与图像

3 个答案: