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