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.........完整代码请登录后点击上方下载按钮下载查看