CocosCreator 帧动画 组件脚本

在节点上加上这个脚本,然后将每阵的spriteFrame拖入即可

cc.Class({
    extends: cc.Component,

    properties: {
        frames:{
            type: cc.SpriteFrame,
            default:[]
        },

        duration: 0.1,
        isloop: false,
        play_onload: false,
    },

    onLoad () {
        this.sprite = this.getComponent(cc.Sprite);
        if(!this.sprite){
            this.addComponent(cc.Sprite);
        }
    },

    start () {
        this.no_frame = false;
        if (this.frames.length <= 0) {
            this.no_frame = true;
            return;
        }

        this.sprite.spriteFrame = this.frames[0]; 

        this.playing = false;
        this.end_func = null;
        this.total_time = 0;

        if(this.play_onload)
        {
            if (this.isloop !== true){
                this.play_once();
            }
            else{
                this.play_loop();
            }
        }
    },

    play_once(end_func){
        this.playing = true;
        this.end_func = end_func;
    },

    play_loop(){
        this.isloop = true;
        this.playing = true;
    },

    stop_anim(){
        this.isloop = false;
        this.playing = false;
        this.total_time = 0;
    },

    update (dt) { // 改变每一帧的显示
        if (this.no_frame === true || this.playing !== true){ 
            return;
        }
        
        this.total_time += dt;
        var index = Math.floor(this.total_time / this.duration);

        if (this.isloop !== true){ 
            if (index >= this.frames.length){ // 播放完了
                this.sprite.spriteFrame = this.frames[index - 1]; 
                this.total_time = 0;
                this.playing = false;
                return;
            }

            this.sprite.spriteFrame = this.frames[index]; 
        }
        else{
            if (index >= this.frames.length){ // 播放完了
                index = index - 1; 
                this.total_time = 0;
            }
         
            this.sprite.spriteFrame = this.frames[index]; 
        }
    },
});

 

### Cocos Creator 动画创建和使用 #### 使用动画播放组件Cocos Creator 中,动画是一种常见的动画形式,特别适用于游戏中需要逐展示不同图像的情况。为了实现这一功能,开发者通常会利用 `cc.Sprite` 组件配合 `cc.Animation` 和 `cc.Animator` 来完成动画的创建与播放[^2]。 #### 准备工作 首先,在项目资源管理器中准备好一系列作为序列使用的图片文件。这些图片应当按照时间顺序命名以便于后续操作。接着新建一个精灵节点并将其挂载到场景当中去。最后一步是在该节点上添加 Sprite 组件以及 Animation 组件。 #### 设置动画属性 对于每一个想要加入到动画里的单张图而言,都需要被配置成 sprite frame 形式存入 atlas 或者单独加载进来成为 texture 后再关联给对应的 sprite component 实例。当所有的素材都准备完毕之后就可以开始设定具体的参数了: - **clip**: 定义一组连续的画面切换过程; - **playback speed**: 控制每秒钟内显示多少画面,默认值为 1 表示一秒一; - **wrap mode**: 循环模式决定了动画结束后的行为方式,比如只播一次还是无限循环等选项; 以上提到的各项设置都可以通过属性检查面板来进行调整。 #### 编写脚本控制逻辑 如果希望通过编程手段动态改变某些行为,则可以在 JavaScript 文件里编写相应的函数来达到目的。下面给出一段简单的例子用来说明如何启动/停止指定名称下的某个特定剪辑片段: ```javascript // 获取当前节点上的 Animator 组件实例 const animator = this.getComponent(cc.Animator); if (animator) { // 开始播放名为 "walk" 的剪辑 animator.play('walk'); // 延迟两秒后暂停正在运行中的所有动作 setTimeout(() => { animator.stop(); }, 2000); } ``` 这段代码展示了怎样获取节点上的Animator组件,并调用了它的 play 方法传入要执行的动作名字字符串,同时也示范了 stop 方法的应用场景——即延迟一段时间后再终止之前已经开始的工作流程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值