jquery实现水面水泡波动动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：jquery实现水面水泡波动动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>




</head>

<body>

    <canvas id="world"><p class="noCanvas">You need a <a href="https://www.google.com/chrome">modern browser</a> to view this.</p></canvas>
    <script>
        /**
                 * 
                 */
                function Wave() {
                        
                        /** The current dimensions of the screen (updated on resize) */
                        var WIDTH = window.innerWidth;
                        var HEIGHT = window.innerHeight;
                        
                        /** Wave settings */
                        var DENSITY = .75;
                        var FRICTION = 1.14;
                        var MOUSE_PULL = 0.09; // The strength at which the mouse pulls particles within the AOE
                        var AOE = 200; // Area of effect for mouse pull
                        var DETAIL = Math.round( WIDTH / 60 ); // The number of particles used to build up the wave
                        var WATER_DENSITY = 1.07;
                        var AIR_DENSITY = 1.02;
                        var TWITCH_INTERVAL = 2000; // The interval between random impulses being inserted into the wave to keep it moving
                        
                        /** Twitter interaction settings */
                        var TWITTER_QUERY = 'water'; // The search term for tweets
                        var TWEETS_PER_PAGE = 20; // The number of tweets that will be fetched per server call
                        var TWEETS_FREQUENCY = 400; // Milliseconds between tweet bubbles being added to the wave
                        
                        /** Bubble settings */
                        var MAX_BUBBLES = 60; // The maximum number of bubbles visible before FIFO is applied
                        var BIG_BUBBLE_DISSOLVE = 20; // How many particles a bubble dissolves into when being clicked
                        var SMALL_BUBBLE_DISSOLVE = 6;
                        
                        /** Couple of counters to keep track of the Twitter interaction */
                        var twitterPolls = 1; // Counts how many times data has been fetched from twitter
                        var twitterRetries = 0; // Counts how many times we fail to retrieve results from twitter
                        var twitterMaxId = 0; // The ID of the oldest tweet that's been downloaded
                        
                        var mouseIsDown, isDownloadingTweets = false;
                        var ms = {x:0, y:0}; // Mouse speed
                        var mp = {x:0, y:0}; // Mouse position
                        
                        var canvas, context, particles, bubbles, tweets;
                        
                        var timeUpdateInterval, tweetUpdateInterval, twitchInterval;
                        
                        /**
                         * Constructor.
                         */
                        this.Initialize = function( canvasID ) {
                                canvas = document.getElementById( canvasID );
                                
                                if (canvas && canvas.getContext) {
                                        context = canvas.getContext('2d');
                                        
                                        particles = [];
                                        tweets = [];
                                        bubbles = [];
                                        
                                        $("body").append('<div id="tweet"></div>');
                                        
                                        // Generate our wave particles
                                        for( var i = 0; i < DETAIL+1; i++ ) {
                                                particles.push( { 
                                                        x: WIDTH / (DETAIL-4) * (i-2), // Pad by two particles on each side
                                                        y: HEIGHT*.5,
                                                        original: {x: 0, y: HEIGHT * .5},
                                                        velocity: {x: 0, y: Math.random()*3}, // Random for some initial movement in the wave
                                                        force: {x: 0, y: 0},
                                                        mass: 10
                                                } );
                                        }
                                        
                                        $(canvas).mousemove(MouseMove);
                                        $(canvas).mousedown(MouseDown);
                                        $(canvas).mouseup(MouseUp);
                                        $(window).resize(ResizeCanvas);
                                        
                                        timeUpdateInterval = setInterval( TimeUpdate, 40 );
                                        tweetUpdateInterval = setInterval( CreateBubble, TWEETS_FREQUENCY );
                                        twitchInterval = setInterval( Twitch, TWITCH_INTERVAL );
                                        
                                        DownloadTweets();
                                        CreateBubble();
                                        ResizeCanvas();
                                        
                                }
                        };
                        
                        /**
                         * Stops downloading and showing tweets.
                         */
                        function Terminate( message ) {
                                clearInterval( tweetUpdateInterval );
                                isDownloadingTweets = true;
                                
                                alert( message );
                        }
                        
                        /**
                         * Gets the next tweet in queue. If there are
                         * less than five tweets remaining, download a
                         * new batch.
                         */
                        function GetTweet() {
                                if( tweets.length < 5 && !isDownloadingTweets ) {
                                        DownloadTweets();
                                }
                                
                                if (tweets.length > 0) {
                                        return tweets.shift();
                                }
                        }
                        
                        /**
                         * 
                         */
                        function DownloadTweets() {
                                isDownloadingTweets = true;
                                
                                if( twitterPolls ++ > 20 ) {
                                        Terminate( "That's it. No more tweets for you." );
                                }
                                
                                $.post("search.php", {query: TWITTER_QUERY, max_id: twitterMaxId, rpp: TWEETS_PER_PAGE}, function(xml){
                                        
                                        if( !$('entry',xml) || $('entry',xml).length == 0 ) {
                                                if (twitterRetries++ > 3) {
                                                        Terminate("Oops, Twitter doesn't want to serve us at the moment.");
                                                }
                                        }
                                        
                                        $('entry',xml).each(function(i){
                                                var tweet = {};
                                                tweet.title = $(this).find("title&q.........完整代码请登录后点击上方下载按钮下载查看