使用CreateJS创建简单的文本补间

时间:2014-11-11 12:57:54

标签: javascript createjs

我已经开始学习如何使用CreateJS。我正在尝试制作一个简单的文字补间。所以我有这个代码:

<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>

<script>
function init() {
    var c = createjs;
    var stage = new c.Stage("myCanvas");

    var txt = new c.Text("Hola!", "bold 16px Arial");
    txt.alpha = 0.2;
    stage.addChild(txt);
    c.Tween.get(txt)
        .to({alpha:1}, 1500)
        .to({text:"Ciao!"}, 800)
        .to({rotation:360, text:"Hello"}, 1300)
        .to({y:380}, 2000, c.Ease.bounceOut)
        .wait(1000)
        .call(alert, ["Done animating!"], window);

    stage.update();
}
</script>
</head>
<body onLoad="init();">
    <canvas id="myCanvas" width="300" height="400">Canvas not supported</canvas>
</body>

我在画布上看到我的文字,它有alpha 0.2,它甚至在最后弹出警报,但我在画布上看不到任何动作。我做错了什么?

1 个答案:

答案 0 :(得分:3)

为了正确渲染动画,需要重复调​​用

stage.update();,最常见的方法是在每个刻度上调用它。

createjs.Ticker.addEventListener("tick", function() {
    stage.update();
});

将此添加到您的代码中,然后它应该正常工作。