当前位置:网站首页>cocos 动画制作和手动控制动画播放

cocos 动画制作和手动控制动画播放

2020-12-06 22:49:31 阿豪boy

http://docs.cocos.com/creator/manual/zh/animation/

支持一些事件, 比如播放完成

http://docs.cocos.com/creator/manual/zh/animation/scripting-animation.html

效果: 手动控制, 并且能够恢复到初始状态和快速执行完毕

 

Animation 对一个动画进行播放的时候会判断这个动画之前的播放状态来进行下一步操作。如果动画处于:

  • 停止 状态,则 Animation 会直接重新播放这个动画
  • 暂停 状态,则 Animation 会恢复动画的播放,并从当前时间继续播放下去
  • 播放 状态,则 Animation 会先停止这个动画,再重新播放动画
// 使用 playAdditive 播放动画时,不会停止其他动画的播放。如果还有其他动画正在播放,则同时会有多个动画进行播放
anim.playAdditive('rotation-anim');

设置播放速度

var anim = this.getComponent(cc.Animation);
var animState = anim.play('test');

// 使动画播放速度加速
animState.speed = 2;

// 使动画播放速度减速
animState.speed = 0.5;

动态创建

var animation = this.node.getComponent(cc.Animation);
// frames 这是一个 SpriteFrame 的数组.
var clip = cc.AnimationClip.createWithSpriteFrames(frames, 17);
clip.name = "anim_run";
clip.wrapMode = cc.WrapMode.Loop;

// 添加帧事件
clip.events.push({
    frame: 1,               // 准确的时间,以秒为单位。这里表示将在动画播放到 1s 时触发事件
    func: "frameEvent",     // 回调函数名称
    params: [1, "hello"]    // 回调参数
});

animation.addClip(clip);
animation.play('anim_run');

 

 

搭建布局, 从左到右移动, 并缩放变化

 

添加组件, 新建文件

 

设置帧动画, 注意把时间线拖到需要设置数值的节点上再设置, 设置完成可以点击播放预览效果, 可以对父节点下的所有子节点的属性设置帧动画

 

 

const { ccclass, property } = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {
  @property(cc.Button)
  playBtn: cc.Button = null;
  @property(cc.Button)
  pauseBtn: cc.Button = null;
  @property(cc.Button)
  resetBtn: cc.Button = null;
  @property(cc.Button)
  resumeBtn: cc.Button = null;
  @property(cc.Button)
  endBtn: cc.Button = null;
  @property(cc.Node)
  box: cc.Node = null;

  onLoad() {
    const anime = this.box.getComponent(cc.Animation);
    const move = anime.getClips().find((i) => i.name === "move");
    console.log(anime, move);
    this.playBtn.node.on(cc.Node.EventType.MOUSE_DOWN, () => {
      // 开始时间, 以秒为单位
      anime.play("move", 0);
    });
    this.pauseBtn.node.on(cc.Node.EventType.MOUSE_DOWN, () => {
      anime.pause("move");
    });
    this.resetBtn.node.on(cc.Node.EventType.MOUSE_DOWN, () => {
      anime.setCurrentTime(0, "move");
      // 也可以用play, 但一定记得stop
      anime.sample("move");
      //   anime.play("move");
      anime.stop();
    });
    this.resumeBtn.node.on(cc.Node.EventType.MOUSE_DOWN, () => {
      anime.resume("move");
    });
    this.endBtn.node.on(cc.Node.EventType.MOUSE_DOWN, () => {
      console.log("end", move.duration);
      anime.setCurrentTime(move.duration, "move");
      anime.sample("move");
      //   anime.play("move");
      anime.stop();
    });
  }
}

 

版权声明
本文为[阿豪boy]所创,转载请带上原文链接,感谢
https://my.oschina.net/ahaoboy/blog/4777142