用js+css实现帧动画播放的功能

_

为了确保点击时候播放

_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;
		}
	},