【咸鱼教程】震屏效果

教程目录
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#] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

/**  * 震动工具  * @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