<!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旋转动画
猜你喜欢
转载自www.cnblogs.com/MrZWJ/p/10060221.html
今日推荐
周排行