[LayaAir 1.0]简单的震屏效果

今天分享一下开发时用到的特效:震屏效果!在一些重要事件发生时,为了给玩家一种震憾的感觉,屏幕抖动一下。
游戏引擎: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即为需要抖动的视图
再配合下手机的震动(自定义震动----也是我写的),效果还是不错的!
欢迎扫下我的小游戏,体验下效果!(游戏结束时就会有震屏效果)
 
已邀请:

Aar0n

赞同来自:

感谢分享~!~!

要回复问题请先

商务合作
商务合作