zoukankan      html  css  js  c++  java
  • 【咸鱼教程】震屏效果

    教程目录
    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

  • 相关阅读:
    【ybt金牌导航4-7-3】【luogu P3437】三维俄罗斯方块 / TET-Tetris 3D
    【ybt金牌导航4-6-6】【luogu P2617】【ybt金牌导航4-7-4】动态排名 / Dynamic Rankings
    【ybt金牌导航4-6-4】【luogu P3402】可持久化并查集
    【luogu P5055】【模板】可持久化文艺平衡树
    【ybt金牌导航4-6-2】【luogu P3835】可持久化平衡树
    【luogu P4278】【ybt金牌导航4-5-2】带插入区间K小值(树套树做法)
    【luogu P3369】普通平衡树(fhq Treap 做法)
    【ybt金牌导航4-4-2】【luogu P2042】维护数列(fhq Treap 做法)
    【luogu P3369】普通平衡树(Treap 做法)
    匿名函数
  • 原文地址:https://www.cnblogs.com/gamedaybyday/p/9219922.html
Copyright © 2011-2022 走看看