html5 震动源效果,简单的震屏效果 - layabox问答社区-HTML5引擎社区-LayaAir开发者社区...

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

游戏引擎：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即为需要抖动的视图

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

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