虚拟主机怎么建设网站,长春哪里有做网站的,网架公司十大排名,做数据可视化图的网站前言
虽然 Cocos 的官方文档对动画系统做了较详细的介绍#xff0c;但是对于刚接触的同学#xff08;比如我#xff09;来说还是不太友好。尽管如此#xff0c;我就按文档加社区帖子一起实践了一下。为了方便忘记后能快速捡起#xff0c;所以就用我的方式结合使用场景但是对于刚接触的同学比如我来说还是不太友好。尽管如此我就按文档加社区帖子一起实践了一下。为了方便忘记后能快速捡起所以就用我的方式结合使用场景简单介绍一下 Cocos Creator 动画添加的三种方式。 属性动画
这个是 Cocos Creator 动画系统自带的一种对节点进行标准位移、旋转、缩放动画操作。可以用来制作一些按钮加亮引导之类的业务型动画。 创建节点并挂载 “Animation” 组件
添加组件 其他组件 Animation然后打开动画编辑器再点击 “新建 Clip 文件”保存后放在 assets 下 animations后缀为.anim 的文件。 动画编辑
进入编辑后找到属性列表点击 “Add Property”选择列表的 “positionwidthcoclor” 等属性点击右侧菜单按钮可以插入关键帧删除关键帧清空关键帧等添加一帧就可以在属性检查器对应节点的属性进行调节。 挂载动画剪辑
将已经编辑好的动画剪辑文件 (.anim 后缀)拖入到节点动画组件的 animation-clip 或 Default Clip 中。
脚本控制
创建 ts 文件将以下代码的脚本挂载到与动画相同的节点上当然也可以制作预设体。
const {ccclass, property} cc._decorator;ccclass
export default class NewClass extends cc.Component {onLoad () {var anim this.getComponent(cc.Animation);// start_btn_dance 动画剪辑名称anim.play(start_btn_dance);}start () {}// update (dt) {}
}序列帧动画
帧动画也是 Cocos Creator 自带的编辑功能就是在指定时间内循环各种动作或样式的图片当然前期要准备好序列帧图片放到 assets 下。
创建 Animation 组件和动画剪辑
这部分和上面的属性动画操作一样 动画编辑
这里在属性列表 Add Property 要选择 “cc.Sprite.spriteFrame”然后将资源里的序列图片一张一张放入关键帧里。 脚本控制
如果只是用于播放动画的和上面的也一样但是动画事件需要分开说一下。
const {ccclass, property} cc._decorator;ccclass
export default class NewClass extends cc.Component {onLoad () {// 获取当前节点动画组件var anim this.getComponent(cc.Animation);// 播放指定动画剪辑anim.play(monster);//this.node.on(onAnimCompleted, this.onAnimCompleted, this);}// 动画事件接收两个参数onAnimCompleted(num, str) {console.log(start anim completed end~);console.log(num);console.log(str);//console.log(onAnimCompleted: param1[%s], param2[%s], num, string);//console.log(onAnimCompleted: this is a test event12345 num);}
}动画事件
确切的说应该是动画帧事件就是在指定帧上添加一个事件可以预留参数当播放到该帧时触发。当前触发是在脚本里控制这种一般用来做比如一个角色击杀时要触发一个大招特效动画等。 第三方工具动画
通过第三方的工具制作动画后导入到 Cocos Creator 官方提供对 Spine 和 DragonBones 的支持。下面以 Spine 为例从工具内导出到 Cocos 脚本控制进行演示。
Spine 导出
可以直接用工具提供的示例然后选择导出注意是 json 格式文件。 Cocos Creator 导入
将上面从 Spine 导出的三个文件整成一文件夹放入 cocos 项目下 assets 的资源下然后找到后缀 json 文件拖入层级管理器中。 脚本控制
因为在 Spine 已经做好了动画皮肤和帧事件所以脚本也就是对动画的播放操作换肤和事件回调等。
const {ccclass, property} cc._decorator;ccclass
export default class NewClass extends cc.Component {onLoad () {var anim this.getComponent(sp.Skeleton);// 清空动画管道//anim.clearTracks();// 添加动作anim.addAnimation(0, run, true, 0);/*anim.addAnimation(0, walk, false, 0);anim.addAnimation(0, jump, false, 0);anim.addAnimation(0, idle, false, 0);anim.addAnimation(0, head-turn, false, 0);anim.addAnimation(0, fall, false, 0);anim.addAnimation(0, crouch, false, 0);anim.addAnimation(0, attack, false, 0);*/// 停止动画/*let SpEnt: sp.spine.TrackEntry anim.setAnimation(0, run, false);SpEnt.animationStart SpEnt.animationEnd;*/// 换肤//anim.setSkin(default);// 监听动画开始anim.setStartListener(function () {console.log(animate start~);}.bind(this));// 监听动画结束anim.setCompleteListener(function () {console.log(animater end~);}.bind(this));}}
