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) { 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(); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0