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>
  • 相关阅读:
    TCL环境检查
    POI之Excel文档增删改查
    wireshark自动化之tshark命令行
    selenium-webdriver
    ruby自动化之selenium webGUI
    TCL自动化之SSH交互式
    链表的操作
    参考网址
    RTC定时开机闹钟
    中断
  • 原文地址:https://www.cnblogs.com/MrZWJ/p/10060221.html
Copyright © 2011-2022 走看看