用js+css實現幀動畫播放的功能
阿新 • • 發佈:2019-02-01
_
為了確保點選時候播放
_cancelSelectObject: function (id) { var _this = this; _this._selected = false; if(_this._animate){ _this._animate._play = false; } }, /** * [__selectObject 設定選中和取消方法] * @param {String} id [description] */ __selectObject: function (data){ var _this = this; if(data.id != _this.m_id) { return; } _this._selected = true; if(_this._animate && _this._animate.play && !_this._animate._play ){ _this._animate._play = true; _this._animate.play(0); } },
實現程式碼
__setAnimate: function (data) { var _this = this; if(data.wraperId != _this.m_id) { return; } switch(data.key){ case 'animate': _this._animate = _this._animate || {_speed:1.0}; _this._animate.frames = data.value; var img = _this.m_viewElement.querySelector('#animate'); if(!img) { img = document.createElement('img'); img.setAttribute('draggable', 'false'); img.id = 'animate'; img.style.position = 'absolute'; img.onload = function (event) { eventCenter.raise('NOTIFY_OBJECT_SIZE_CHANGED'); }; _this.m_viewElement.appendChild(img); } _this._animate.play = function(index){ //資料異常時終止播放 if(!_this._animate || !_this._animate.frames || _this._animate.frames.length<1){ return; } //切換到指定幀 var switchFrame = function(index){ var resInfo = gameEditor.getProject().getFileInfoByID(_this._animate.frames[index].resourceID); var url = global.TAG_BASE_URL_RES_HOST + resInfo.resURL.substr(1); img.setAttribute('src', url); } //收到停止命令 if(!_this._animate._play){ //停止播放時回到第一幀 switchFrame(0); return; } //播放到最後一幀時 if(index>=_this._animate.frames.length){ index = 0; var loop = true;//TODO if(!loop){ //如果不迴圈播,回到第一幀並停止播放 _this._animate._play = false; switchFrame(0); return; } } switchFrame(index); var delayTime = _this._animate.frames[index].duration * 1000 / _this._animate._speed; index++; setTimeout(_this._animate._playfunction(index),delayTime); }; _this._animate._playfunction = function(index){ return function(){ if(_this._animate){ _this._animate.play(index); } } }; if (_this._selected) { _this._animate._play = true; _this._animate.play(0); }; break; case 'speed': _this._animate = _this._animate || {_speed:1.0}; _this._animate._speed = data.value; if (_this._animate._speed == 0 ) { //如果速度是0 _this._animate._play = false; }else if (_this._animate._speed > 0) { _this._animate._play = true; _this._animate.play(0); }; break; case 'delete': _this._animate = null; var img = _this.m_viewElement.querySelector('#animate'); if(img) { _this.m_viewElement.removeChild(img); } eventCenter.raise('NOTIFY_OBJECT_SIZE_CHANGED'); break; } },