带有图片的TweenJS

TweenJS with Images

本文关键字：TweenJS 有图片      更新时间：2024-04-19

我遇到了一个问题，要将图像从x=0设置为x=400。我在用画架和粗花呢。这是我的代码：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>

我确信tween启动了，因为400毫秒后打开警报，但图像没有移动一个像素。

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

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

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

最后，你需要让Ticker移动，这样舞台才会更新。在init():的末尾尝试这样的操作

Ticker.addListener(stage);

[注意，对于任何使用更高版本的CreateJS的人，您都需要为Stage、Bitmap、Ticker等的使用命名空间/前缀"CreateJS."]

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

设置瓷砖（图像）的初始x，y坐标，从要设置其动画的位置开始。使用图片对象标题作为get（title），而不考虑tweening中的get（img），还使用ticker进行计数更新cretajs。Ticker.addEventListener（'tick'，function（）{stage.update（）；}）

相关文章：