zoukankan      html  css  js  c++  java
  • 面向对象产生随机萤火虫效果

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>随机萤火虫</title>
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                body,html{
                    height: 100%;
                    width: 100%;
                }
                #bg{
                    width: 100%;
                    height: 100%;
                    background: url(img/bg.jpg) no-repeat;
                    background-size: cover;
                }
                img{
                    display: block;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            </style>
        </head>
        <body>
            <script src="js/Tween.js" type="text/javascript" charset="utf-8"></script>
            <div id="bg"></div>
            <script type="text/javascript">
                //构造函数
                function Firefly(){
                    this.oBg = document.getElementById("bg");
                    this.oImg = document.createElement('img');
                }
                //给新创建的萤火虫设置大小、位置
                Firefly.prototype.occur = function(){
                    this.oImg.src = 'img/star.jpg';
                    this.oImg.style.width = this.oWidth + 'px';
                    this.oImg.style.height = this.oWidth + 'px';
                    this.oImg.style.top = this.oTop + 'px';
                    this.oImg.style.left = this.oLeft + 'px';
                    this.oBg.appendChild( this.oImg );
                    return this;
                }
                //获取萤火虫的随机位置、大小
                Firefly.prototype.randomPlace = function(){
                    this.oLeft = this.randomNUm( window.innerWidth - 50 );
                    this.oTop = this.randomNUm( window.innerHeight - 50 );
                    this.oWidth = this.randomNUm(20) + 12;
                    return this;
                }
                //飞行时间控制在5-10秒
                Firefly.prototype.flyTime = function(){    
                    this.oTime = Math.floor( Math.random() * 5 + 5 ) * 1000;
                    return this;
                }
                //调用运动函数使萤火虫飞行
                Firefly.prototype.fly = function(){
                    var This = this;
                    this.oImg.sport( This.oImg , {'top':this.oTop,'left':this.oLeft} , this.oTime ,function(){
                        This.flyTime().occur().randomPlace().fly();
                    } );
                }
                //构造一个范围内的随机数
                Firefly.prototype.randomNUm = function( num ){   
                    return Math.floor( Math.random()*num );
                }
                var fireFly = [];
                for( var i = 0;i<50;i++ )
                {
                    //构造50个萤火虫
                    fireFly[i] = new Firefly();             
                    fireFly[i].randomPlace().flyTime().occur().randomPlace().fly();
                }
            </script>
        </body>
    </html>

    //Tween.js代码
    Object.prototype.sport = function( obj , Json , time , ev , fn ){
        if ( typeof ev == 'undefined' )
        {
            time = time || 400;
            ev = 'linear';
        }
        if ( typeof time == 'string' )
        {
            fn = ev;
            ev = time;
            time = 400;
        }else if ( typeof time == 'number' && typeof ev == 'function' )
        {
            fn = ev;
            ev = 'linear';
        }else if ( typeof time == 'function' )
        {
            fn = time;
            time = 400;
            ev = 'linear';
        }
        var This = this;
        var oB = {};
        for( attr in Json )
        {
            oB[attr] = parseInt( this.getStyle( this , attr ) );
        }
        var oC = {};
        for( attr in Json )
        {
            oC[attr] = Json[attr];
        }
        var startTime = new Date().getTime();
        clearInterval( this.timer );
        obj.timer = setInterval( function(){
            var nowTime = new Date().getTime();
            var time2 = Math.min(nowTime - startTime , time);
            for( attr in Json )    //t,b,c,d
            {
                var oChange = Tween[ev]( time2 , oB[attr] , oC[attr] - oB[attr] , time );
                if( attr == 'opacity' )
                {
                    obj.style[attr] = oChange;
                    obj.style.filter = 'alpha(opacity='+(oChange*100)+')';
                }else{
                    obj.style[attr] = oChange + 'px';
                }
                
            }
            if( time2 == time )
            {
                clearInterval( obj.timer );
                fn && fn( This );
            }
        } ,30 );
    }
    Object.prototype.getStyle = function( obj , att ){
        return obj.currentStyle ? obj.currentStyle[att] : getComputedStyle( obj )[att];
    }
    var Tween = {
        linear: function (t, b, c, d){  //匀速
            return c*t/d + b;
        },
        easeIn: function(t, b, c, d){  //加速曲线
            return c*(t/=d)*t + b;
        },
        easeOut: function(t, b, c, d){  //减速曲线
            return -c *(t/=d)*(t-2) + b;
        },
        easeBoth: function(t, b, c, d){  //加速减速曲线
            if ((t/=d/2) <   1) {
                return c/2*t*t + b;
            }
            return -c/2 * ((--t)*(t-2) - 1) + b;
        },
        easeInStrong: function(t, b, c, d){  //加加速曲线
            return c*(t/=d)*t*t*t + b;
        },
        easeOutStrong: function(t, b, c, d){  //减减速曲线
            return -c * ((t=t/d-1)*t*t*t - 1) + b;
        },
        easeBothStrong: function(t, b, c, d){  //加加速减减速曲线
            if ((t/=d/2) < 1) {
                return c/2*t*t*t*t + b;
            }
            return -c/2 * ((t-=  2)*t*t*t - 2) + b;
        },
        elasticIn: function(t, b, c, d, a, p){  //正弦衰减曲线(弹动渐入)
            if (t === 0) { 
                return b; 
            }
            if ( (t /= d) == 1 ) {
                return b+c; 
            }
            if (!p) {
                p=d*0.3; 
            }
            if (!a || a < Math.abs(c)) {
                a = c; 
                var s = p/4;
            } else {
                var s = p/(2*Math.PI) * Math.asin (c/a);
            }
            return -(a*Math.pow(2,10*(t-=  1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        },
        elasticOut: function(t, b, c, d, a, p){    //正弦增强曲线(弹动渐出)
            if (t === 0) {
                return b;
            }
            if ( (t /= d) == 1 ) {
                return b+c;
            }
            if (!p) {
                p=d*0.3;
            }
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else {
                var s = p/(2*Math.PI) * Math.asin (c/a);
            }
            return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
        },    
        elasticBoth: function(t, b, c, d, a, p){
            if (t === 0) {
                return b;
            }
            if ( (t /= d/2) == 2 ) {
                return b+c;
            }
            if (!p) {
                p = d*(0.3*1.5);
            }
            if ( !a || a < Math.abs(c) ) {
                a = c; 
                var s = p/4;
            }
            else {
                var s = p/(2*Math.PI) * Math.asin (c/a);
            }
            if (t < 1) {
                return - 0.5*(a*Math.pow(2,10*(t-=  1)) * 
                        Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
            }
            return a*Math.pow(2,-10*(t-=  1)) * 
                    Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
        },
        backIn: function(t, b, c, d, s){     //回退加速(回退渐入)
            if (typeof s == 'undefined') {
               s =   1.70158;
            }
            return c*(t/=d)*t*((s+1)*t - s) + b;
        },
        backOut: function(t, b, c, d, s){
            if (typeof s == 'undefined') {
                s =   3.70158;  //回缩的距离
            }
            return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
        }, 
        backBoth: function(t, b, c, d, s){
            if (typeof s == 'undefined') {
                s =   1.70158; 
            }
            if ((t /= d/2 ) < 1) {
                return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
            }
            return c/2*((t-=  2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
        },
        bounceIn: function(t, b, c, d){    //弹球减振(弹球渐出)
            return c - Tween['bounceOut'](d-t, 0, c, d) + b;
        },       
        bounceOut: function(t, b, c, d){
            if ((t/=d) < (1/2.75)) {
                return c*(7.5625*t*t) + b;
            } else if (t < (2/2.75)) {
                return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
            } else if (t < (2.5/2.75)) {
                return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
            }
            return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
        },      
        bounceBoth: function(t, b, c, d){
            if (t < d/2) {
                return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
            }
            return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
        }
    }
    
    
    
     
  • 相关阅读:
    服务部署 RPC vs RESTful
    模拟浏览器之从 Selenium 到splinter
    windows程序设计 vs2012 新建win32项目
    ubuntu python 安装numpy,scipy.pandas.....
    vmvare 将主机的文件复制到虚拟机系统中 安装WMware tools
    ubuntu 修改root密码
    python 定义类 简单使用
    python 定义函数 两个文件调用函数
    python 定义函数 调用函数
    python windows 安装gensim
  • 原文地址:https://www.cnblogs.com/lijiahui199494/p/5855200.html
Copyright © 2011-2022 走看看