createjs-tweenjs初体验

1.从简单开始，引入tweenjs文件

<script src="https://code.createjs.com/1.0.0/tweenjs.min.js"> </script>

2.先移除在init函数底部的 stage.update（）

在底部的空白区可以放置我们的tweenjs ，首先获取circle实例

（1）将 loop：true 传入，然后我们动画就可以循环播放了。

（2）.to（）方法可以让对象移动到一个位置，并且让其做一些事（eg：改变x的值可以改变水平位置，改变alpha可以改变透明度）

createjs.Tween.get(circle, {loop:true}) // 循环播放动画
    .to({ x: 400}, 1000, createjs.Ease.getPowInOut(4))
    .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
    .to({ alpha: 0, y: 225 }, 100,)
    .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
    .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

3.还记得第二步开始为什么要删除 stage.update() 方法吗？这是因为tween 有自己的刷新舞台的方式，

（1）设置fps（帧数）

（2）添加事件监听中的ticker类（打点器），它会让stage 一个tick 刷新一次

createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);

4.成功了这个圆可以右移，淡入，淡出，并拉回原来的位置，你可以随心所欲地改变这些值

5.代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.createjs.com/1.0.0/createjs.min.js"> </script>
    <script src="https://code.createjs.com/1.0.0/tweenjs.min.js"> </script>
    <script>
        function init() {
            var stage = new createjs.Stage("demoCanvas");
            var circle =new createjs.Shape();
            circle.graphics.beginFill("DeepSkyBlue").drawCircle(0,0,50);
            circle.x = 100;
            circle.y = 100;
            stage.addChild(circle);
            createjs.Tween.get(circle, {loop:true})
                .to({ x: 400}, 1000, createjs.Ease.getPowInOut(4))
                .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
                .to({ alpha: 0, y: 225 }, 100,)
                .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
                .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));
//            stage.update();
            createjs.Ticker.setFPS(60);
            createjs.Ticker.addEventListener("tick", stage);
        }
    </script>
</head>
<body onload="init();">
    <canvas id="demoCanvas" width="500" height="500"></canvas>
</body>
</html>

createjs-tweenjs初体验

猜你喜欢