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>
  • 相关阅读:
    sqlalchemy-数据目录集合整合
    算法-lowb三人组
    ipython ---matplotlib:绘图和可视化
    ipython --pandas
    ipython --之Numpy
    字符编码
    Markdown——入门使用
    python集合操作和内置方法
    python字典操作和内置方法
    python元祖操作和内置方法
  • 原文地址:https://www.cnblogs.com/MrZWJ/p/10060221.html
Copyright © 2011-2022 走看看