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;
        }
    }
    
    
    
     
  • 相关阅读:
    利用艺术家的整数ID映射将标签转换为向量
    TOMCATserver不写port号、不写项目名訪问项目、虚拟文件夹配置
    一、奇妙插件Tampermonkey的简单安装教程
    三层登录—c#
    MapReduce中combine、partition、shuffle的作用是什么
    代码混淆防止APP被反编译指南
    数据分析思路的套路攻略
    聊一聊数据分析师这个职业
    Android优化之内存优化倒计时篇
    如何实现360度的手游安全防护?网易云易盾专家分享最新实践
  • 原文地址:https://www.cnblogs.com/lijiahui199494/p/5855200.html
Copyright © 2011-2022 走看看