zoukankan      html  css  js  c++  java
  • svg旋转动画

    <!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>
  • 相关阅读:
    .net core web
    ASP.NET HttpContext类
    页面周期与事件
    (49) C# npoi 读写office
    vs2017 vs2019秘钥
    HDU 2767 Proving Equivalences(强连通 Tarjan+缩点)
    【bzoj1013】[JSOI2008]球形空间产生器sphere
    P1979 [NOIP]华容道
    hdu4352 XHXJ's LIS(数位DP + LIS + 状态压缩)
    hdu3709 Balanced Number 树形dp
  • 原文地址:https://www.cnblogs.com/MrZWJ/p/10060221.html
Copyright © 2011-2022 走看看