cocos creator 手动创建动画

最新推荐文章于 2024-11-06 18:18:30 发布

knife1220

最新推荐文章于 2024-11-06 18:18:30 发布

阅读量674

点赞数

CC 4.0 BY-SA版权

分类专栏： cocos creator

本文链接：https://blog.youkuaiyun.com/caideb/article/details/105966272

cocos creator 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍如何在Cocos Creator中使用cc.Animation组件创建动画，包括动态加载节点、添加SpriteFrame到动画帧数组、创建动画片段并播放。通过具体代码示例，读者将学会如何从资源中克隆图片，设置SpriteFrame的纹理矩形区域，实现流畅的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cc.Class({
    extends: cc.Component,

    properties: {
        resource:{
            default : null,
            type : cc.SpriteFrame,
        },
    },

    onLoad: function () {
		
		var nodeTest = new cc.Node();
 
		nodeTest.name = 'NodeTest';
 
 
		var sprite = nodeTest.addComponent(cc.Sprite);
 
		sprite.spriteFrame = this.getSprite(260,360,100,90);
 
 
		nodeTest.parent = this.node;
 
 
		var animation = nodeTest.addComponent(cc.Animation);
 
 
		/* 添加SpriteFrame到frames数组 */
 
		var frames = [];
 
		frames[0] = this.getSprite(168,80,90,90);
 
		frames[1] = this.getSprite(168,170,90,90);
		
		frames[2] = this.getSprite(168,260,90,90);
		
		frames[3] = this.getSprite(168,350,90,90);
		
		frames[4] = this.getSprite(168,440,90,90);
		
		frames[5] = this.getSprite(168,530,90,90);
		
		frames[6] = this.getSprite(168,620,90,90);
		
		frames[10] = this.getSprite(607,772,90,90);
		
		frames[9] = this.getSprite(701,772,90,90);
		
		frames[7] = this.getSprite(794,772,90,90);
		
		frames[8] = this.getSprite(890,772,90,90);
 
 
		var clip = cc.AnimationClip.createWithSpriteFrames(frames, 11);
 
		clip.name = 'anim_boom';
 
		clip.wrapMode = cc.WrapMode.Loop;
 
		animation.addClip(clip);
 
		animation.play('anim_boom');
		
		
    },
	
	
	// 获取贴图
    getSprite(x,y,width,height)
    {
        var sprite = this.resource.clone(); // 克隆一张图片
        var tmpRect = new cc.Rect(x,y,width,height);
        sprite.setRect(tmpRect);   // 设置 SpriteFrame 的纹理矩形区域
        return sprite;
    },
	
	
});