做动画-3d-WebGL常用的js库

2018-07-15 分类：JavaScript 作者：管理员阅读（45）

前言:我所熟知的关于做动画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(动画)

<!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(动画)

<!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 )

<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-( 数据可视化 )

<!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-( 数据可视化 )

<!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-( 数据可视化 )

<!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>

「两年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(0) 打赏