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").text();   
        					tweet.content = $(this).find("content").text();   
        					tweet.published = $(this).find("published").text();   
        					tweet.link = $(this).find("link").text();   
        					tweet.authorURI = $(this).find("uri").text();
        					tweet.author = $(this).find("name").text();
        					tweet.author = "@" + tweet.author.slice(0, tweet.author.indexOf(" "));
        					tweet.id = $(this).find("id").text();
        					tweet.id = tweet.id.slice( tweet.id.lastIndexOf(":") + 1 );
        					
        					if( i == $('entry',xml).length - 1 ) {
        						twitterMaxId = parseInt( tweet.id ) - 1;
        					}
        					
        					tweets.push( tweet );
        				});
        				
        				isDownloadingTweets = false;
        				
        			});
        		}
        		
        		/**
        		 * 
        		 */
        		function ShowTweet( bubbleIndex ) {
        			var tweet = GetTweet();
        			var tweetMarkup = tweet.content + "<br/><p class='author'>by: <a href='"+tweet.authorURI+"'>" + tweet.author + "</p>";
        			$("#tweet").hide().html( tweetMarkup ).fadeIn();
        			
        			DissolveBubble( bubbleIndex );
        		}
        		
        		/**
        		 * Inserts a random impulse to keep the wave moving.
        		 * Impulses are only inserted if the mouse is not making
        		 * quick movements.
        		 */
        		function Twitch() {
        			if( ms.x < 6 || ms.y < 6 ) {
        				var forceRange = 5; // -value to +value
        				InsertImpulse( Math.random() * WIDTH, (Math.random()*(forceRange*2)-forceRange ) );
        			}
        		}
        		
        		/**
        		 * Inserts an impulse in the wave at a specific position.
        		 * 
        		 * @param positionX the x coordinate where the impulse
        		 * should be inserted
        		 * @param forceY the force to insert
        		 */
        		function InsertImpulse( positionX, forceY ) {
        			var particle = particles[Math.round( positionX / WIDTH * particles.length )];
        			
        			if( particle ) {
        				particle.force.y += forceY;
        			}
        		}
        		
        		/**
        		 * 
        		 */
        		function TimeUpdate(e) {
        			
        			var gradientFill = context.createLinearGradient(WIDTH*.5,HEIGHT*.2,WIDTH*.5,HEIGHT);
        			gradientFill.addColorStop(0,'#00AABB');
        			gradientFill.addColorStop(1,'rgba(0,200,250,0)');
        			
        			context.clearRect(0, 0, WIDTH, HEIGHT);
        			context.fillStyle = gradientFill;
        			context.beginPath();
      .........完整代码请登录后点击上方下载按钮下载查看