前言:我所熟知的关于做动画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 条评论 - 做动画-3d-WebGL常用的js库