Createjs-Tweenjs没有'无法使用位图

Createjs - Tweenjs doesn't work with Bitmap

本文关键字：位图 没有 Createjs-Tweenjs      更新时间：2023-09-26

我有一个例子，我想用ease.js位图创建动画，但它似乎不起作用。在这个项目中，我使用preload.js来加载图像；裁剪卡片中的卡片图片；创建位图对象，并尝试使用tweetn.js动画化此位图。任何人都可以帮助我。谢谢！

<!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>

这很好用，只是你跳过了Tween.to调用上的"duration"参数（而是指定了easy，这是第三个参数）。这使它成为一个持续时间为0的青少年，最终会离开舞台（所以你永远不会看到它）。

试试这个：

createjs.Tween.get(card).to({ x: 600, y: 1000 }, 1000, createjs.Ease.linear);

相关文章：