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

  • 相关阅读:
    java线程上
    java常用类
    java面向对象4
    java 面向对象三
    java面向对象下
    java面向对象
    java基础下
    Java之Stream流
    JAVA泛型
    英语
  • 原文地址:https://www.cnblogs.com/gamedaybyday/p/9219922.html
Copyright © 2011-2022 走看看