当前位置:网站首页>Cocos animation and manual control of animation playback

Cocos animation and manual control of animation playback

2020-12-06 22:49:31 Ah ho boy

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

Support some events , For example, the playback is complete

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

effect : Manual control , And it can restore to the initial state and complete the execution quickly

 

Animation When playing an animation, it will judge the playback state before the animation to carry out the next operation . If the animation is in :

  • stop it   state , be Animation This animation will be replayed directly
  • Pause   state , be Animation The animation will resume playing , And continue playing from the current time
  • Play   state , be Animation Will stop the animation first , Play the animation again
//  Use  playAdditive  When you play the animation , It won't stop playing other animations . If there are other animations playing , There will be multiple animations playing at the same time 
anim.playAdditive('rotation-anim');

Set playback speed

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

//  Speed up animation playback 
animState.speed = 2;

//  Slow down the animation playback speed 
animState.speed = 0.5;

Dynamically create

var animation = this.node.getComponent(cc.Animation);
// frames  This is a  SpriteFrame  Array of .
var clip = cc.AnimationClip.createWithSpriteFrames(frames, 17);
clip.name = "anim_run";
clip.wrapMode = cc.WrapMode.Loop;

//  Add frame event 
clip.events.push({
    frame: 1,               //  The exact time , In seconds . This means that the animation will play to  1s  Trigger event 
    func: "frameEvent",     //  Callback function name 
    params: [1, "hello"]    //  Callback Arguments 
});

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

 

 

Build layout , Move from left to right , And zoom and change

 

Add the component , New file

 

Animating frames , Pay attention to drag the timeline to the node where the value needs to be set, and then set it , After setting, you can click to preview the effect , You can frame the attributes of all the child nodes under the parent node

 

 

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, () => {
      //  Starting time ,  In seconds 
      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");
      //  It can also be used. play,  But I must remember 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();
    });
  }
}

 

版权声明
本文为[Ah ho boy]所创,转载请带上原文链接,感谢
https://chowdera.com/2020/12/20201206224359826m.html