今天分享一下开发时用到的特效：震屏效果！在一些重要事件发生时，为了给玩家一种震憾的感觉，屏幕抖动一下。

游戏引擎：Laya

开发语言：ts

代码：

/**震屏效果临时变量 */

var vibrateObj = {

        x: 0, y: 0, rotation: 0, view: null

};

/**

* 调用该方法前，请将view的描点设置为中心点

* 震屏效果

* 三个变量：x水平方向  5,y垂直方向  5,rotation旋转角度  10

* @param view

* @param time  持续时间 以毫秒为单位

*/

function vibrateScreen(view: Laya.Sprite, time?: number): void {

    if (vibrateObj.view) {

        Laya.timer.clearAll(vibrateObj);

        //说明上一次的动画还没完成

        vibrateObj.view.x = vibrateObj.x;

        vibrateObj.view.y = vibrateObj.y;

        vibrateObj.view.rotation = vibrateObj.rotation;

    }

    //先清除该对象上的缓和时间

    vibrateObj.x = view.x;

    vibrateObj.y = view.y;

    vibrateObj.rotation = view.rotation;

    vibrateObj.view = view;

//定义参数  

    var count = time ? (time / 10) : 50;    

    var loop = 0;//震动次数  

    var offX;

    var offY;

    var dir = 1;//震动方向。1正，-1反  

    var rotation;

    Laya.timer.loop(10, vibrateObj, function () {

        loop++;

        //随机获取震动方向  

        dir = Math.random() > .5 ? 1 : -1;

        //随机获取X轴移动量  

        offX = Math.random() * 5 * dir + vibrateObj.x;

        //随机获取Y轴移动量  

        offY = Math.random() * 5 * dir * -1 + vibrateObj.y;

        // rotation = Math.random() * 5 * dir + vibrateObj.rotation;

        Laya.Tween.to(view, { x: offX, y: offY, rotation: rotation }, 10, Laya.Ease.linearNone, Laya.Handler.create(vibrateObj, function () {

            if (loop > count) {

                Laya.timer.clearAll(vibrateObj);

                view.x = vibrateObj.x;

                view.y = vibrateObj.y;

                view.rotation = vibrateObj.rotation;

                vibrateObj.view = null;

                return;

            }

        }));

    });

}

使用：

vibrateScreen(view);//view即为需要抖动的视图

再配合下手机的震动（自定义震动----也是我写的），效果还是不错的！

欢迎扫下我的小游戏，体验下效果！（游戏结束时就会有震屏效果)