Skip to content

CanTK支持Promise API

ChenLin edited this page Nov 19, 2015 · 1 revision

在ES6之前Promisecallback hell的良好解决方案。cantk实现了Promise的核心部分API,并且默认把几个游戏编程过程中常用的API用Promise包装起来。


live demo: 几个常用API的Promise包装

    1. 基础动画函数
UIElement.prototype.animate = function(config, onAnimationDone, onAnimationStep, actionWhenBusy) {
	var deferred = Deferred();

	this.doAnimate(config, function() {
		if(typeof onAnimationDone === 'function') {
			onAnimationDone.apply(null, arguments);
		}
		deferred.resolve();
	}, function() {
		if(typeof onAnimationStep === 'function') {
			return onAnimationStep.apply(null, arguments);
		}
	}, actionWhenBusy);

	return deferred.promise;
}

调用示例:

var uiIcon = win.find("ui-icon-general");
var oldY = uiIcon.y;
uiIcon.animate({yEnd: oldY - 200, duration: 1000, interpolator: 'dec'}, animateOneDone, animateOneStep)
.then(function() {
    return uiIcon.animate({yEnd: oldY, duration: 1000, interpolator: 'accelerate'}, animateTwoDone, animateTwoStep);
})
.then(function() {
    console.debug('all animation play done');
})
.catch(function(err) {
    console.debug('animation catch error') ;
});
    1. 骨骼动画播放函数
UISkeletonAnimation.prototype.play = function(animationName, repeatTimes, onDone, onOneCycle, useFadeIn, duration) {
	var deferred = Deferred();

	this.doPlay(animationName, repeatTimes, function() {
		if(typeof onDone === 'function') {
			onDone();
		}
		deferred.resolve();
	}, function() {
		if(typeof onOneCycle === 'function') {
			onOneCycle();
		}
	}, useFadeIn, duration);

	return deferred.promise;
};

调用示例:

//批量播放

Promise.all([uiDB2.play('run', 3, onPlayRunDone, onPlayRunStep),  uiDB3.play('happy', 4, onPlayHappyDone, onPlayHappyStep)])
.then(function() {
     console.debug('all animation play done');
})
.catch(function(err) {
    
});

//轮流播放
uiDB.play('run', 1, onRunPlayDone).then(function(data) {
    return uiDB.play('happy', 1, onHappyPlayDone);
}).then(function() {
  console.debug('play done');  
}).catch(function(err) {
  console.debug('catch Error');  
});
    1. 帧动画
UIFrameAnimation.prototype.playSequence = function(sequence, repeatTimes, onDone, onOneCycle) {
	this.deferred = Deferred();

	var n = this.frames.length;
	if(!n || !sequence || !sequence.length) {
		return;
	}

	this.current = 0;
	this.playing = true;
	this.onDone = onDone;
	this.onOneCycle = onOneCycle;
	this.runningSequence = sequence;
	this.nextUpdateTime = Date.now();
	this.repeatTimes = repeatTimes ? repeatTimes : 0xFFFFFFFF;

	return this.deferred.promise;
}

调用示例:

uiFrame.play('fire_1', 1)
.then(function() {
    return uiFrame.play('fire_2', 1);
})
.then(function() {
    return uiFrame.play('fire_1', 3);
})
.then(function() {
    console.debug('frame animate play done');
})
.catch(function(err) {
    console.debug('frame animate play catch error');
});

    1. 如果以上函数还不能满足你的需求,可以自行封装。
    1. 如果对promise本身不够了解可以来这里看看代码Promise 实现
    1. 传送门: promise A+ spec
Clone this wiki locally