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

svg旋转动画的更多相关文章

  1. 18个超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...

  2. 程序猿必备的10款超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了10个非 ...

  3. 【Web动画】SVG 线条动画入门

    通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...

  4. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  5. Android立体旋转动画实现与封装（支持以X、Y、Z三个轴为轴心旋转）

    本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于andro ...

  6. DrawSVG - SVG 路径动画 jQuery 插件

    jQuery DrawSVG 使用了 jQuery 内置的动画引擎实现 SVG 路径动画,用到了 stroke-dasharray 和 stroke-dashoffset 属性.DrawSVG 是完全 ...

  7. 类似 Dribbble 下载按钮的 SVG 弹性动画进度条

    Codrops 发布了一个如何创建一个基于弹性效果的 SVG 加载进度条教程,基于 SVG 和 TweenMax 实现.按钮开始的时候是一个带有箭头的图标,一旦它被点击,动画成一个有趣的小金属丝和一个 ...

  8. SVG Drawing Animation - SVG 绘制动画

    一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...

  9. iOS开发--QQ音乐练习,旋转动画的实现,音乐工具类的封装,定时器的使用技巧,SliderBar的事件处理

    一.旋转动画的实现 二.音乐工具类的封装 -- 返回所有歌曲,返回当前播放歌曲,设置当前播放歌曲,返回下一首歌曲,返回上一首歌曲方法的实现 头文件 .m文件 #import "ChaosMu ...

随机推荐

  1. python入门第二天

    啦啦啦啦啦!!!!我又来啦,几天该正式开始学习python语言啦,好高兴啊!!!今天学习的主要内容是变量和简单的数据类型!! 变量和简单的数据类型 大家回忆一下昨天的Hello Python Worl ...

  2. struts2 自定义异常拦截器配log4j

    log4j.rootLogger = debug,stdout,F log4j.appender.stdout = org.apache.log4j.ConsoleAppender log4j.app ...

  3. 20175202 《Java程序设计》第四周学习总结

    20175202 <Java程序设计>第四周学习总结 第五章学习内容 1.子类的继承性: (1)子类与父类在同一包中的继承性:子类自然地继承了其父类中不是private的成员变量作为自己的 ...

  4. PCL中Sample_consensus分割支持的几何模型

    随机采样一致分割法,从点云中分割出线.面等几何元素 #include <pcl/sample_consensus/method_types.h> #include <pcl/samp ...

  5. 阿里云轻量应用服务器 怎么控制怎么上传文件怎么安装JDK和Tomcat怎么完成JavaWeb的部署

    你是否遇到过这些问题,自己的javaweb项目本地运行一切正常,但是一旦转移到阿里服务器之类的.就出现以下问题. 1 jsp无法解析java类 2 Only a type can be importe ...

  6. 用TreeSet和Comparator给list集合元素去重

    今天在做导入功能时,看到一个感觉很好的去重算法,特分享给大家看看: 其原理利用了以下几点: 1.TreeSet里面不会有重复的元素,所以当把一个List放进TreeSet里面后,会自动去重 2.Tre ...

  7. C#编程经验-VS Debug

    F11 OneStepDebugF10 ProcessDebugbreakPointDebug(quick location,then use one step debug)

  8. ylbtech-协议-网络-安全协议：HTTPS

    ylbtech-协议-网络-安全协议:HTTPS HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer 或 Hypertext ...

  9. Python发送微信消息

    针对此 需要安装itchat第三方模块 采用pip安装就可以了   pip install itchat import itchatimport time#引入时间函数进行测试time_format= ...

  10. WPF 选项卡

    1.引用 xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock" 2.xaml代码 <xcad:DockingMa ...