<!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. JAVA常用设计模式(一、单例模式、工厂模式)

    JAVA设计模式之单例模式 import java.util.HashMap; import java.util.Map; /** * 设计模式之单例模式 * 单例模式(Singleton Patte ...

  2. 怎么解决mysql 执行SQL过长问题------------？

    Could not execute JDBC batch update mysql中,in语句中参数个数是不限制的.不过对整段sql语句的长度有了限制(max_allowed_packet). 默认 ...

  3. kali 2018.2版本运行破解版burpsuite时候的问题。

    最近重装了kali虚拟机,装完之后把burp拷到里面发现运行不了了,折腾了下才解决,问题主要是由于java环境造成的. 系统默认是以java10运行burp的,但是java10好像是不支持    -X ...

  4. Vue组件的介绍与使用

    组件系统是将一个大型的界面切分成一个一个更小的可控单元. 组件是可复用的,可维护的. 组件具有强大的封装性,易于使用. 大型应用中,组件与组件之间交互是可以解耦操作的. 全局组件的使用 <!DO ...

  5. 机顶盒安装apk系列

    1.湖南移动九州PTV-8508机顶盒安装第三方apk包 1.先把安装包放入U盘根目录下,插入机顶盒usb口 2.查看8508机顶盒IP地址 3.使用adb工具连接机顶盒,这款盒子的adb默认端口是8 ...

  6. k8s-YAML配置文件（转）

    转自http://www.cnblogs.com/bigberg/p/9203619.html 一.YAML基础 YAML是专门用来写配置文件的语言,非常简洁和强大,使用比json更方便.它实质上是一 ...

  7. Docker Compose（八）

    Docker Compose 是Docker官方编排(Orchstration)项目之一,负责快速在集群中部署分布式应用.   Dockerfile可以让用户管理一个单独的应用容器:而Compose则 ...

  8. mac 中host设置方法

    在开发中,有的接口为了安全考虑,只能通过指定的域名去反问,这时本地启动的 localhost 就无法获取到数据,需要去更改电脑的host文件配置,下面介绍mac 电脑的设置方法 1. 打开终端,输入一 ...

  9. 访问器 & 修改器

    访问器 model /** * 定义一个访问器 当 Eloquent 尝试获取 title 的值时,将会自动调用此访问器(查詢時自動調用) * @author jackie <2019.02.1 ...

  10. Python神坑：sum和numpy.sum

    同样的一段代码,在两个python文件里面执行的结果不一样,一个是按照列单位进行sum一个是所有元素进行sum: def distCal(vecA, vecB): return sqrt(sum(po ...