Animation元件的使用
/**
* Author:W
* 動畫元件Animation的使用
*/
cc.Class({
extends: cc.Component,
properties: {
},
// LIFE-CYCLE CALLBACKS:
onLoad () {
this.anim = this.getComponent(cc.Animation);
//動畫狀態事件回撥註冊
this.anim.on('play',this.onPlay,this);
this.anim.on('stop',this.onStop,this);
this.anim.on('lastframe',this.onLastFrame,this);
this.anim.on('finished',this.onFinished,this);
this.anim.on('pause',this.onPause,this);
this.anim.on('resume',this.onResume,this);
},
start () {
},
onDestroy(){
//動畫狀態事件回撥註冊
this.anim.on('play',this.onPlay,this);
this.anim.on('stop',this.onStop,this);
this.anim.on('lastframe',this.onLastFrame,this);
this.anim.on('finished',this.onFinished,this);
this.anim.on('pause',this.onPause,this);
this.anim.on('resume',this.onResume,this);
},
onPlay:function(){},
onStop:function(){},
onLastFrame:function(){},
onFinished:function(){},
onPause:function(){},
onResume:function(){},
//動畫播放
playAni:function(){
//指定動畫檔案播放
anim.play('Idle');
// //指定從動畫檔案的1s開始播放
// anim.play('Idle',1);
// //如果設定了defaultclip動畫片段時,則預設播放該動畫
// anim.play();
},
//動畫播放:【複合動畫:支援同時播放多個動畫檔案】
playAdditiveAni:function(){
this.anim.playAdditive('Idle');
this.anim.playAdditive('Scale');
},
//暫停播放
pauseAni:function(){
//暫停Idle動畫
this.anim.pause('Idle');
// //暫停所有動畫
// this.anim.pause();
},
//恢復播放
resumeAni:function(){
//恢復Idle動畫播放
this.anim.resume('Idle');
// //恢復所有動畫播放
// this.anim.resume();
},
//停止播放
stopAni:function(){
//停止Idle動畫
this.anim.stop('Idle');
// //停止所有動畫
// this.anim.stop();
},
//設定動畫時間
setAniTime:function(){
//設定Idle動畫的播放時間為1s
this.anim.setCurrentTime(1,'Idle');
// //設定所有動畫播放時間為1秒
// this.anim.setCurrentTime(1);
},
//獲取當前播放動畫生成的AnimationState例項,它包含了很多動畫執行的狀態資訊,可以修改設定
setAnimationState:function(){
// //獲取AnimtionState例項方式1
// var animState = this.anim.play('Idle');
//獲取AnimationState例項方式2
var animState = this.anim.getAnimationState('Idle');
//獲取動畫關聯的clip
var clip = animState.clip;
//獲取動畫的名字
var name = animState.name;
//獲取動畫的播放速度
var speed = animState.speed;
//獲取動畫的播放總時長
var duration = animState.duration;
//獲取動畫的播放時間
var time = animState.time;
//獲取動畫的重複次數
var repeatCount = animState.repeatCount;
//獲取動畫的迴圈模式
var wrapMode = animState.wrapMode;
//獲取動畫是否正在播放
var playing = animState.isPlaying;
//獲取動畫是否已經暫停
var paused = animState.isPaused;
//獲取動畫的幀率
var frameRate = animState.frameRate;
//【注意:可以對上述可修改的屬性進行修改】
},
//動畫事件【在編輯動畫時,新增的動畫幀事件】
onAniEvent:function(num,str){
}
// update (dt) {},
});
相關文章
- (二)建立Animation元件和動畫剪輯元件動畫
- 微信小程式Animation動畫的使用微信小程式動畫
- transform,transition,animation的混合使用——初探ORM
- iOS Animation建立及使用iOS
- Flutter Animation(1)動畫的簡單使用Flutter動畫
- transform,transition,animation的混合使用——高手之路ORM
- transform,transition,animation的混合使用——進階ORM
- Vue中使用animation.cssVueCSS
- transform,transition,animation 的混合使用——結業篇ORM
- 在React中寫一個Animation元件,為元件進入和離開加上動畫/過度React元件動畫
- Android Animation 系列——屬性動畫(Property Animation)Android動畫
- 終於不再對transition和animation,傻傻分不清楚了 --vue中使用transition和animationVue
- animation、transition、transform的區別ORM
- CSS animation 動畫CSS動畫
- SVG SMIL AnimationSVG
- SVG animation 動畫SVG動畫
- animation總結
- angularjs animationAngularJS
- Android基礎動畫之Tween Animation和Frame AnimationAndroid動畫
- CSS transition animation的使用(內含貝賽爾曲線詳解)CSS
- POP Animation 和 layoutSubviews 的衝突View
- Access Animation破解的簡要分析
- Animation Spinner【專案】
- Core Animation總結
- Flutter動畫之AnimationFlutter動畫
- Core Animation 之 ViewView
- Animation集合(入門)
- Material Design AnimationMaterial Design
- react router animation exampleReact
- livewire 元件的使用元件
- 強大的CSS動畫:Transition與AnimationCSS動畫
- css3中的animation屬性CSSS3
- 關於Android中Animation的停止Android
- 不可不知的WPF動畫(Animation)動畫
- [譯]A Simple CSS Animation TutorialCSS
- animation與transition 區別
- CSS3 animation 動畫CSSS3動畫
- SVG animation動畫詳解SVG動畫