cocoscreator基础-（⼗）cc.Animation动画组件的使⽤
1: 掌握动画编辑器与cc.Animation组件的使⽤;
// 节点、动画、动画⽂件的关系
node : {Animation : {AnimationClip}}
动画编辑器使⽤
1: 创建⼀个节点;
2: 为这个节点添加⼀个动画组件 cc.Animation;
3: 为这个动画组件新建⼀个动画⽂件 --> AnimationClip对象;
4: cc.Animation 控制⾯板的属性:
  (1): default Anim Clip: 默认的播放的动画剪辑;
  (2): Clips: 动画剪辑的数组集合
  (3): Play onLoad: 是否在加载的时候开始播放;
动画编辑器的原理
1: 时间轴
2: 在不同的时刻，调整节点以及孩⼦节点的不同的属性的值，然后创建出补间动画;
3: 节点调动画的属性:
  位置, 缩放, 旋转, ⼤⼩, 颜⾊, 透明度, 锚点, 扭曲, ...;
4: 动画编辑器也可以调节节点的⼦节点
5: 动画参数:
  Simaple: 1秒多少帧, Speed: 速度，播放速度，越⼩越慢,
  wrapMode: Normal, Loop, PingPong, Reverse, Loop Reverse, PingPongReverse;
6: 动画
  (1)添加动画属性
  (2)添加关键帧/删除关键帧，选到关键帧，在属性编辑器上编辑和修改;
  (3)编辑补间动画曲线路径;
Animation组件
1: 代码中获得cc.Animation组件:
  编辑器关联;
  代码获取组件;
2: Animation组件主要的⽅法:
  play([name], [start_time]), 播放指定的动画，如果没有制定就播放默认的动画;
  playAdditive: 与play⼀样，但是不会停⽌当前播放的动画;
  stop([name]): 停⽌指定的动画，如果没有指定名字就停⽌当前播放的动画;
  pause/resume: 暂停唤醒动画;
  getClips: 返回组件⾥⾯带的AnimationClip数组
3: Animation重要的属性:
  defaultClip: 默认的动画剪辑;
  currentClip: 当前播放的动画剪辑;
4: Animation播放事件: 动画组件对象来监听on，不是节点
  play : 开始播放时 stop : 停⽌播放时 pause : 暂停播放时 resume : 恢复播放时
  lastframe : 假如动画循环次数⼤于 1，当动画播放到最后⼀帧时 finished : 动画播放完成时
动画⾥⾯调⽤代码函数
1：插⼊⼀个时间到动画⾥⾯;
2: 编辑这个时间触发的函数: 名字 + 参数
3: 遍历当前动画组件所挂节点上⾯所有的脚本或组件，根据这个名字来触发函数;html animation属性
  动画编辑器⾥插⼊test_anima_event事件，动画节点挂的节点的脚本⾥就要有对应名字的⽅法才能触发(这种⽅法容易不知道事件的来源，不推荐)
4: 要慎⽤，代码和动画之间不易太多的调⽤;
cc.Class({
extends: cc.Component,
properties: {
// foo: {
//    default: null,      // The default value will be used only when the component attaching
//                          to a node for the first time
//    url: cc.Texture2D,  // optional, default is typeof default
//    serializable: true, // optional, default is true
//    visible: true,      // optional, default is true
//    displayName: 'Foo', // optional
//    readonly: false,    // optional, default is false
// },
// ...
// 编辑器⾥⾯绑定
anim: {
type: cc.Animation,
default: null,
},
},
/
/ use this for initialization
onLoad: function () {
var anim_node = ChildByName("anim");
this.anim_com = Component(cc.Animation);
// 是动画组件cc.Animation组件实例来监听;
this.("play", function() {
console.log("begin play");
}.bind(this), this);
},
start: function() {
// this.anim_com.play("anim_class");
this.anim_com.play(); // 播放的是defalut clip指向的动画clip
},
// called every frame, uncomment this function to activate update callback // update: function (dt) {
// },
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。