技术标签: Cocos Creator学习 动画 CocosCreator 骨骼动画
转载地址:https://www.cnblogs.com/rickyctbu/p/10086597.html
一、普通动画的设置
1、添加动画组件
a、添加空节点=>添加动画组件
b、新建Clip文件=>打开编辑模式添加动画编辑(并且把添加的clip文件拖动到右边面板的Default Clip 与相对应的Clips文件里)
Default Clip => 在勾选Play On Load时或者调用play()默认播放的动画
Clips => 通过脚本访问可以播放的AnimationClip列表
Play On Loat => 是否在加载的时候播放
2、设置动画
WrapMode => 动画模式(default:默认,normal:正常,loop:循环...)
Sample => 定义当前动画数据每秒的帧率,默认为 60,这个参数会影响时间轴上每两个整数秒刻度之间的帧数量(也就是两秒之内有多少格)
Speed => 当前动画的播放速度,默认为 1
设置动画的步骤:选定节点后,点击+号选择需要设置的属性,如position,opacity等,点击添加关键帧,拉动线色线条到指定的时间点,再添加关键帧,设置所对应的值保存即可(如果是位置值,可直接拖动即可)如果是设置图片的动画选择cc.Sprite.spriteFrame,把指定的图片拖动到关键帧即可,概括如下:
(1)添加动画属性
(2)添加关键帧/删除关键帧,选到关键帧,在属性编辑器上编辑和修改;
(3)编辑补间动画曲线路径;
3、代码控制动画
a: Animation组件主要的方法:
play([name], [start_time]), 播放指定的动画,如果没有制定就播放默认的动画;
playAdditive: 与play一样,但是不会停止当前播放的动画;
stop([name]): 停止指定的动画,如果没有指定名字就停止当前播放的动画;
pause/resume: 暂停唤醒动画;
getClips: 返回组件里面带的AnimationClip数组
b: Animation重要的属性:
defaultClip: 默认的动画剪辑;
currentClip: 当前播放的动画剪辑;
c: Animation播放事件: 动画组件对象来监听on,不是节点,取消注册的事件用off
play : 开始播放时 stop : 停止播放时 pause : 暂停播放时 resume : 恢复播放时
lastframe : 假如动画循环次数大于 1,当动画播放到最后一帧时 finished : 动画播放完成时
cc.Class({
extends: cc.Component,
properties: {
animate: {
type: cc.Animation,
default: null
}
},
onLoad() {
//方法一
// this.anim_con = this.animate;
//方法二
this.anim_con = this.node.getChildByName('anim').getComponent(cc.Animation);
//获取铵钮组件
let btn = this.node.getChildByName('btn').getComponent(cc.Button);
//绑定事件
let click_event = new cc.Component.EventHandler();
click_event.target = this.node;
click_event.component = 'test_scene';
click_event.handler = 'col_anim';
btn.clickEvents.push(click_event);
//绑定监听事件
//监听开始播放
this.anim_con.on('play', function () {
console.log('已经开始播放了哈!!!');
}.bind(this), this);
//监听暂停
this.anim_con.on('pause', function () {
console.log('已经暂停了哈!!!');
}.bind(this), this);
//监听继续
this.anim_con.on('resume', function () {
console.log('现在继续哈!!!');
}.bind(this), this);
//完成播放时调用
this.anim_con.on('finished', function () {
console.log('完成了!');
}.bind(this), this);
},
start() {
this.anim_con.play();
this.isPlayAnim = true;
},
col_anim() {
if (this.isPlayAnim) {
//暂停
this.anim_con.pause();
} else {
//继续
this.anim_con.resume();
}
this.isPlayAnim = !this.isPlayAnim;
}
});
4、在动画上绑定事件
步骤:点击红色圆圈处绑定事件,双击蓝色处弹出对话框绑定事件
遍历当前动画组件所挂节点上面所有的脚本或组件,根据这个名字来触发函数;注意:要把脚本绑定在动画组件所挂的节点上
要慎用,代码和动画之间不易太多的调用;
二、Skeleton骨骼动画的设置
1、骨骼动画的基本配置及生成
a: 骨骼动画: 把动画打散, 通过工具,调骨骼的运动等来形成动画
b: spine是一个非常流行的2D骨骼动画制作工具
c: spine 动画美术人员导出3个文件:
(1) .png文件:动画的”骨骼”的图片集;
(2).atlas文件: 每个骨骼在图片集里面位置,大小;
(3).json文件: 骨骼动画的anim控制文件,以及骨骼位置等信息;
d: 骨骼动画导入: 直接把三个文件拷贝到项目的资源目录下即可;
e: 使用骨骼动画:
(1) 直接拖动到场景;
(2) 创建一个节点来添加sp.Skeleton组件,注意:在脚本里面定义资源要用sp.Skeleton来指定
2、骨骼动画的js属性及接口
sp.Skeleton: 控制面板属性:
Skeleton Data =>骨骼的控制文件.json文件;
Default Skin => 默认皮肤;
Animation => 正在播放的动画;
Loop => 是否循环播放;
Premuliplied Alpha => 是否使用贴图预乘;
TimeScale => 播放动画的时间比例系数;
Debug Slots => 是否显示 Slots的调试信息;
Debug Bone => 是否显示Bone的调试信息;
3、sp.Skeleton重要的方法: Skeleton是以管道的模式来播放动画,管道用整数编号,管道可以独立播放动画,Track;
(1)clearTrack(trackIndex): 清理对应Track的动画
(2)clearTracks(); 清楚所有Track动画
(3)setAnimation(trackIndex, “anim_name”, is_loop)清楚管道所有动画后,再从新播放
(4)addAnimation(trackIndex, “anim_name”, is_loop);往管道里面添加一个动画;
4、sp.Skeleton的监听方法
1: setStartListener: 设置动画开始播放的事件;
2: setEndListener : 设置动画播放完成后的事件;
3: setCompleteListener: 设置动画一次播放完成后的事件;
cc.Class({
extends: cc.Component,
properties: {
spine: {
//配置动画资源 注意:这里是sp.SkeletonData
type: sp.SkeletonData,
default: null
}
},
onLoad() {
//调用函数创建节点以及动画组件
this.create_elem();
let btn1 = this.node.getChildByName('btn1').getComponent(cc.Button);
let btn2 = this.node.getChildByName('btn2').getComponent(cc.Button);
let btn3 = this.node.getChildByName('btn3').getComponent(cc.Button);
this.bind_click(btn1, 'btn1_click');
this.bind_click(btn2, 'btn2_click');
this.bind_click(btn3, 'btn3_click');
//动画监听
this.sket.setStartListener(function () {
console.log('动画开始了');
});
this.sket.setEndListener(function () {
console.log('动画全部完成了');
});
this.sket.setCompleteListener(function () {
console.log('一部份动画完成了');
})
},
start() {
},
//创建一下绑定点击事件的方法
bind_click(con, fn, param) {
let click_events = new cc.Component.EventHandler();
click_events.target = this.node;
click_events.component = 'test_scene';
click_events.handler = fn;
param ? click_event.customEventData = param : void 0;
con.clickEvents.push(click_events);
},
btn1_click() {
this.item.active = true;
this.sket.clearTrack(0);
this.sket.setAnimation(0, 'in', false);
this.sket.addAnimation(0, 'clk_1', false);
},
btn2_click() {
this.item.active = true;
this.sket.clearTrack(0);
this.sket.setAnimation(0, 'clk_1', false);
this.sket.addAnimation(0, 'clk_2', false);
},
btn3_click() {
this.item.active = true;
this.sket.clearTrack(0);
this.sket.setAnimation(0, 'clk_3', false);
this.sket.addAnimation(0, 'out', false);
},
//创建节点以及动画组件
create_elem() {
this.node.addChild(new cc.Node(), 0, 'ske');
this.item = this.node.getChildByName('ske');
this.item.x = -100;
this.item.y = -300;
//设置隐藏
this.item.active = false;
let sket = this.item.addComponent(sp.Skeleton);
sket.skeletonData = this.spine;
sket.premultipliedAlpha = false;
this.sket = sket;
}
});
三、DragonBones 骨骼动画的设置和使用
1、添加DragonBones骨骼动画
添加空节点 => 在空节点里面添加渲染组件 => DragonBones
Dragon Asset 表示骨骼信息数据,是一个JSON文件
Dragon AtlasAsset 表示texture的信息数据
Armature 表示当前的Armature名称
Animation 表示当前播放的动画
Time Scale 表示所有动画的时间缩放率
Play Times 表示动画的播放次数,默认是-1
Debug Bones 表示是否显示骨骼的信息
2、通过代码获取骨骼组件
cc.Class({
extends: cc.Component,
properties: {
person: {
type: dragonBones.ArmatureDisplay,
default: null
}
},
start() {
//获取骨骼动画的方式一
console.log(this.person);
//获取骨骼动画的方式二
let node = this.node.getChildByName('person');
let bones = node.getComponent(dragonBones.ArmatureDisplay);
console.log(bones);
}
});
重要API展示
以下dragonBone表示实例化后的dragonBone对象
let Armature=dragonBone.armature();
播放动画 => Armature.animation.play(name, playtimes) name 表示动画的名称,playtimes表示动画次数如果为0就表示循环播放动画
获取所有动画名称 => Armature.animation.animationList || Armature.animation.animationNames
停止指定动画的播放 => Armature.animation.stop('stand');
cc.Class({
extends: cc.Component,
properties: {
person: {
type: dragonBones.ArmatureDisplay,
default: null
}
},
start() {
let Armature = this.person.armature();
let body = Armature.getBone('body');
//指定对象的翻转
// body.offset.rotation = 0;
//获取所有的骨骼
// console.log(Armature.getBones());
//获取所有的插槽
// console.log(Armature.getSlots());
//图片X轴方向翻转
// Armature.flipX = true;
let leg = Armature.getBone('legLeftUp');
//隐藏指定的骨骼
// leg.slot.displayIndex = -1;
//移除骨骼,注意,这里的参数必需是对应的骨骼对象,这里会同时隐藏其子组件的骨骼对象
// Armature.removeBone(leg);
}
});
文章浏览阅读2.8k次。null类型是一个只有一个值得数据类型,这个值为nullnull表示一个空对象指针所以我们在用typeof来检测null的数据类型时返回值为Objectvar a = null;console.log(typeof a); //Object如果在定义一个 变量时,是用于将来保存对象的,那么我们最好将这个变量的值赋值为null.那么问题来了,js如何准确判断数据类型null呢?o..._js判断null类型
文章浏览阅读530次。https://www.jianshu.com/p/4701d006b514核心思路1. GPUImageVideoCamera 采集视频: CMSampleBufferRef 采集音频:CMSampleBufferRef2. 渲染滤镜:filter3. 输出: 显示 GPUI..._avfoundation拍摄视频
文章浏览阅读1.1w次,点赞4次,收藏27次。这一节我们将看见,如何将数值函数用矩阵表示,并使用正定矩阵来指示函数的极值。二次型定义:对nnn维实向量xxx及nnn阶实对称矩阵AAA,称以下数值函数为一个实二次型(quadratic form),为一个二次齐次多项式。f(x)=xTAx=∑i=1n∑j=1naijxixjf(x)=xTAx=∑i=1n∑j=1naijxixjf(x) = x^TAx = \sum\limi..._二次型极大值点
文章浏览阅读2.3w次,点赞2次,收藏15次。昨天买了个新3刷了OPenWrt固件,使用了一周体验了下真香。什么是软路由?答:传统路由器只能进行简单的上网设置内存小不支持定制,但是软路由有大内存可以在里面安装各种各样的软件来进行自定义操作,不仅仅可以拥有传统路由器的上网功能也可以拥有,类似于在路由器里面装一个虚拟机比如Centos或者安装一个NAS以及各种黑科技的操作,所以我为啥不花一个传统路由器的钱来购买一个很舒服的软路由呢?因..._openwrt 可道云
文章浏览阅读5k次,点赞2次,收藏35次。一、实验目的1、初步掌握Wireshark的使用方法,熟悉其基本设置,尤其是Capture Filter和Display Filter 的使用。2、通过对Wireshark抓包实例进行分析,实现捕捉DHCP、ARP、FTP、HTTP等协议的数据包;理解TCP/IP协议中多种协议的数据结构、会话连接建立和终止的过程;了解FTP、HTTP等协议明文传输特性,增强安全意识。二、实验原理2..._wireshark嗅探分析
文章浏览阅读7.6k次,点赞3次,收藏23次。测试平台Testin云测试平台是一个基于真实终端设备环境,基于自动化测试技术的7x24云端服务.Testin在云端部署了千余款测试终端,并开放这些智能终端给全球移动开发者进行测试,开发者只需在Testin平台提交自己的App应用,选择需要测试的网络、机型,便可进行在线的自动化测试,无须人工干预,自动输出含错误、报警等测试日志、UI截图、内存/CPU/启动时间等在内的标准测试报告。三大特性1..._pad云测试平台
文章浏览阅读8.8k次。import java.math.BigDecimal;import java.math.BigInteger;import java.nio.ByteBuffer;import java.nio.charset.Charset;import java.text.NumberFormat;import java.util.Set;import com.ruoyi.common.util..._convertbytebuffer
文章浏览阅读361次。$(function() { /** * 自动生成分页 * * @data 为分页实体 * @suffix 分页标签后缀 * @pageTargetId 分页打印的目标ID * @statisticsTargetId 统计数据的目标ID * */ function printPage(data, suffix, pageTargetId, statisti_javascript 通用 工具
文章浏览阅读6.1k次,点赞5次,收藏49次。6D姿态估计的理解及BOP数据集参数说明一、6D姿态姿态估计在百度上搜会出现“姿态估计问题就是确定某一三维目标物体的方位指向问题”的解释,但是具体来讲确定某一三维目标物体的方位指向问题到底是什么意思呢?首先,6D表示6个自由度,3个自由度的位移(Translation)和3个自由度的空间旋转(Rotation)..._位姿估计数据集
文章浏览阅读356次。看板(Kanban)最初是由日本丰田公司(Toyota)研发的,它在日语里意思是“信号卡片”。这种方法依赖于看板卡片,表明重新订购某些物资的需求。看板被视为精益生产系统,因其避免了时间和资源浪费。简而言之,看板让企业“至精至简”。许多项目经理将看板的概念连同敏捷方法一块使用。看板的妙处在于“按需”生产,客户通过生产设备订购“拉动式”产品。这一理念取代了传统的方法——根据预计需求生产大量产品并将产品储存起来。在软件开发的背景下,这种客户需求驱动系统的理念与敏捷非常契合。敏捷项目管理把原先.._销售管理如何应用敏捷看板
文章浏览阅读1k次。安装Homebrew如果已经安装可以忽略,没有安装的请查看小明之前写好的文章 mac安装homebrew使用Homebrew安装Redis (1) 安装命令 brew install redis (2) 查看软件安装及配置文件位置 Homebrew安装的软件会默认在/usr/local/Cellar/路径下;redis的配置文件redis.conf存放在/usr/local/etc路径下。 (3)..._mac 本地启动redis
文章浏览阅读1.8k次,点赞4次,收藏18次。数据统计描述输入两个整数,在这两个整数组成的闭区间范围内生成100个随机整数,并统计出现数据的次数。为满足评测需要,程序必须使用seed函数将随机种子设为10,并使用randint函数生成随机数。_python数据统计代码(字典)