【咸鱼教程】震屏效果

教程目录
1 演示效果
2 实现原理
3 Demo

1 演示效果
主要参考9ria帖子，年代久远，忘了。
另可参考 jquery+css3实现元素颤抖特效

PC演示地址

手机扫码：

2 实现原理
定时器，每隔一段时间改变震动对象的x，y。可追加rotation和alpha。
使用方法

[C#] 纯文本查看复制代码

1 2	`震动目标obj，1秒内震动10次，震动最大距离10` `ShakeTool.getInstance().shakeObj(obj, 1, 10, 10);`

工具源码

[C#] 纯文本查看复制代码

/**

* 震动工具

* @author chenkai

* [url=home.php?mod=space&uid=81950]@since[/url] 2017/5/24

*

* Example:

* 震动目标obj，1秒内震动10次，震动最大距离10

* ShakeTool.getInstance().shakeObj(obj, 1, 10, 10);

*/

class ShakeTool {

private static instance:ShakeTool; //单例

private initX:number; //初始位置

private initY: number;

private target:egret.DisplayObject; //震动目标

private maxDis: number; //震动距离

private count: number = 0; //计时器次数

private rate: number; //一秒震动次数

private timer:egret.Timer = new egret.Timer(1000);

public static getInstance():ShakeTool{

if(this.instance == null){

this.instance = new ShakeTool();

}

return this.instance;

}

/**

* 震动显示对象

* @param target 震动目标对象

* @param time 震动持续时长（秒）

* @param rate 震动频率(一秒震动多少次)

* @param maxDis 震动最大距离

*/

public shakeObj(target: egret.DisplayObject,time: number,rate: number,maxDis: number): void {

this.target = target;

this.initX = target.x;

this.initY = target.y;

this.maxDis = maxDis;

this.count = time * rate;

this.rate = rate;

this.timer.delay = 1000/rate;

this.timer.repeatCount = this.count;

this.timer.addEventListener(egret.TimerEvent.TIMER,this.shaking, this);

this.timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE, this.shakeComplete, this);

this.timer.reset();

this.timer.start();

}

private shaking(): void {

egret.Tween.removeTweens(this.target);

this.target.x = this.initX - this.maxDis + Math.random()*this.maxDis*2;

this.target.y = this.initY - this.maxDis + Math.random()*this.maxDis*2;

egret.Tween.get(this.target).to({x:this.initX, y:this.initY},999/this.rate);

}

private shakeComplete(): void {

if(this.target){

egret.Tween.removeTweens(this.target);

this.target.x = this.initX;

this.target.y = this.initY;

}

this.timer.removeEventListener(egret.TimerEvent.TIMER,this.shaking,this);

this.timer.removeEventListener(egret.TimerEvent.TIMER_COMPLETE,this.shakeComplete,this);

}

/**停止震动 */

public stop(){

this.shakeComplete();

}

3 Demo

转载于:https://www.cnblogs.com/gamedaybyday/p/9219922.html

【咸鱼教程】震屏效果相关推荐

震屏效果java_CocosCreator 实现手机震动效果
IOS 震动的写法#import @interface JSC : NSObject + (void) ddd1; + (void) ddd2; + (void) ddd3; + (void) ddd ...
fullPage教程 -- 整屏滚动效果插件 fullpage详解
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:fullPage教程 -- 整屏滚动效果插件 fullpage详解 1. ...
Leaflet中使用Leaflet.fullscreen插件实现全屏效果
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样实现地图全屏效果. ...
项目实训（十三）——FPS游戏射击反馈震屏及UI子弹数量
一.前言本篇博客记录的内容为上篇的延续,将介绍完成的射击反馈震屏及UI子弹数量等工作内容.这里实现的是开枪以后抖动屏幕的效果以及子弹数在游戏界面的UI显示. 至此,FPS游戏的单机开发部分就已经大致 ...
android 点击图片动画效果,Android仿微信图片点击全屏效果
废话不多说,先看下Android图片点击全屏效果: 先是微信的再是模仿的先说下实现原理,再一步步分析这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Inten ...
html视频分屏插件,视频分屏效果制作可在同一个画面播放多个视频的操作步骤详解...
我们在看电影电视剧的时候,当剧情是两个角色在相同时间不同地点发生着什么事情的时候,在视频画面就会出现分屏效果,就是在同一个画面播放着两个视频的效果,小编觉得这个效果很有意思,而且实现起来不难,所以今天 ...
unity实现游戏战斗震屏
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言总结前言大部分战斗类游戏都会有震屏需求,震屏的简单实现方法,包括随机震屏,横向震屏,纵向震屏 using Syst ...
AE脚本:像素破损撕拉花屏效果Datamosh
想要给您的视频添加花屏故障效果吗?Aescripts Datamosh for mac这个AE脚本制作出来的像素破损花屏效果就像是视频太久远发生了花屏故障一样,datamosh脚本是一款在After ...
[Cocos2d-x]视差滚屏效果的实现
视差滚屏效果的实现: 我们在做IOS游戏开发的时候,经常会遇到那种屏幕动的效果,比如跑酷类的游戏,就这这种效果的典型应用. 效果图: 核心代码: bool HelloWorld::init() { / ...

【咸鱼教程】震屏效果

【咸鱼教程】震屏效果相关推荐

最新文章

热门文章