本文共 2473 字，大约阅读时间需要 8 分钟。

震屏效果在游戏里使用相当广泛的，特别在被物体撞击的时候，震屏效果能大大提高游戏的真实感。我开始以为实现震屏效果很简单，通过正弦函数去设置场景位置偏移量即可，但真正去做时发现还是有一点点挑战。

1.通过正弦函数去设置场景位置偏移量，只能实现单独的上下/左右/斜线震动，怎么也无法实现其它游戏里那种效果。仔细分析之后才知道，垂直和水平方向分别分别用正弦函数和余弦函数计算偏移量。

var xo = aX * Math.cos(angle);    var yo = aY * Math.sin(angle);

2.提供各种定制参数，以满足不同情况的需要。比如振幅的变化(减弱/增强/增强再减弱)，振动的次数和持续的时间等等。

UIShaker.prototype.setAmplitudeX = function(value) {
       this.amplitudeX = value;    return this;}UIShaker.prototype.setAmplitudeY = function(value) {
       this.amplitudeY = value;    return this;}UIShaker.prototype.setDuration = function(value) {
       this.duration = value;    return this;}UIShaker.prototype.setTimes = function(value) {
       this.times = value;    return this;}UIShaker.prototype.setAmplitudeModifier = function(value) {
       this.amplitudeModifier = value;    return this;}

3.我希望可以让任何一个控件都可以支持震动效果，而不光是整个场景才能震动，同时又不想修改基类UIElement。当然装饰模式是比较好的选择，不过在JS不需要那么麻烦。UIShaker去重载它所在容器的paintSelf函数就行了，UIShaker放到任何一个控件里面，启用UIShaker时就会让这个控件震动，震动完成后自动恢复原状。

UIShaker.prototype.setEnable = function(enable) {
       var parent = this.getParent();    if(!parent || this.enable == enable) {        return this;    }    if(!enable) {        this.enable = enable;        return this;    }    var me = this;    var aX = this.amplitudeX ? this.amplitudeX : 0;    var aY = this.amplitudeY ? this.amplitudeY : 0;    var n = this.times ? this.times : 1;    var duration = this.duration ? this.duration : 200;    var startTime = Date.now();    var oldPaintSelf = parent.paintSelf;    var range = n * 2 * Math.PI;    var am = this.amplitudeModifier;    parent.paintSelf = function(canvas) {
           var dt = (Date.now() - startTime);        if(dt < duration) {            var factor = 1;            var percent = dt/duration;            var angle = range *  percent;            var xo = aX * Math.cos(angle);            var yo = aY * Math.sin(angle);            if(am === "i") {                factor = percent;            }            else if(am === "d") {                factor = (1-percent);            }            else if(am === "i->d") {                factor = 2 * (percent < 0.5 ? percent : (1-percent));            }            xo *= factor;            yo *= factor;            canvas.translate(xo, yo);        }        else {             parent.paintSelf = oldPaintSelf;             me.enable = false;        }        oldPaintSelf.call(parent, canvas);    }    return this;}

在里使用震屏控件非常方便，拖动一个震屏控件到场景中，在特定事件发生时启用它即可，整个过程不需要写一行代码。

震屏控件的完整实现请参考的源码。

转载地址：http://fawkk.baihongyu.com/