gpt4 book ai didi

javascript - TweenJS 与图像

转载 作者:行者123 更新时间:2023-11-28 00:16:54 26 4
gpt4 key购买 nike

我在为 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 毫秒后打开警报但图像没有移动一个像素。

最佳答案

看起来有一些小事正在密谋破解密码。

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

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

最后,您需要移动 Ticker,以便 Stage 更新。在 init() 的末尾尝试这样的事情:

Ticker.addListener(stage);

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

关于javascript - TweenJS 与图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11719338/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com