1.two.js用來做動畫十分便捷，因爲two.js製作的動畫默認都是以自己爲中心旋轉
3.two.js的旋轉不會造成累加效果
2. Two.js中不使用定時器，使用Two.play()方法，two.js 動畫原理：調用two.play()方法 ，每秒調用60次,two.update() //每次調用觸發一次update事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
svg,canvas{
background-color: #4cae4c;
}
</style>
</head>
<body>
<h1>two.js 旋轉</h1>
<div id="box"></div>
<script src="js/two.js"></script>
<script>
var box=document.getElementById("box")
//繪製一個2d圖像
var two =new Two({
width :600,
height : 600,
type : Two.Types.svg
}
).appendTo(box);
//繪製圓形
var c=two.makeCircle(50,50,25)
//繪製矩形
var r=two.makeRectangle(200,200,100,100)
//旋轉(two.js示意自己爲中心，並且旋轉不會累加)
var deg=0
two.on("update",function () {
deg+=3
r.rotation=deg*Math.PI/180;
});
two.play()
</script>
</body>
</html>
two.js可以將兩個圖形合併再進行操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
svg,canvas{
background-color: #4cae4c;
}
</style>
</head>
<body>
<script src="js/two.js"></script>
<div id="box">
</div>
<script>
var box=document.getElementById("box")
var two=new Two({
width:600,height:600,
type:Two.Types.canvas
}).appendTo(box)
var c=two.makeCircle(100,100,50)
var r=two.makeRectangle(100,100,200,300)
//將兩個圖形作爲一組
var g=two.makeGroup(r,c)
//平移原點
g.translation.set(200,200);
// g.rotation=30*Math.PI/180;
// two.update()
//two.js 動畫原理：調用two.play()方法
//每秒調用60次,two.update()
//每次調用觸發一次update事件
var deg=0
two.on("update",function () {
deg+=3
g.rotation=deg*Math.PI/180;
});
two.play()
</script>
</body>
</html>