sketch实现线条添加受力点波动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：sketch实现线条添加受力点波动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
	<head>

		<meta charset="utf-8">

<style>
    

/*********************************************
 * GLOBAL
 *********************************************/

body, html {
	overflow: hidden;
	font-family: Helvetica, Arial, sans-serif;
	color: #fff;
	font-size: 11px;
	background: #111;
	height: 100%;

	-webkit-user-select: none;
}

.main-container {
	background: #111;
}

* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

/*********************************************
 * EXPERIMENT STYLES
 *********************************************/

#wrapper {
	position: absolute;
	
	font-size: 12px;
	color: #f4f4f4;

	cursor: crosshair;
}

#wrapper canvas {
	float: left;

	background: #111;
	border: 1px solid #222;
	border-radius: 2px;
	
	box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}

#wrapper .instructions {
	display: block;
	position: absolute;
	top: 12px;
	width: 100%;
	text-align: center;
	color: #666;

	-webkit-transition: all .12s ease;
	   -moz-transition: all .12s ease;
	    -ms-transition: all .12s ease;
	     -o-transition: all .12s ease;
	        transition: all .12s ease;
}

#wrapper .instructions em {
	color: #999;
}

</style>

		<link href='https://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>

	</head>
	<body>

		<div class="main-container">

			<div id="wrapper" class="empty">
				<span class="instructions">
					<em>Click and drag</em> to add nodes.&nbsp; <em>Space</em> to reset.&nbsp; Reduce the browser window size if it's slow.&nbsp; <em>Style</em>:
					<select class="styles">
						<option value="diagonal">Diagonal</option>
						<option value="circle">Circle</option>
						<option value="grid">Grid</option>
						<option value="cross">Cross</option>
						<option value="none">None</option>
					</select>
				</span>
			</div>

		</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/sketch.min.js"></script>
		<script>
		    /**
 * 
 */
var Capabilities = {
	isOnline: function() {
		return navigator.onLine;
	},
	
	isTouchDevice: function() {
		return navigator.userAgent.match( /(iphone|ipad|ipod|android)/gi );
	},
	
	suportsLocalStorage: function() {
		return ('localStorage' in window) && window['localStorage'] !== null;
	}
};

/**
 * Defines a 2D position.
 */
function Point( x, y ) {
	this.x = x || 0; 
	this.y = y || 0;
}

Point.prototype.distanceTo = function( x, y ) {
	var dx = x-this.x;
	var dy = y-this.y;
	return Math.sqrt(dx*dx + dy*dy);
};

Point.prototype.clonePosition = function() {
	return { x: this.x, y: this.y };
};

Point.prototype.interpolate = function( x, y, amp ) {
	this.x += ( x - this.x ) * amp;
	this.y += ( y - this.y ) * amp;
};

/**
 * Defines of a rectangular region.
 */
function Region() {
	this.left = 999999; 
	this.top = 999999; 
	this.right = 0; 
	this.bottom = 0;
}

Region.prototype.reset = function() {
	this.left = 999999; 
	this.top = 999999; 
	this.right = 0; 
	this.bottom = 0; 
};

Region.prototype.inflate = function( x, y ) {
	this.left = Math.min(this.left, x);
	this.top = Math.min(this.top, y);
	this.right = Math.max(this.right, x);
	this.bottom = Math.max(this.bottom, y);
};

Region.prototype.expand = function( x, y ) {
	this.left -= x;
	this.top -= y;
	this.right += x;
	this.bottom += y;
};

Region.prototype.contains = function( x, y ) {
	return x > this.left && x < this.right && y > this.top && y < this.bottom;
};

Region.prototype.size = function() {
	return ( ( this.right - this.left ) + ( this.bottom - this.top ) ) / 2;
};

Region.prototype.center = function() {
	return new Point( this.left + (this.right - this.left) / 2, this.top + (this.bottom - this.top) / 2 );
};

Region.prototype.toRectangle = function() {
	return { x: this.left, y: this.top, width: this.right - this.left, height: this.bottom - this.top };
};



// shim layer with setTimeout fallback from http://paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function(/* function */ callback, /* DOMElement */ element){
            window.setTimeout(callback, 1000 / 60);
          };
})();


		</script>
		<script>
		    
/**
 * @author Hakim El Hattab
 */
(function(){

	var NODES_X = Math.ceil( window.innerWidth * 0.02 ),
		NODES_Y = Math.ceil( window.innerHeight * 0.02 ),

		BEAT_VELOCITY = 0.01,
		BEAT_FREQUENCY = 2,
		BEAT_LIMIT = 3,

		// Distance threshold between active node and beat
		ACTIVATION_DISTANCE = 10,

		// Number of neighboring nodes to push aside on impact
		WAVE_RADIUS = 4;
	
	// The world dimensions
	var world = { 
			width: window.innerWidth, 
			height: window.innerHeight,
			center: new Point( window.innerWidth/2, window.innerHeight/2 )
		},
	
		id = 0,

		container,
		styles,

		query = {},

		activateNodeDistance = 0,
		currentBeat = null,
		currentStyle = null,

		nodes = [],
		beats = [];
	
	/**
	 * 
	 */
	function initialize() {
		var ctx = Sketch.create();

		container = document.querySelector( '#wrapper' );
		container.appendChild( ctx.canvas )
		styles = document.querySelector( '.styles' );
		styles.addEventListener( 'change', onStyleChanged, false );

		var hash = window.location.hash.slice(1);
		if( hash.length > 1 ) styles.value = hash;

		currentStyle = styles.value;

		// ctx.autoclear = false;

		ctx.setup = function() {
			// Distance between nodes
			var cx = world.width / ( NODES_X + 1 ),
				cy = world.height / ( NODES_Y + 1 );

			activateNodeDistance = Math.min( cx, cy ) * 0.5;

			var i,
				j,
				x = 0,
				y = 0,
				len = NODES_X * NODES_Y;

			// Generate nodes
			for( y = 0; y < NODES_Y; y++ ) {
				for( x = 0; x < NODES_X; x++ ) {
					nodes.push( new Node( cx + x * cx, cy + y * cy, x, y ) );
				}
			}

			// Determine node neighbors
			for( i = 0; i < len; i++ ) {
				var nodeA = nodes[i];

				for( j = 0; j < len; j++ ) {
					var nodeB = nodes[j];

					if( nodeA !== nodeB && nodeB.distanceToNode( nodeA ) < WAVE_RADIUS ) {
						nodeA.neighbors.push( nodeB );
					}
				}
			}

			// Generate beats
			for( i = 0; i < BEAT_LIMIT; i++ ) {
				var beat = new Beat( 
					world.center.x,
					world.center.y,
					i
				);

				beats.push( beat );
			}
		}

		ctx.draw = function() {
			// ctx.fillStyle = 'rgba( 0, 0, 0, 0.3 )';
			// ctx.fillRect( 0, 0, world.width, world.height );

			// Render nodes
			for( var i = 0, len = nodes.length; i < len; i++ ) {
				var node = nodes[i];

				this.updateNode( node );
				this.drawNode( node );
			}

			// Render beats
			ctx.save();

			var activeBeats = 0;

			for( var i = 0, len = beats.length; i < len; i++ ) {
				var beat = beats[i];

				this.updateBeat( beat );
				this.drawBeat( beat );

				if( beat.active ) activeBeats ++;
			}

			ctx.restore();

			var nextBeat = currentBeat ? beats[ ( currentBeat.index + 1 ) % beats.length ] : null;

			if( !currentBeat ) {
				currentBeat = beats[0];
				currentBeat.activate();
			}
			else if( !nextBeat.active && activeBeats < BEAT_FREQUENCY && currentBeat.strength > 1 / BEAT_FREQUENCY ) {
				currentBeat = nextBeat;
				currentBeat.activate();
			}
		}

		ctx.updateNode = function( node ) {
			// Active nodes that the mouse touches when pressed down
			if( ctx.dragging ) {
				.........完整代码请登录后点击上方下载按钮下载查看