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

本文介绍了如何使用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动画中,完成一个直线运动的例子比较简单&

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值