带图像的TweenJS
我有一个问题，以动画的形象从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>我确定补间开始了，因为400ms后打开警报，但图像没有移动一个像素。
回答 3
Stack Overflow用户
发布于 2012-09-19 03:58:35
看起来有几个小东西在合谋破解代码。
首先，有一点竞争条件。您可以正确地创建位图并将其添加到img.onload()中的舞台，但是紧跟在位图之后的var tween = ...代码可以随时运行，包括创建/添加位图之前的。
尝试将var tween = ...行移动到img.onload函数的末尾，并将get(img)更改为get(title)，以便可以对位图而不是图像执行操作。
最后，你需要让Ticker移动，这样舞台才会更新。在init()的末尾尝试这样的东西
Ticker.addListener(stage);注对于使用更高版本的CreateJS的任何人，您将需要命名空间和前缀“createjs”。Stage、Bitmap、Ticker等的使用。
Stack Overflow用户
发布于 2013-02-23 05:48:49
必须为位图设置动画，而不是位图中的图像。存储对您创建的Bitmap实例的引用，并设置该引用的x/y。
Stack Overflow用户
发布于 2014-07-09 20:58:02
设置初始x，y坐标的瓷砖(图像)，从那里你要动画它。使用图像对象标题作为get( title )，尽管在补间中使用get(img)，也可以使用滚动条来持续更新函数(‘cretajs.Ticker.addEventListener’，function(){stage.update();})
https://stackoverflow.com/questions/11719338
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号