<!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. 机器视觉：SSD Single Shot MultiBox Detector

    今天介绍目标检测中非常著名的一个框架 SSD,与之前的 R-CNN 系列的不同,而且速度比 YOLO 更快. SSD 的核心思想是将不同尺度的 feature map 分成很多固定大小的 box,然后 ...

  2. Centos7 安装nginx1.14

    一丶官网 http://nginx.org/en/download.html 至于安装那个版本首先要看清楚版本代表什么意思 Nginx官网提供了三个类型的版本Mainline version:Main ...

  3. 使用openresty && minio && thumbor 构建稳定高效的图片服务器

    备注: minio 是一个开源的s3 协议兼容的分布式存储,openresty nginx+lua 高性能可扩展的nginx 衍生版,thumbor 基于python 的图片处理服务器,支持图片的裁剪 ...

  4. LOJ 3057 「HNOI2019」校园旅行——BFS+图等价转化

    题目:https://loj.ac/problem/3057 想令 b[ i ][ j ] 表示两点是否可行,从可行的点对扩展.但不知道顺序,所以写了卡时间做数次 m2 迭代的算法,就是每次遍历所有不 ...

  5. 在 delphiXE 10.2 上安装 FR5.4.6

    今天在虚拟机里成功安装了delphiXE 10.2, 然后想把常用的FR也装上,本想偷个懒,在网上找个装上就得了,结果发现必须要在发布的网站注册才能下载⊙︿⊙ 如此麻烦,心里这个不爽啊不爽! 然后自己 ...

  6. httpd基础知识

    apache简介   Apache取自"a patchy server"的读音,意思是充满补丁的服务器.Apache起初由伊利诺伊大学香槟分校的国家超级电脑应用中心(NCSA)开发 ...

  7. win10+vs2015编译caffe的cpu debug版本、部署matcaffe

    一.编译caffe 1.安装python-3.5.2-amd64.exe https://www.python.org/ftp/python/3.5.2/python-3.5.2-amd64.exe ...

  8. 爬虫之PyQuery

    PyQuery 是 Python 仿照 jQuery 的严格实现.语法与 jQuery 几乎完全相同. 官方文档:http://pyquery.readthedocs.io/ 安装 pip insta ...

  9. SpringSecurity-UsernamePasswordAuthenticationFilter的作用

    UsernamePasswordAuthenticationFilter应该是我们最关注的Filter,因为它实现了我们最常用的基于用户名和密码的认证逻辑. 先看一下一个常用的form-login配置 ...

  10. 6.ST LINK 下调试异常

    ☆1.无法进入main函数(printf的影响)***为什么有时候可以进入main函数,有什么进入不了main函数?    <1> 因为C语言默认使用显示器作为标准输出的设备,所以如果想利 ...