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>
  • 相关阅读:
    NSSM 将jar 安装成windows服务
    Spark Streaming
    记录一次oracle的坑 ORA08103
    POJ 3669 Meteor Shower
    LeetCode题目1~3
    POJ 3723 Conscription 并查集 + Kruskal
    LeetCode题目4:Sort List
    C++实现的快速排序
    C++实现的一段希尔排序代码
    2014大众点评Hackathon参赛感想
  • 原文地址:https://www.cnblogs.com/MrZWJ/p/10060221.html
Copyright © 2011-2022 走看看