如何使用Createjs来编写HTML5游戏（四）TweenJS和Tick动画

最新推荐文章于 2021-08-30 10:03:04 发布

lanix516

最新推荐文章于 2021-08-30 10:03:04 发布

阅读量1.7w

点赞数

分类专栏： Html5 文章标签： CreateJS html5 游戏动画 tweenjs

本文链接：https://blog.csdn.net/lanix516/article/details/47323573

版权

本文介绍了如何使用CreateJS的TweenJS模块来简化HTML5游戏的动画制作，通过Ticker和TweenJS结合，实现复杂的游戏动画效果，包括元素的移动、旋转、透明度变化等。同时，讲解了Ease函数在控制动画轨迹和速度上的应用。

摘要由CSDN通过智能技术生成

CreateJS包含4个部分，EaselJS、TweenJS、PreloadJS、SoundJS，其中最主要的部分EaselJS包含了开发Html5游戏的所有功能，仅仅使用EaselJS几乎可以完成所有的开发工作，其余三项可以看作EaselJS的辅助工具。比如响应tick事件然后改变元素坐标就可以实现动画功能，而使用TweenJS来创建补间动画，则可以省去你很多代码，简化了操作。

一个简单的tick动画看起来是这样的：

 var stage, circle;
    function init(){
        stage = new createjs.Stage(document.getElementById('game'));
        createjs.Ticker.addEventListener("tick", handleTick);
        createjs.Ticker.setFPS(60);
        circle = new createjs.Shape();
        circle.graphics.f("red").dc(0,0,50);
        circle.x = 0;
        circle.y = 100;
        stage.addChild(circle);

        circle.addEventListener("click", function(event){
            createjs.Ticker.setPaused(!createjs.Ticker.getPaused());
        });

    }

    function handleTick(event){
    if(!event.paused){
        circle.x +=5;
        if(circle.x > 1000){
            circle.x = 0;
        }
    }
        stage.update();
    }

每个时间周期，circle的x+5，很自然circle就会在页面上从左到右的移动，可以给circle添加一个鼠标点击事件让动画暂停运行，当鼠标按下，使用createjs.Ticker.getPaused()获取当前运行状态，并使用setPaused做成相反的赋值，参数event的paused属性作为动画开关，点击就可以暂停。

event参数还包含了其他重要的属性，比如使用event.delta可以获取刷新的时间间隔。

既然用Ticker可以完成动画，TweenJS又有什么作用呢？

使用TweenJS可以帮助开发者创建较复杂的动画效果，以及通过设置CSS来实现CSS动画，在Ticker动画中，完成一个直线运动的例子比较简单&