<!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. 第七十九课 最短路径（Floyd）

    程序如下: #ifndef GRAPH_H #define GRAPH_H #include "Object.h" #include "SharedPointer.h&q ...

  2. C语言如何在可变参数函数中使用printf?

    我要将printf外面再包上一层:void fun(const char* fmt,...) {........printf(fmt,...);........}这种函数怎么写? 对比下printf与 ...

  3. MyCat配置详解

    MyCAT 配置解析 server.xml Mycat的配置文件,设置账号.参数等schema.xml Mycat对应的物理数据库和数据库表的配置rule.xml Mycat分片(分库分表)规则 一 ...

  4. 中国商用分组密码SM4

    SM4 密码算法结构 SM4 密码算法基本运算有两部分: 1.模2加:⊕,32比特异或运算 2.循环移位: <<< i ,把32位字循环左移i位 基本密码部件为 1非线性字节变换S盒 ...

  5. CH5702 Count The Repetitions

    题意 5702 Count The Repetitions 0x50「动态规划」例题 描述 定义 conn(s,n) 为 n 个字符串 s 首尾相接形成的字符串,例如: conn("abc& ...

  6. Processing 编程学习指南 (丹尼尔·希夫曼 著)

    https://processing.org/reference/ 第1章 像素 (已看) 第2章 Processing (已看) 第3章 交互 (已看) 第4章 变量 (已看) 第5章 条件语句 ( ...

  7. django基础 -- 10.form , ModelForm ,modelformset

    一.生成页面可用的 HTML标签 1.form 所有内置字段 Field required=True, 是否允许为空 widget=None, HTML插件 label=None, 用于生成Label ...

  8. 1.2.2 Excel中手机号或身份证号批量加密星号

    在对应的单元格中我们输入公式: =LEFT(C4,3)&"****"&RIGHT(C4,4)或=MID(C4,1,3)&"****"&a ...

  9. Firebird 烂笔头（一）

    下载非安装版,将文件解压缩到D:\FireBird2.5下面.然后里面有.bat文件,选择自己适合的类型安装后,在服务里面会有一个firebirdserver开头的服务,右键启动. win+R,在命令 ...

  10. 2018年，Java程序员转型大数据开发，是不是一个好选择？

    近日网上有一篇关于Java程序员职场生存现状的文章“2017年 Java 程序员,风光背后的危机”,在Java程序员圈子里引起了广泛关注和热议. 2017年,Java 程序员面临更加激烈的竞争. 不得 ...