前言:我所熟知的关于做动画3d可视化的几个js库,如下:
1.jQuery的animate() animate
2.TweenMax.js TweenMax
3.three.js three
4.d3.js d3
5.echarts.js echarts
6.highcharts highcharts
以下都是简单的例子更多案例请移步官网查看
jquery-animate(动画)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery animate</title> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> </head> <style> #box{ width: 100px; height: 100px; background: red; position: absolute; } </style> <body> <div id="box"></div> </body> <script> /* $(selector).animate({params},speed,callback); 必需的 params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是动画完成后所执行的函数名称 */ $('#box').animate({ left:'250px', opacity:'0.5', height:'250px', width:'250px' },2000,function(){ $(this).animate({ left:'500px', opacity:'1', height:'150px', width:'150px' },1000,function(){ alert('动画结束') }) }) // 使用相对值 也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=: // 使用预定义的值 您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle" </script> </html> |
TweenMax.js(动画)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TweenMax-animate</title> <script src="TweenMax.min.js"></script> </head> <style> #box{ width: 100px; height: 100px; background: red; position: absolute; top: 50px; } </style> <body> <div id="box"></div> <button id="play">play</button> <button id="stop">stop</button> </body> <script> //得到实例 var t=new TimelineMax(); //开始使用实例下面的方法 t.to('#box',1,{left:200},1) t.to('#box',1,{top:'+=200',onComplete:function(){alert('继续动画就点我')}},'+=1') t.to('#box',1,{left:'+=200'},'+=1') t.to('#box',1,{top:'+=200'},'+=1') t.to('#box',1,{left:'-=200'},'+=1') t.to('#box',1,{top:'-=200'},'+=1') t.to('#box',1,{left:'-=200'},'+=1') t.to('#box',1,{top:'-=200',onComplete:function(){ //运动结束后触发对应的函数 alert('动画结束了') }},'+=1') document.getElementById('play').onclick=function(){ t.play() } document.getElementById('stop').onclick=function(){ t.stop() } /* to():添加动画 参数说明: 1. 元素(原生,jq),元素选择器或对象 2. 持续时间(s) 3. 对象 :变化的属性->值 4. 【可选】动画延迟发生时间 (可写数字,“-=0.5”,“+=0.5“) 其他方法 stop():停止动画 play():开始动画 reverse():反向开始动画 onComplete():运动结束后触发对应的函数 onReverseComplete():反向运动结束后触发对应的函数 */ </script> </html> |
three.js-(3d – WebGL )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<html> <head> <title>My first three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="https://threejs.org/build/three.js"></script> <script> /* Creating the scene */ var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; /* Rendering the scene */ var animate = function () { requestAnimationFrame( animate ); /* Animating the cube */ cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); }; animate(); </script> </body> </html> |
d3.js-( 数据可视化 )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>粒子</title> </head> <style> body { margin: 0; background: #111; min-width: 960px; } </style> <body> </body> <script src="http://d3js.org/d3.v3.min.js" language="JavaScript"></script> <script> var width = Math.max(960, innerWidth), height = Math.max(500, innerHeight); var x1 = width / 2, y1 = height / 2, x0 = x1, y0 = y1, i = 0, r = 200, τ = 2 * Math.PI; var canvas = d3.select("body").append("canvas") .attr("width", width) .attr("height", height) .on("ontouchstart" in document ? "touchmove" : "mousemove", move); var context = canvas.node().getContext("2d"); context.globalCompositeOperation = "lighter"; context.lineWidth = 2; d3.timer(function() { context.clearRect(0, 0, width, height); var z = d3.hsl(++i % 360, 1, .5).rgb(), c = "rgba(" + z.r + "," + z.g + "," + z.b + ",", x = x0 += (x1 - x0) * .1, y = y0 += (y1 - y0) * .1; d3.select({}).transition() .duration(2000) .ease(Math.sqrt) .tween("circle", function() { return function(t) { context.strokeStyle = c + (1 - t) + ")"; context.beginPath(); context.arc(x, y, r * t, 0, τ); context.stroke(); }; }); }); function move() { var mouse = d3.mouse(this); x1 = mouse[0]; y1 = mouse[1]; d3.event.preventDefault(); } </script> </html> |
echarts.js-( 数据可视化 )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放']; var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220]; var yMax = 500; var dataShadow = []; for (var i = 0; i < data.length; i++) { dataShadow.push(yMax); } option = { title: { text: '特性示例:渐变色 阴影 点击缩放', subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom' }, xAxis: { data: dataAxis, axisLabel: { inside: true, textStyle: { color: '#fff' } }, axisTick: { show: false }, axisLine: { show: false }, z: 10 }, yAxis: { axisLine: { show: false }, axisTick: { show: false }, axisLabel: { textStyle: { color: '#999' } } }, dataZoom: [ { type: 'inside' } ], series: [ { // For shadow type: 'bar', itemStyle: { normal: {color: 'rgba(0,0,0,0.05)'} }, barGap:'-100%', barCategoryGap:'40%', data: dataShadow, animation: false }, { type: 'bar', itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#83bff6'}, {offset: 0.5, color: '#188df0'}, {offset: 1, color: '#188df0'} ] ) }, emphasis: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#2378f7'}, {offset: 0.7, color: '#2378f7'}, {offset: 1, color: '#83bff6'} ] ) } }, data: data } ] }; // Enable data zoom when user click bar. var zoomSize = 6; myChart.on('click', function (params) { console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]); myChart.dispatchAction({ type: 'dataZoom', startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)], endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)] }); });; if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html> |
highcharts.js-( 数据可视化 )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>highcharts</title> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> </head> <body> <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> </body> <script> Highcharts.chart('container', { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: 'Browser market shares in January, 2018' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, series: [{ name: 'Brands', colorByPoint: true, data: [{ name: 'Chrome', y: 61.41, sliced: true, selected: true }, { name: 'Internet Explorer', y: 11.84 }, { name: 'Firefox', y: 10.85 }, { name: 'Edge', y: 4.67 }, { name: 'Safari', y: 4.18 }, { name: 'Sogou Explorer', y: 1.64 }, { name: 'Opera', y: 1.6 }, { name: 'QQ', y: 1.2 }, { name: 'Other', y: 2.61 }] }] }); </script> </html> |