【重點突破】——two.js模擬繪制太陽月亮地球轉動
阿新 • • 發佈:2017-10-03
接口 mat -1 blog doctype lan 所有 title eight
一、引言
自學two.js第三方繪圖工具庫,認識到這是一個非常強大的類似轉換器的工具,提供一套固定的接口,可用在各種技術下,包括:Canvas、Svg、WebGL,極大的簡化了應用的開發。這裏,我使用two.js手冊裏教的一些方法,做一個小練習,模擬繪制太陽-月亮-地球自轉公轉的類銀河系轉動的動畫效果。
二、原理
在Two.js中和Canvas、SVG都不同的有這麽幾個地方:
- Two.js中所有的旋轉都是以自己為中心
- Two.js中的旋轉不會累加
- Two.js中不使用定時器,使用Two.play()方法,類似於Flash動畫(但它的底層是有定時器的,該方法每秒鐘調用60次two.update()方法
三、簡單模型
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
svg,canvas{
background: #ddd;
}
</style>
</head>
<body>
<h3>使用Two.js創建圓形和矩形說明動畫原理</h3>
<div id="box"></div>
<script src="js/two.js"></script>
<script>
//創建一個2D繪圖對象
var two = new Two({
width:800,
height:400,
type:Two.Types.svg
}).appendTo(box);
//畫一個圓形和矩形——矩形定位點在矩形中心
var c = two.makeCircle( -200,0,100);
var r = two.makeRectangle(200,0,200,200);
//創建小組,平移小組的原點
var g = two.makeGroup(r,c);
g.translation.set(400,200);
g.rotation = 30*Math.PI/180;
//動畫原理:調用two.play()方法
var deg = 0;
two.on(‘update‘,function(){
deg += 3;
g.rotation = deg*Math.PI/180;
});
two.play();
</script>
</body>
</html>
效果:
四、太陽-月亮-地球自轉公轉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/two.js"></script>
<style>
svg {
background: #222;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var two =new Two({width:600, height: 600}).appendTo(container);
var sun = two.makeCircle(0,0,100);
sun.fill = ‘red‘;
sun.stroke = ‘transparent‘;
var sunOrbit = two.makeCircle(0,0,200);
sunOrbit.fill = ‘transparent‘;
sunOrbit.stroke = ‘#ccc‘;
var earth = two.makeCircle(200, 0, 30);
earth.fill = ‘blue‘;
earth.stroke = ‘transparent‘;
var earthOrbit = two.makeCircle(200, 0, 50);
earthOrbit.fill = ‘transparent‘;
earthOrbit.stroke = ‘#ccc‘;
var moon = two.makeCircle(50,0, 5);
moon.fill = ‘gold‘;
moon.stroke = ‘transparent‘;
moon.rotation = 0;
var moonGroup = two.makeGroup(moon);
moonGroup.translation.set(200,0);
var earthGroup = two.makeGroup(earth,earthOrbit,moonGroup);
var sunGroup = two.makeGroup(sun,sunOrbit,earthGroup);
sunGroup.translation.set(two.width/2, two.height/2);
//two.update();
two.bind(‘update‘, function(){
moonGroup.rotation += 10*Math.PI/180;
moonGroup.rotation %= 2*Math.PI;
earthGroup.rotation += 2*Math.PI/180;
earthGroup.rotation %= 2*Math.PI;
})
two.play();
</script>
</body>
</html>
效果:
【重點突破】——two.js模擬繪制太陽月亮地球轉動