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

jquery实现水面水泡波动动画效果代码

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