利用HTML5实现可视化音频动画特效



7 24 9



特效描述:利用HTML5实现 可视化音频 动画特效,利用HTML5实现可视化音频动画特效

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/css.css">

2. HTML代码

<div id="menu">
  <a id="btStartAudioVisualization" class="bt">启动音频可视化</a>
  <input id="btLoadAudio" type="file" accept="audio/*"><label id="labelLoadAudio" for="btLoadAudio" class="bt">加载音频</label>
</div>
<p id="txtStatus"></p>
<script>
var audio, audioContext, audioSrc;
var analyser, analyserBufferLength;
var audioInfo = 'Song: LAKEY INSPIRED - Chill Day';
//---
var MATHPI2 = Math.PI * 2;
//---
var w;
var h;
var btStart;
var btLoadAudio;
var labelLoadAudio;
var txtStatus;
var canvas;
var context;
var imageData;
var data;
var mouseActive = false;
var mouseDown = false;
var mousePos = { x:0, y:0 };
var fov = 250;
var speed = 0.75;//0.25;
var cubeMinHeight = 2;
var frequencyDamp = 25;
var smoothingTimeConstant = 0.65;
var fftSize = 8192;//32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, 32768
var circleHolder = [];
var time = 0;
var colorInvertValue = 0;
var rgb = {};
    rgb.r = Math.random() * MATHPI2;
    rgb.g = Math.random() * MATHPI2;
    rgb.b = Math.random() * MATHPI2;
var rgb2 = {};
    rgb2.r = Math.random() * MATHPI2;
    rgb2.g = Math.random() * MATHPI2;
    rgb2.b = Math.random() * MATHPI2;
//---
/*
function getRGBColor() {
  var r = Math.sin( rgb.r += 0.010 ) * 1 + 1;
  var g = Math.sin( rgb.g += 0.007 ) * 1 + 1;
  var b = Math.sin( rgb.b += 0.013 ) * 1 + 1;
  //var r = Math.sin( rgb.r += 0.040 ) * 1 + 1;
  //var g = Math.sin( rgb.g += 0.028 ) * 1 + 1;
  //var b = Math.sin( rgb.b += 0.052 ) * 1 + 1;
  return { r:r, g:g, b:b };
};*/
function getRGBColor( color ) {
  var r = Math.sin( color.r += 0.010 ) * 1 + 1;
  var g = Math.sin( color.g += 0.007 ) * 1 + 1;
  var b = Math.sin( color.b += 0.013 ) * 1 + 1;
  //var r = Math.sin( color.r += 0.040 ) * 1 + 1;
  //var g = Math.sin( color.g += 0.028 ) * 1 + 1;
  //var b = Math.sin( color.b += 0.052 ) * 1 + 1;
  return { r:r, g:g, b:b };
};
function getRGBColor2( color ) {
  //var r = Math.sin( color.r += 0.010 ) * 1 + 1;
  //var g = Math.sin( color.g += 0.007 ) * 1 + 1;
  //var b = Math.sin( color.b += 0.013 ) * 1 + 1;
  var r = Math.sin( color.r += 0.040 ) * 1 + 1;
  var g = Math.sin( color.g += 0.028 ) * 1 + 1;
  var b = Math.sin( color.b += 0.052 ) * 1 + 1;
  return { r:r, g:g, b:b };
};
function limitRGBColor( color, percent = 0.45 ) {
  if ( color.r < percent ) {
    color.r = percent;
  }
  if ( color.g < percent ) {
    color.g = percent;
  }
  if ( color.b < percent ) {
    color.b = percent;
  }
};
function init() {
  canvas = document.createElement( 'canvas' );
  canvas.addEventListener( 'mousedown', mouseDownHandler, false );
  canvas.addEventListener( 'mouseup', mouseUpHandler, false );
  canvas.addEventListener( 'mousemove', mouseMoveHandler, false );
  canvas.addEventListener( 'mouseenter', mouseEnterHandler, false ); 
  canvas.addEventListener( 'mouseleave', mouseLeaveHandler, false ); 
  document.body.appendChild( canvas );
  context = canvas.getContext( '2d' );
  window.addEventListener( 'resize', onResize, false );
  onResize();
  addCircles();
  render();
  clearImageData();
  render();
  context.putImageData( imageData, 0, 0 );
  btStart = document.getElementById( 'btStartAudioVisualization' );
  btStart.addEventListener( 'mousedown', userStart, false );
  btLoadAudio = document.getElementById( 'btLoadAudio' );
  btLoadAudio.addEventListener( 'change', loadAudioFileHandler, false );
  labelLoadAudio = document.getElementById( 'labelLoadAudio' );
  labelLoadAudio.style.display = 'none';
  txtStatus = document.getElementById( 'txtStatus' );
  txtStatus.innerHTML = 'Waiting Patiently For You... Please Click the Start Button.';
};
//---
function userStart() {
  btStart.removeEventListener( 'mousedown', userStart );
  btStart.addEventListener( 'mousedown', audioBtHandler, false );
  btStart.innerHTML = 'Pause Audio';
  btStart.style.display = 'none';
  txtStatus.innerHTML = 'Loading Audio...';
  audioSetup( 'audio/ak.mp3' );
  animate();
};
//---
function audioSetup( url ) {
  if ( audio ) {
    audio.pause();
  }
  audio = new Audio();
  audio.src = url;
  audio.controls = false;
  audio.loop = true;
  audio.autoplay = true;
  audio.crossOrigin = 'anonymous';
  audio.addEventListener( 'canplaythrough', audioLoaded, false );
  audioContext = new ( window.AudioContext || window.webkitAudioContext )();
  analyser = audioContext.createAnalyser();
  analyser.connect( audioContext.destination );
  analyser.smoothingTimeConstant = smoothingTimeConstant;
  analyser.fftSize = fftSize;
  analyserBufferLength = analyser.frequencyBinCount;
  audioSrc = audioContext.createMediaElementSource( audio ); 
  audioSrc.connect( analyser );
};
function audioLoaded( e ) {
  txtStatus.innerHTML = audioInfo;
  btStart.style.display = 'inline-block';
  labelLoadAudio.style.display = 'inline-block';
};
function loadAudioFileHandler( e ) {
  loadFile( e );
};
function loadFile( e ) {
    var input = e.target;
    var reader = new FileReader();
    audioInfo = input.files[ 0 ].name;
    audioSetup( URL.createObjectURL( input.files[ 0 ] ) );
};
//---
function clearImageData() {
    for ( var i = 0, l = data.length; i < l; i += 4 ) {
        data[ i ] = 0;
        data[ i + 1 ] = 0;
        data[ i + 2 ] = 0;
        data[ i + 3 ] = 255;
    }
};
function setPixel( x, y, r, g, b, a ) {
    var i = ( x + y * imageData.width ) * 4;
    data[ i ] = r;
    data[ i + 1 ] = g;
    data[ i + 2 ] = b;
    data[ i + 3 ] = a;
};
//---
function drawLine( x1, y1, x2, y2, r, g, b, a ) {
  var dx = Math.abs( x2 - x1 );
  var dy = Math.abs( y2 - y1 );
  var sx = ( x1 < x2 ) ? 1 : -1;
  var sy = ( y1 < y2 ) ? 1 : -1;
  var err = dx - dy;
  var lx = x1;
  var ly = y1;    
  while ( true ) {
    if ( lx > 0 && lx < w && ly > 0 && ly < h ) {
      setPixel( lx, ly, r, g, b, a );
    }
    if ( ( lx === x2 ) && ( ly === y2 ) )
      break;
    var e2 = 2 * err;
    if ( e2 > -dx ) { 
      err -= dy; 
      lx += sx; 
    }
    if ( e2 < dy ) { 
      err += dx; 
      ly += sy; 
    }
  }
};
//---
function getCirclePosition( centerX, centerY, radius, index, segments ) {
  var angle = index * ( MATHPI2 / segments ) + time;
  var x = centerX + Math.cos( angle ) * radius;
  var y = centerY + Math.sin( angle ) * radius;
  return { x:x, y:y };
};
function drawCircle( centerPosition, radius, segments ) {
  var coordinates = [];
  var radiusSave;
  var diff = 0;//Math.floor( Math.random() * segments );
  for ( var i = 0; i <= segments; i++ ) {
    //var radiusRandom = radius + Math.random() * ( radius / 8 );
    //var radiusRandom = radius + Math.random() * ( radius / 32 );
    var radiusRandom = radius;// + ( radius / 8 );
    if ( i === 0 ) {
      radiusSave = radiusRandom;
    }
    if ( i === segments ) {
      radiusRandom = radiusSave;
    }
    var centerX = centerPosition.x;
    var centerY = centerPosition.y;
    var position = getCirclePosition( centerX, centerY, radiusRandom, i, segments );
    coordinates.push( { x:position.x, y:position.y, index:i + diff, radius:radiusRandom, segments:segments } );
  }
  return coordinates;
};
function addCircleSegment( x, y, z, audioBufferIndex ) {
  var circleSegment = {};
      circleSegment.x = x;
      circleSegment.y = y;
      //circleSegment.z = z;
      circleSegment.x2d = 0;
      circleSegment.y2d = 0;
      circleSegment.audioBufferIndex = audioBufferIndex;
  return circleSegment;
};
function addCircles() {
  var audioBufferIndexMin = 8;
  var audioBufferIndexMax = 1024;
  var audioBufferIndex = audioBufferIndexMin;
  var centerPosition = { x:0, y:0 };
  var center  = { x:0, y:0 };
  var toggle = 1;
  var index = 0;
  var audioIndex = audioBufferIndexMin;
  var mp = { x:Math.random() * w, y:Math.random() * h };
  for ( var z = -fov; z < fov; z += 5 ) { 
    var coordinates = drawCircle( centerPosition, 75, 64 );
    var circleObj = {};
        circleObj.segmentsOutside = [];
        circleObj.segmentsInside = [];
        circleObj.segmentsInside2 = [];
        circleObj.segmentsCount = 0;
        circleObj.index = index;
        //circleObj.audioIndex = audioIndex;
        circleObj.z = z;
        circleObj.center = center;
        circleObj.circleCenter = { x:0, y:0 };
        circleObj.mp = { x:mp.x, y:mp.y };
        circleObj.radius = coordinates[ 0 ].radius;
        //circleObj.radiusAudio = circleObj.radius;
        circleObj.color = { r:0, g:0, b:0 };
    //toggle = index % 4;
    toggle = index % 2;
    index++;
    if ( z < 0 ) {
      audioIndex++;
    } else {
      audioIndex--;
    }
    audioBufferIndex = Math.floor( Math.random() * audioBufferIndexMax ) + audioBufferIndexMin;  
    //audioBufferIndex = audioBufferIndexMin;
    var circleSegmentOutside;
    for ( var i = 0, l = coordinates.length; i < l; i++ ) { 
      var coordinate = coordinates[ i ];
      //if ( i % 4 === toggle && i % 2 === 1 ) {
      if ( i % 2 === toggle ) {
        circleSegmentOutside = addCircleSegment( coordinate.x, coordinate.y, z, audioBufferIndex );
        circleSegmentOutside.active = true;
        circleSegmentOutside.index = coordinate.index;
        circleSegmentOutside.radius = coordinate.radius;
        circleSegmentOutside.radiusAudio = circleSegmentOutside.radius;// + Math.random() * 15;
        circleSegmentOutside.segments = coordinate.segments;
        circleSegmentOutside.coordinates = [];
        var co;
        if ( i > 0 ) {
          co = coordinates[ i - 1 ];
        } else {
          co = coordinates[ l - 1 ];
        }
        var sub1 = addCircleSegment( co.x, co.y, z, audioBufferIndex );
        var sub2 = addCircleSegment( coordinate.x, coordinate.y, z - 5, audioBufferIndex );
        var sub3 = addCircleSegment( co.x, co.y, z - 5, audioBufferIndex );
        var sub4 = addCircleSegment( coordinate.x, coordinate.y, z, audioBufferIndex );
        var sub5 = addCircleSegment( co.x, co.y, z, audioBufferIndex );
        var sub6 = addCircleSegment( coordinate.x, coordinate.y, z - 5, audioBufferIndex );
        var sub7 = addCircleSegment( co.x, co.y, z - 5, audioBufferIndex );
        sub1.index = co.index;
        sub2.index = coordinate.index;
        sub3.index = co.index;
        sub4.index = coordinate.index;
        sub5.index = co.index;
        sub6.index = coordinate.index;
        sub7.index = co.index;
        circleSegmentOutside.subs = [];
        circleSegmentOutside.subs.push( sub1, sub2, sub3, sub4, sub5, sub6, sub7 );
        //audioBufferIndex = Math.floor( Math.random() * audioBufferIndexMax ) + audioBufferIndexMin;
        if ( i < l - 1 ) {
          audioBufferIndex = Math.floor( Math.random() * audioBufferIndexMax ) + audioBufferIndexMin;
        } else {
          audioBufferIndex = circleObj.segmentsOutside[ 0 ].audioBufferIndex;
        }
        circleObj.segmentsOutside.push( circleSegmentOutside );
      } else {
        circleObj.segmentsOutside.push( { active:false } );
      }
    }
    circleHolder.push( circleObj );
  }
};
//---
function onResize(){
  w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  canvas.width = w;
  canvas.height = h;
  context.fillStyle = '#000000';
  context.fillRect( 0, 0, w, h );
  imageData = context.getImageData( 0, 0, w, h );
  data = imageData.data;
};
//---
function audioBtHandler( event ) {
  if ( audio.paused ) {
    audio.play();
    btStart.innerHTML = 'Pause Audio';
  } else {
    audio.pause();
    btStart.innerHTML = 'Play Audio';
  }
};
//---
function mouseDownHandler( event ) {
  mouseDown = true;
};
function mouseUpHandler( event ) {
  mouseDown = false;
};
function mouseEnterHandler( event ) {
  mouseActive = true;
};
function mouseLeaveHandler( event ) {
  mouseActive = false;
  //mousePos.x = w / 2;
  //mousePos.y = h / 2;
  mouseDown = false;
};
function mouseMoveHandler( event ) {
  mousePos = getMousePos( canvas, event );
};
function getMousePos( canvas, event ) {
  var rect = canvas.getBoundingClientRect();
  return { x:event.clientX - rect.left, y:event.clientY - rect.top };
};
//---            
function render() {
  var aa = false;
  if ( analyser ) {
    aa = true;
  }
  var frequencySource;
  if ( aa === true ) {
    frequencySource = new Uint8Array( analyser.frequencyBinCount );
    analyser.getByteFrequencyData( frequencySource );
  }
  //---
  var sortArray = false;
  //---
  var col = getRGBColor2( rgb );
  var col2 = getRGBColor( rgb2 );
  limitRGBColor( col, 0.45 );
  limitRGBColor( col2, 0.25 );
  //---
  for ( var i = 0, l = circleHolder.length; i < l; i++ ) {
    var circleObj = circleHolder[ i ];
    circleObj.color.r = col.r - ( circleObj.z + fov ) / fov;
    circleObj.color.g = col.g - ( circleObj.z + fov ) / fov;
    circleObj.color.b = col.b - ( circleObj.z + fov ) / fov;
    //circleObj.color.r = Math.floor( ( ( ( col.r - circleObj.z + fov ) ) + ( col2.r - circleObj.z + fov ) ) / 2 );
    //circleObj.color.g = Math.floor( ( ( ( col.g - circleObj.z + fov ) ) + ( col2.g - circleObj.z + fov ) ) / 2 );
    //circleObj.color.b = Math.floor( ( ( ( col.b - circleObj.z + fov ) ) + ( col2.b - circleObj.z + fov ) ) / 2 );
    if ( circleObj.color.r < col2.r ) {
      circleObj.color.r = col2.r;
    }
    if ( circleObj.color.g < col2.g ) {
      circleObj.color.g = col2.g;
    }
    if ( circleObj.color.b < col2.b ) {
      circleObj.color.b = col2.b;
    }
    var circleObjBack;
    if ( i > 0 ) {
      circleObjBack = circleHolder[ i - 1 ];
    }
    //---
    if ( mouseActive ) {
      circleObj.mp = mousePos;
    } else {
      circleObj.mp.x += ( ( w / 2 ) - circleObj.mp.x ) * 0.00025;
      circleObj.mp.y += ( ( h / 2 ) - circleObj.mp.y ) * 0.00025;
    }
    //circleObj.center.x = ( ( w / 2 ) - circleObj.mp.x ) * ( -i / 150 ) + w / 2;
    //circleObj.center.y = ( ( h / 2 ) - circleObj.mp.y ) * ( -i / 150 ) + h / 2;
    circleObj.center.x = ( ( w / 2 ) - circleObj.mp.x ) * ( ( circleObj.z - fov ) / 500 ) + w / 2;
    circleObj.center.y = ( ( h / 2 ) - circleObj.mp.y ) * ( ( circleObj.z - fov ) / 500 ) + h / 2;
    //---
    if ( aa === true ) {
      //var f = frequencySource[ Math.floor(circleObj.z + fov) ];
      //var f = frequencySource[ i ];
      //var f = frequencySource[ circleObj.audioIndex ];
      //var fAdd = (f / 25);// * ( (circleObj.z - fov) / 200 );
      //circleObj.radiusAudio = fAdd;
    }
    //---
    for ( var j = 0, k = circleObj.segmentsOutside.length; j < k; j++ ) {
      var circleSegmentOutside = circleObj.segmentsOutside[ j ];
      if ( circleSegmentOutside.active === true ) {
        //---
        var scale = fov / ( fov + circleObj.z ); 
        var scaleBack;
        if ( i > 0 ) {
          scaleBack = fov / ( fov + circleObjBack.z ); 
        }
        var frequency, frequencyAdd;
        circleSegmentOutside.x2d = ( circleSegmentOutside.x * scale ) + circleObj.center.x;
        circleSegmentOutside.y2d = ( circleSegmentOutside.y * scale ) + circleObj.center.y;
        //---
        if ( aa === true ) {
          frequency = frequencySource[ circleSegmentOutside.audioBufferIndex ];
          frequencyAdd = frequency / 20;
          //---
          circleSegmentOutside.radiusAudio = circleSegmentOutside.radius - frequencyAdd;
        } 
        //---
        var lineColorValue = 0;
        if ( j > 0 ) {
          if ( aa === true && audio.paused === false ) {
            lineColorValue = Math.round( i / l * ( 55 + frequency ) );//255 
            if ( lineColorValue > 255 ) {
              lineColorValue = 255;
            }
          } else {
            lineColorValue = Math.round( i / l * 200 );//255 
          }
        }
        //---
        if ( i > 0 && i < l - 1 ) {
          var sub1 = circleSegmentOutside.subs[ 0 ];
          var sub1angle = sub1.index * ( MATHPI2 / circleSegmentOutside.segments ) + time;
              sub1.x2d = ( sub1.x * scale ) + circleObj.center.x;
              sub1.y2d = ( sub1.y * scale ) + circleObj.center.y;
              sub1.x = circleObj.circleCenter.x + Math.cos( sub1angle ) * circleSegmentOutside.radiusAudio;
              sub1.y = circleObj.circleCenter.y + Math.sin( sub1angle ) * circleSegmentOutside.radiusAudio;
          var sub2 = circleSegmentOutside.subs[ 1 ];
         	var sub2angle = sub2.index * ( MATHPI2 / circleSegmentOutside.segments ) + time;
              sub2.x2d = ( sub2.x * scaleBack ) + circleObjBack.center.x;
              sub2.y2d = ( sub2.y * scaleBack ) + circleObjBack.center.y;
              sub2.x = circleObj.circleCenter.x + Math.cos( sub2angle ) * circleSegmentOutside.radiusAudio;
              sub2.y = circleObj.circleCenter.y + Math.sin( sub2angle ) * circleSegmentOutside.radiusAudio;
          var sub3 = circleSegmentOutside.subs[ 2 ];
         	var sub3angle = sub3.index * ( MATHPI2 / circleSegmentOutside.segments ) + time;
              sub3.x2d = ( sub3.x * scaleBack ) + circleObjBack.center.x;
              sub3.y2d = ( sub3.y * scaleBack ) + circleObjBack.center.y;
              sub3.x = circleObj.circleCenter.x + Math.cos( sub3angle ) * circleSegmentOutside.radiusAudio;
              sub3.y = circleObj.circleCenter.y + Math.sin( sub3angle ) * circleSegmentOutside.radiusAudio;
					var sub4 = circleSegmentOutside.subs[ 3 ];
         	var sub4angle = sub4.index * ( MATHPI2 / circleSegmentOutside.segments ) + time;
              sub4.x2d = ( sub4.x * scale ) + circleObj.center.x;
              sub4.y2d = ( sub4.y * scale ) + circleObj.center.y;
							sub4.x = circleObj.circleCenter.x + Math.cos( sub4angle ) * circleSegmentOutside.radius;
              sub4.y = circleObj.circleCenter.y + Math.sin( sub4angle ) * circleSegmentOutside.radius;
					var sub5 = circleSegmentOutside.subs[ 4 ];
         	var sub5angle = sub5.index * ( MATHPI2 / circleSegmentOutside.segments ) + time;
              sub5.x2d = ( sub5.x * scale ) + circleObj.center.x;
              sub5.y2d = ( sub5.y * scale ) + circleObj.center.y;
							sub5.x = circleObj.circleCenter.x + Math.cos( sub5angle ) * circleSegmentOutside.radius;
              sub5.y = circleObj.circleCenter.y + Math.sin( sub5angle ) * circleSegmentOutside.radius;
         var sub6 = circleSegmentOutside.subs[ 5 ];
         var sub6angle = sub6.index * ( MATHPI2 / circleSegmentOutside.segments ) + time;
             sub6.x2d = ( sub6.x * scaleBack ) + circleObjBack.center.x;
             sub6.y2d = ( sub6.y * scaleBack ) + circleObjBack.center.y;
						 sub6.x = circleObj.circleCenter.x + Math.cos( sub6angle ) * circleSegmentOutside.radius;
             sub6.y = circleObj.circleCenter.y + Math.sin( sub6angle ) * circleSegmentOutside.radius; 
         var sub7 = circleSegmentOutside.subs[ 6 ];
         var sub7angle = sub7.index * ( MATHPI2 / circleSegmentOutside.segments ) + time;
             sub7.x2d = ( sub7.x * scaleBack ) + circleObjBack.center.x;
             sub7.y2d = ( sub7.y * scaleBack ) + circleObjBack.center.y;
						 sub7.x = circleObj.circleCenter.x + Math.cos( sub7angle ) * circleSegmentOutside.radius;
             sub7.y = circleObj.circleCenter.y + Math.sin( sub7angle ) * circleSegmentOutside.radius;
          var p1;
          var p2;
          var p3;
          var p4;
          var p5 = circleSegmentOutside.subs[ 3 ];
          var p6 = circleSegmentOutside.subs[ 4 ];
          var p7 = circleSegmentOutside.subs[ 6 ];
          var p8 = circleSegmentOutside.subs[ 5 ];
          if ( frequencyAdd > 0 ) {
            p1 = circleSegmentOutside;
            p2 = circleSegmentOutside.subs[ 1 ];
            p3 = circleSegmentOutside.subs[ 2 ];
            p4 = circleSegmentOutside.subs[ 0 ];
          }
          var cr = Math.round( circleObj.color.r * lineColorValue );
          var cg = Math.round( circleObj.color.g * lineColorValue );
          var cb = Math.round( circleObj.color.b * lineColorValue );
          if ( frequencyAdd > 0 ) {
            drawLine( p1.x2d | 0, p1.y2d | 0, p2.x2d | 0, p2.y2d | 0, cr, cg, cb, 255 );
            drawLine( p2.x2d | 0, p2.y2d | 0, p3.x2d | 0, p3.y2d | 0, cr, cg, cb, 255 );
            drawLine( p3.x2d | 0, p3.y2d | 0, p4.x2d | 0, p4.y2d | 0, cr, cg, cb, 255 );
            drawLine( p4.x2d | 0, p4.y2d | 0, p1.x2d | 0, p1.y2d | 0, cr, cg, cb, 255 );
            drawLine( p5.x2d | 0, p5.y2d | 0, p1.x2d | 0, p1.y2d | 0, cr, cg, cb, 255 );
            drawLine( p6.x2d | 0, p6.y2d | 0, p4.x2d | 0, p4.y2d | 0, cr, cg, cb, 255 );
            drawLine( p7.x2d | 0, p7.y2d | 0, p3.x2d | 0, p3.y2d | 0, cr, cg, cb, 255 );
            drawLine( p8.x2d | 0, p8.y2d | 0, p2.x2d | 0, p2.y2d | 0, cr, cg, cb, 255 );
          }
          if ( circleObj.z < fov / 2 ) {
            drawLine( p5.x2d | 0, p5.y2d | 0, p6.x2d | 0, p6.y2d | 0, cr, cg, cb, 255 );
            drawLine( p6.x2d | 0, p6.y2d | 0, p7.x2d | 0, p7.y2d | 0, cr, cg, cb, 255 );
            drawLine( p7.x2d | 0, p7.y2d | 0, p8.x2d | 0, p8.y2d | 0, cr, cg, cb, 255 );
            drawLine( p8.x2d | 0, p8.y2d | 0, p5.x2d | 0, p5.y2d | 0, cr, cg, cb, 255 );
          }
        }
        //---
        var circleSegmentOutsideangle;
        //if ( j < k - 1 ) {
        	circleSegmentOutsideangle = circleSegmentOutside.index * ( MATHPI2 / circleSegmentOutside.segments ) + time;
          circleSegmentOutside.x = circleObj.circleCenter.x + Math.cos( circleSegmentOutsideangle ) * circleSegmentOutside.radiusAudio;
          circleSegmentOutside.y = circleObj.circleCenter.y + Math.sin( circleSegmentOutsideangle ) * circleSegmentOutside.radiusAudio;
        /*} else {
          var circleSegmentOutside1 = circleObj.segmentsOutside[ 0 ];
          circleSegmentOutsideangle = circleSegmentOutside1.index * ( MATHPI2 / circleSegmentOutside1.segments ) + time;
          circleSegmentOutside.x = circleObj.circleCenter.x + Math.cos( circleSegmentOutsideangle ) * circleSegmentOutside1.radiusAudio;
          circleSegmentOutside.y = circleObj.circleCenter.y + Math.sin( circleSegmentOutsideangle ) * circleSegmentOutside1.radiusAudio;
       	}
        */
        //---
        /*
      if ( i > 0 && i < l - 1 ) {
      //if ( i > 0 && i < l - 1 && j < k - 1 ) {
        var circleSegmentOutsideLineBack;// = circleObjBack[ j ];
        var circleSegmentInsideLineBack;
        //if ( j === 0 ) {
          //pB = circleObjBack.segments[ circleObjBack.segments.length - 1 ];
        //} else {
          //pB = circleObjBack.segments[ j - 1 ];
        //}
        circleSegmentOutsideLineBack = circleObjBack.segmentsOutside[ j ];
        circleSegmentInsideLineBack = circleObjBack.segmentsInside[ j ];
        //drawLine( circleSegmentOutside.x2d | 0, circleSegmentOutside.y2d | 0, circleSegmentOutsideLineBack.x2d | 0, circleSegmentOutsideLineBack.y2d | 0, 0, Math.round( lineColorValue / 2 ), lineColorValue, 255 );
        //drawLine( circleSegmentInside.x2d | 0, circleSegmentInside.y2d | 0, circleSegmentInsideLineBack.x2d | 0, circleSegmentInsideLineBack.y2d | 0, 0, Math.round( lineColorValue / 2 ), lineColorValue, 255 );
      }
      */
      }
    }
    if ( mouseDown ) {
      circleObj.z += speed;
      if ( circleObj.z > fov ) {
        circleObj.z -= ( fov * 2 );
        sortArray = true;
      }
    } else {
      circleObj.z -= speed;
      if ( circleObj.z < -fov ) {
        circleObj.z += ( fov * 2 );
        sortArray = true;
      }
    }
  }
  //---
  if ( sortArray ) {
    circleHolder = circleHolder.sort( function( a, b ) {
      return ( b.z - a.z );
    } );
  }
  //---
  if ( mouseDown ) {
    time -= 0.005;
  } else {
    time += 0.005;
  }
  //---
  //soft invert colors
  if ( mouseDown ) {
    if ( colorInvertValue < 255 )
      colorInvertValue += 5;
    else
      colorInvertValue = 255;
    softInvert( colorInvertValue );
  } else {
    if ( colorInvertValue > 0 )
      colorInvertValue -= 5;
    else
      colorInvertValue = 0;
    if ( colorInvertValue > 0 )
      softInvert( colorInvertValue );
  }
};
//---
function softInvert( value ) {
  for ( var j = 0, n = data.length; j < n; j += 4 ) {
    data[ j ]     = Math.abs( value - data[ j ] );     // red
    data[ j + 1 ] = Math.abs( value - data[ j + 1 ] ); // green
    data[ j + 2 ] = Math.abs( value - data[ j + 2 ] ); // blue
    data[ j + 3 ] = 255;// - data[ j + 3 ]; // alpha
  }
};
//---
function animate() {
  clearImageData();
  render();
  context.putImageData( imageData, 0, 0 );
  requestAnimationFrame( animate );
};
window.requestAnimFrame = ( function() {
    return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            function( callback ) {
                window.setTimeout( callback, 1000 / 60 );
            };
} )();
//---
init();
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5线条动画 html5线条动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到