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) {},
});
相關文章
- iOS Animation建立及使用iOS
- Vue中使用animation.cssVueCSS
- 微信小程式Animation動畫的使用微信小程式動畫
- Flutter Animation(1)動畫的簡單使用Flutter動畫
- transform,transition,animation 的混合使用——結業篇ORM
- Spiral animation
- 在React中寫一個Animation元件,為元件進入和離開加上動畫/過度React元件動畫
- 終於不再對transition和animation,傻傻分不清楚了 --vue中使用transition和animationVue
- animation、transition、transform的區別ORM
- CSS transition animation的使用(內含貝賽爾曲線詳解)CSS
- livewire 元件的使用元件
- CSS animation 動畫CSS動畫
- Animation Spinner【專案】
- Core Animation總結
- Core Animation 之 ViewView
- css3中的animation屬性CSSS3
- HarmonyOS:Navigation元件的使用Navigation元件
- TornadoFx的TableView元件使用View元件
- Container容器元件的使用AI元件
- Flutter動畫之AnimationFlutter動畫
- [譯]A Simple CSS Animation TutorialCSS
- animation與transition 區別
- Android Animation 執行原理Android
- 不可不知的WPF動畫(Animation)動畫
- 強大的CSS動畫:Transition與AnimationCSS動畫
- 有關 animation 動畫你要知道的動畫
- 設計模式(三)Animation中的策略模式設計模式
- react複合元件的使用React元件
- Vue 元件的使用語法Vue元件
- React高階元件的使用React元件
- 拖拽元件:React DnD 的使用元件React
- CSS3 animation 練習CSSS3
- 核心動畫(Core Animation Programming)動畫
- Core Animation Programming Guide Mind MappingGUIIDEAPP
- CSS3 animation 動畫CSSS3動畫
- CSS3 animation-directionCSSS3
- CSS3 animation-delayCSSS3
- CSS3 animation-durationCSSS3