svg旋转动画

最新推荐文章于 2023-10-26 16:07:07 发布

diaoting2815

最新推荐文章于 2023-10-26 16:07:07 发布

阅读量877

点赞数

文章标签： c#

原文链接：http://www.cnblogs.com/MrZWJ/p/10060221.html

版权

<!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>

转载于:https://www.cnblogs.com/MrZWJ/p/10060221.html

diaoting2815

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
svg旋转动画

<!doctype html><html><head> <title>test</title> <meta charset="UTF-8"></head><body><div></div><script src="two.js"></scr...
复制链接

扫一扫