two.js之实现动画效果
一、什么是two.js？
Two.js 是面向现代 Web 浏览器的一个二维绘图 API。Two.js 可以用于多个场合：SVG，Canvas 和 WebGL，旨在使平面形状和动画的创建更方便，更简洁。
Two.js 有一个内置的动画循环，可搭配其他动画库。Two.js 包含可伸缩矢量图形解释器，这意味着开发人员和设计人员都可以在商业应用中，如 Adobe Illustrator 中创建 SVG 元素，并把它引入 Two.js 使用场景中。
二、导入two.js
三、用two.js实现动画
1）一个简单的小dome
<script type="text/javascript">
//在整个body中绘制绘图区
var two = new Two({
fullscreen:true,//设置是否全屏
autostart:true,//是否自动启动动画
}).appendTo(document.body); var star = two.makeStar(two.width/2,two.height/2,50,125);
//two.update();//映射到页面上
two.bind('update',function(frameCount){
star.rotation +=0.03;
}) </script>
2）实现一个比较复杂一些的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
svg{
background-color: black;
}
</style>
<script src="js/two.JS.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--创建div绘图区-->
<div id="draw-shapes"> </div>
<script type="text/javascript">
var elem = document.getElementById("draw-shapes");
var params = {width:400,height:400};
var two = new Two(params).appendTo(elem);
var circle = two.makeCircle(-72,0,50);//前两个是x轴y轴，然后是圆的半径
var star = two.makeStar(75,0,75,35,5);
// var ss = two.makeCurve(250,30,46,50,465,48,79,36,94); circle.fill = "#ccd0d5";//填充颜色
circle.lineWidth = 15;//边线的宽度
circle.stroke = "#FED519";//边线的颜色 star.fill = "yellow";
star.opacity = 0.5;//设置透明度
circle.noStroke();//去掉边线 var group = two.makeGroup(circle,star);//将两个图形合并到一个组中
// group.fill = "#ffffff"; group.translation.set(two.width/2,two.height/2);
group.rotation = Math.PI;
group.scale = 0.1; two.update(); two.bind('update',function(frameCount){
if(group.scale>0.99999){
//将缩放与旋转的度数变成0
group.scale = group.rotation = 0;
}
var t = (1- group.scale) * 0.3;
group.scale +=t;
group.rotation +=t *3*Math.PI;
}).play();
</script>
</body>
</html>
其中的背景是这个函数makeCurve会改变为什么样的背景取决于所给的数是多大以及多少个
四、two.js官网链接
two.js之实现动画效果的更多相关文章
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）
如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...
- js判断css动画效果是否结束
<!-- css样式 --> <style> .test{ width: 100px; height: 100px; transition: all 5s; backgroun ...
- 通过JS完成电梯动画效果
实习单位要求做一个在Vue项目中比较能适配的来反映货梯当前状况的页面效果 用JS写了一个 <!DOCTYPE html> <html> <head> <met ...
- js +1的动画效果
var fnPlusAnimate = function(str, options){ if (typeof str === 'object') { options = str; str = unde ...
- anime.js 实战：实现一个带有描边动画效果的复选框
在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...
- jQuery Easing动画效果扩展（转）
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jQuery Easing 动画效果扩展
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
随机推荐
- 我是如何利用Hadoop做大规模日志压缩的
背景 刚毕业那几年有幸进入了当时非常热门的某社交网站,在数据平台部从事大数据开发相关的工作.从日志收集.存储.数据仓库建设.数据统计.数据展示都接触了一遍,比较早的赶上了大数据热这波浪潮.虽然今天的人 ...
- LINUX通过PXE自动部署系统
原理介绍 TFTP(Trivial File Transfer Protocol,简单文件传输协议)是TCP/IP 协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议,提供不复杂.开销不大的 ...
- 第一个asp.net MVC5+ExtJS6入门案例项目
最近在学习asp.net MVC,结合前段时间学习的ExtJS,做了一个入门示例.不过还有一个json日期显示的问题没有解决. [思路] 1.先搭建一个asp.net MVC项目. 2.将MVC项目的 ...
- 在asp.net web api 2 使用 Serilog 记录日志
Serilog是.net里面非常不错的记录日志的库,另外一个我认为比较好的Log库是NLog. 在我个人的asp.net web api 2 基础框架(Github地址)里,我原来使用的是NLog,但 ...
- JS中var和let
前 言 JavaScript 大家都知道声明一个变量时,通常会用'var'来声明,但是在ES6中,定义了另一个关键字'let'.今天我就为大家带来'var'与'let'这两个关键字声明有何异同 ...
- Java并发/多线程系列——初识篇
回到过去,电脑有一个CPU,一次只能执行一个程序.后来多任务处理意味着计算机可以同时执行多个程序(AKA任务或进程).这不是真的"同时".单个CPU在程序之间共享.操作系统将在运行 ...
- OpenCV探索之路（二十六）：如何去除票据上的印章
最近在做票据的识别的编码工作时遇到一些问题,就是票据上往往会有一些红色印章把一些重要信息区域给覆盖了,比如一些开发票人员盖印章时比较随意,容易吧一些关键区域给遮蔽了,这让接下来的票据识别很困难,因此, ...
- 上传文件没有写权限Access to the path is denied
Access to the path is denied. asp.net程序目录放在系统盘,ntfs格式. 程序中对cfg.xml有写入操作. 运行的时候出现了这个问题. 在我自己的机器上没有问题 ...
- 超全面！这可能是最全面的 jQuery 知识总结
个人建议:学习 jQuery 前先掌握基本的 JavaScrpit 语法,特别是对函数要掌握,jQuery 基本上是使用函数. jQuery 简介 jQuery 是一个轻量级 JavaScript 库 ...
- 提纲挈领webrtc之NS(noise suppression)模块
Noise suppression,就是大家说的降噪.这种降噪是把人声和非人声区分开来,把非人声当成噪声. 一段包含人声和噪声的音频经过该模块处理,从理论上讲,只剩下人声了. webrtc的NS在业内 ...