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

2018年7月15日 0条评论 349次阅读 2人点赞

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

<!DOCTYPE html>

<head>

<title>jquery animate</title>

</head>

<style>

#box{

width: 100px;

height: 100px;

background: red;

position: absolute;

}

</style>

<body>

</body>

$(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>

<!DOCTYPE html>

<head>

<title>TweenMax-animate</title>

</head>

<style>

#box{

width: 100px;

height: 100px;

background: red;

position: absolute;

top: 50px;

}

</style>

<body>

</body>

//得到实例

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>

<html>

<head>

<title>My first three.js app</title>

<style>

body { margin: 0; }

canvas { width: 100%; height: 100% }

</style>

</head>

<body>

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>

<!DOCTYPE html>

<head>

</head>

<style>

body {

margin: 0;

background: #111;

min-width: 960px;

}

</style>

<body>

</body>

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>

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>

<head>

</head>

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>

<!DOCTYPE html>

<head>

<title>highcharts</title>

</head>

<body>

</body>

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: [{

colorByPoint: true,

data: [{

y: 61.41,

sliced: true,

selected: true

}, {

y: 11.84

}, {

y: 10.85

}, {

y: 4.67

}, {

y: 4.18

}, {

y: 1.64

}, {

y: 1.6

}, {

y: 1.2

}, {

y: 2.61

}]

});

</script>

</html>

散人博客

One Hundred Years of Solitude

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

以下都是简单的例子更多案例请移步官网查看

jquery-animate(动画)

TweenMax.js(动画)

three.js-(3d – WebGL )

d3.js-( 数据可视化 )

echarts.js-( 数据可视化 )

highcharts.js-( 数据可视化 )

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可

发表评论取消回复

One Hundred Years of Solitude

以下都是简单的例子更多案例请移步官网查看

jquery-animate(动画)

TweenMax.js(动画)

three.js-(3d – WebGL )

d3.js-( 数据可视化 )

echarts.js-( 数据可视化 )

highcharts.js-( 数据可视化 )

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

发表评论 取消回复

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可

发表评论取消回复