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

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

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

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

赞(0) 打赏