<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
</head>
<body>
<div></div>
<script src="two.js"></script>
<script>
var div=document.body.firstChild.nextSibling;//找到div元素，這里可以給div指定id，減少代碼量
var two=new Two({fullscreen: true}).appendTo(div);//將新生成的節點添加為div的孩子節點，並返回這個節點對象
var circle=two.makeCircle(-70,0,50);//畫圓
var rect=two.makeRectangle(70,0,100,100);//畫一個長方形
circle.fill="#ffdd00";//圓形內部顏色填充
rect.fill='rgba(200,150,120,0.75)';//矩形內部顏色填充
var group=two.makeGroup(circle,rect);//將圓和長方形添加到一個組，方便統一進行操作
group.scale=0;//先將圓和長方形隱藏
group.translation.set(two.width/2,two.height/2);//設置組顯示的中心位置
two.bind("update",function(){
if(group.scale>0.99999){一單group組內的圖形恢復到原大小，就將它們隱藏，並且旋轉角度也設置為0
group.scale=0;
group.rotation=0;
}
var t=(1-group.scale)*0.125;//變化的變量
group.scale+=t;//縮放隨着t的變化而變化
group.rotation+=t*4*Math.PI;//旋轉角度隨着t的變化而變化
}).play();
</script>
</body>
</html>
svg旋轉動畫
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。