[英]Createjs - Tweenjs doesn't work with Bitmap
I have an example, i want to create animation with easel.js Bitmap but it seems not working. 我有一个例子,我想用easel.js Bitmap创建动画,但它似乎无法正常工作。 In this project, i use preload.js to load image;
在这个项目中,我使用preload.js来加载图像; crop card in cards picture;
卡片中的裁剪卡; create Bitmap object and try to animate this bitmap by using tween.js Anyone can help me.
创建Bitmap对象并尝试使用tween.js为此位图设置动画。任何人都可以帮助我。 Thank you!
谢谢!
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/CanvasLib/easeljs-0.6.1.min.js"></script>
<script src="Scripts/CanvasLib/preloadjs-0.3.1.min.js"></script>
<script src="Scripts/CanvasLib/soundjs-0.4.1.min.js"></script>
<script src="Scripts/CanvasLib/tweenjs-0.4.1.min.js"></script>
</head>
<body>
<canvas id="CanvasDemo" width ="1024" height="768" style="border:1px solid #000000;"> </canvas>
<script>
var queue = new createjs.LoadQueue(),
stage = new createjs.Stage("CanvasDemo"),
text = new createjs.Text("Welcome to canvas demo!", "40px Bold Aria"),
image = {},
card = {};
stage.addChild(text);
//stage.autoClear = false;
queue.addEventListener("complete", handleComplete);
queue.loadManifest([
{ id: "myImage", src: "Images/card.png" }
]);
function handleComplete() {
image = queue.getResult("myImage");
card = new createjs.Bitmap(image);
card.sourceRect = new createjs.Rectangle(56, 74, 56, 74);
stage.addChild(card);
createjs.Tween.get(card).to({ x: 600, y: 1000 }, createjs.Ease.linear);
createjs.Ticker.addListener(this);
}
function tick() {
text.x += 5;
if (text.x >= 1024) {
text.x = 0;
}
text.y = 50 + Math.cos(text.x * 0.1) * 10;
text.color = createjs.Graphics.getHSL(360 * Math.random(), 50, 50);
stage.update();
}
</script>
</body>
</html>
This works just fine - except you skipped the "duration" parameter on the Tween.to call (and instead specified the ease, which is the 3rd parameter). 这很好 - 除了你跳过Tween.to调用上的“duration”参数(而是指定了ease,这是第3个参数)。 This makes it a 0-duration tween, which ends up off-stage (so you never see it).
这使得它成为一个0持续时间的补间,最终在场外(所以你永远不会看到它)。
Try this instead: 试试这个:
createjs.Tween.get(card).to({ x: 600, y: 1000 }, 1000, createjs.Ease.linear);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.